import { useCallback, useEffect, useRef, useState } from 'react';
import { Bug, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useFocusTrap } from '../hooks/use-focus-trap';
import { __, sprintf } from '../lib/i18n';
import {
  trackFeedbackClosed,
  trackFeedbackSubmitFailed,
  trackFeedbackSubmitted,
} from '../lib/mixpanel';

interface FeedbackModalProps {
  open: boolean;
  onClose: () => void;
}

export function FeedbackModal({ open, onClose }: FeedbackModalProps) {
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [includeLogs, setIncludeLogs] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const dialogRef = useRef<HTMLDivElement>(null);

  const dismiss = useCallback(
    (reason: 'backdrop' | 'x' | 'cancel' | 'escape') => {
      trackFeedbackClosed(reason);
      onClose();
    },
    [onClose],
  );

  useFocusTrap(dialogRef, { active: open, onEscape: () => dismiss('escape') });

  useEffect(() => {
    if (open) {
      setError(null);
      setSuccess(false);
      setIncludeLogs(false);
    }
  }, [open]);

  const handleSubmit = useCallback(async () => {
    const s = subject.trim();
    const m = message.trim();
    if (!s || !m) {
      setError(__('Please fill in both subject and description.', 'llmagnet-llm-txt-generator'));
      return;
    }
    const root = window.wpApiSettings?.root?.replace(/\/$/, '') || '';
    const nonce = window.wpApiSettings?.nonce || '';
    if (!root || !nonce) {
      setError(__('Could not send feedback (missing API settings). Please reload the page.', 'llmagnet-llm-txt-generator'));
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch(`${root}/llm-analytics/v1/feedback`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': nonce,
        },
        credentials: 'same-origin',
        body: JSON.stringify({ subject: s, message: m, include_logs: includeLogs }),
      });
      const data = (await res.json().catch(() => ({}))) as {
        code?: string;
        message?: string;
      };
      if (!res.ok) {
        const msg =
          typeof data.message === 'string' && data.message
            ? data.message
            : sprintf(
                /* translators: %d: HTTP status code. */
                __('Request failed (%d)', 'llmagnet-llm-txt-generator'),
                res.status
              );
        trackFeedbackSubmitFailed(res.status, typeof data.code === 'string' ? data.code : undefined);
        setError(msg);
        return;
      }
      trackFeedbackSubmitted(s.length, m.length);
      setSuccess(true);
      setSubject('');
      setMessage('');
      window.setTimeout(() => {
        setSuccess(false);
        onClose();
      }, 1600);
    } catch {
      trackFeedbackSubmitFailed(0, 'network');
      setError(__('Network error. Please try again.', 'llmagnet-llm-txt-generator'));
    } finally {
      setSubmitting(false);
    }
  }, [subject, message, includeLogs, onClose]);

  if (!open) {
    return null;
  }

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="llmagnet-feedback-title"
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 100000,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 16,
        background: 'rgba(15, 23, 42, 0.35)',
      }}
      onMouseDown={(e) => {
        if (e.target === e.currentTarget) {
          dismiss('backdrop');
        }
      }}
    >
      <div
        ref={dialogRef}
        style={{
          width: '100%',
          maxWidth: 440,
          background: '#fff',
          borderRadius: 16,
          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.18)',
          border: '1px solid #e5e7eb',
          overflow: 'hidden',
        }}
        onMouseDown={(e) => e.stopPropagation()}
      >
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '16px 18px',
            borderBottom: '1px solid #f3f4f6',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: 36,
                height: 36,
                borderRadius: '50%',
                background: '#f3f4f6',
                color: '#374151',
              }}
            >
              <Bug className="w-5 h-5" strokeWidth={1.75} />
            </span>
            <h2
              id="llmagnet-feedback-title"
              style={{
                margin: 0,
                fontSize: 16,
                fontWeight: 600,
                color: '#111827',
                fontFamily: 'inherit',
              }}
            >
              {__('Feedback / bugs', 'llmagnet-llm-txt-generator')}
            </h2>
          </div>
          <Button
            type="button"
            onClick={() => dismiss('x')}
            variant="ghost"
            size="icon-sm"
            aria-label={__('Close feedback dialog', 'llmagnet-llm-txt-generator')}
          >
            <X className="w-5 h-5" strokeWidth={2} />
          </Button>
        </div>

        <div style={{ padding: '18px' }}>
          {success ? (
            <p style={{ margin: 0, color: '#059669', fontSize: 14 }}>{__('Thanks — your feedback was sent.', 'llmagnet-llm-txt-generator')}</p>
          ) : (
            <>
              <label htmlFor="llmagnet-feedback-subject" style={{ display: 'block', marginBottom: 8, fontSize: 12, fontWeight: 500, color: '#4b5563' }}>
                {__('Subject', 'llmagnet-llm-txt-generator')}
              </label>
              <input
                id="llmagnet-feedback-subject"
                type="text"
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                placeholder={__('Have something to say?', 'llmagnet-llm-txt-generator')}
                disabled={submitting}
                style={{
                  width: '100%',
                  boxSizing: 'border-box',
                  padding: '10px 12px',
                  borderRadius: 10,
                  border: '1px solid #d8b4e2',
                  fontSize: 14,
                  outline: 'none',
                  fontFamily: 'inherit',
                }}
              />
              <label
                htmlFor="llmagnet-feedback-message"
                style={{
                  display: 'block',
                  marginTop: 14,
                  marginBottom: 8,
                  fontSize: 12,
                  fontWeight: 500,
                  color: '#4b5563',
                }}
              >
                {__('Description', 'llmagnet-llm-txt-generator')}
              </label>
              <textarea
                id="llmagnet-feedback-message"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder={__('Describe your request', 'llmagnet-llm-txt-generator')}
                disabled={submitting}
                rows={5}
                style={{
                  width: '100%',
                  boxSizing: 'border-box',
                  padding: '10px 12px',
                  borderRadius: 10,
                  border: '1px solid #e5e7eb',
                  fontSize: 14,
                  resize: 'vertical',
                  minHeight: 120,
                  outline: 'none',
                  fontFamily: 'inherit',
                  lineHeight: 1.5,
                }}
              />
              <p style={{ margin: '10px 0 0', fontSize: 11, color: '#9ca3af', lineHeight: 1.4 }}>
                {__('We attach basic technical details (WordPress, PHP, plugin version, your account) to help us reproduce issues.', 'llmagnet-llm-txt-generator')}
              </p>
              <label
                htmlFor="llmagnet-feedback-include-logs"
                style={{
                  display: 'flex',
                  alignItems: 'flex-start',
                  gap: 8,
                  marginTop: 12,
                  fontSize: 12,
                  color: '#4b5563',
                  cursor: submitting ? 'not-allowed' : 'pointer',
                  lineHeight: 1.4,
                }}
              >
                <input
                  id="llmagnet-feedback-include-logs"
                  type="checkbox"
                  checked={includeLogs}
                  onChange={(e) => setIncludeLogs(e.target.checked)}
                  disabled={submitting}
                  style={{ marginTop: 2, flexShrink: 0 }}
                />
                <span>
                  {__('Also attach the last lines of my debug.log to help diagnose this issue. The log may contain technical paths or data from other plugins; we mask obvious secrets, but only enable this if you are comfortable sharing it.', 'llmagnet-llm-txt-generator')}
                </span>
              </label>
              {error && (
                <p style={{ margin: '12px 0 0', fontSize: 13, color: '#b91c1c' }} role="alert">
                  {error}
                </p>
              )}
              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 18 }}>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => dismiss('cancel')}
                  disabled={submitting}
                >
                  {__('Cancel', 'llmagnet-llm-txt-generator')}
                </Button>
                <Button
                  type="button"
                  variant="default"
                  size="lg"
                  onClick={() => void handleSubmit()}
                  disabled={submitting}
                >
                  {submitting
                    ? __('Sending…', 'llmagnet-llm-txt-generator')
                    : __('Submit feedback', 'llmagnet-llm-txt-generator')}
                </Button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}