'use client';

import { useState, useRef, FormEvent, ChangeEvent } from 'react';
import styles from './SupportForm.module.css';
import { useTurnstile } from '@/hooks/useTurnstile';

const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'];

interface SupportFormProps {
  dealerName?: string | null;
  dealerNumber?: string | null;
  userEmail?: string | null; // If provided, email field is hidden and this value is used
}

export default function SupportForm({
  dealerName,
  dealerNumber,
  userEmail,
}: SupportFormProps = {}) {
  const [subject, setSubject] = useState('');
  const [description, setDescription] = useState('');
  const [email, setEmail] = useState('');
  const [file, setFile] = useState<File | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [feedback, setFeedback] = useState<{ message: string; type: 'success' | 'error' } | null>(
    null
  );
  const formLoadTime = useRef(Date.now());
  const honeypotRef = useRef<HTMLInputElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const {
    containerRef: turnstileRef,
    getToken: getTurnstileToken,
    reset: resetTurnstile,
    isVerified: isTurnstileVerified,
  } = useTurnstile();

  const validateForm = (): boolean => {
    if (!subject.trim()) {
      setFeedback({ message: 'Please enter a subject.', type: 'error' });
      return false;
    }

    if (!description.trim()) {
      setFeedback({ message: 'Please enter a message.', type: 'error' });
      return false;
    }

    // Validate email if not provided via props (unauthenticated users)
    if (!userEmail) {
      if (!email.trim()) {
        setFeedback({ message: 'Please enter your email address.', type: 'error' });
        return false;
      }
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(email.trim())) {
        setFeedback({ message: 'Please enter a valid email address.', type: 'error' });
        return false;
      }
    }

    if (file) {
      if (file.size > MAX_FILE_SIZE) {
        setFeedback({ message: 'File is too large. Maximum size is 5MB.', type: 'error' });
        return false;
      }
      if (!ALLOWED_FILE_TYPES.includes(file.type)) {
        setFeedback({
          message: 'Invalid file type. Please use JPG, PNG, WebP, or PDF.',
          type: 'error',
        });
        return false;
      }
    }

    if (!isTurnstileVerified) {
      setFeedback({ message: 'Please complete the security verification.', type: 'error' });
      return false;
    }

    return true;
  };

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0] || null;
    setFile(selectedFile);
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    if (isSubmitting) return;

    setFeedback(null);

    if (!validateForm()) return;

    setIsSubmitting(true);

    try {
      const formData = new FormData();
      formData.append('subject', subject.trim());
      formData.append('description', description.trim());
      formData.append('website', honeypotRef.current?.value || ''); // Honeypot
      formData.append('_ts', String(Date.now() - formLoadTime.current)); // Time elapsed
      const turnstileToken = getTurnstileToken();
      if (turnstileToken) {
        formData.append('_turnstile', turnstileToken); // Cloudflare Turnstile token
      }

      // Include dealer info if available (for ClickUp task context)
      if (dealerName) {
        formData.append('dealerName', dealerName);
      }
      if (dealerNumber) {
        formData.append('dealerNumber', dealerNumber);
      }

      // Include email (from session for authenticated users, from form for unauthenticated)
      const emailToSubmit = userEmail || email.trim();
      if (emailToSubmit) {
        formData.append('email', emailToSubmit);
      }

      if (file) {
        formData.append('attachment', file);
      }

      const response = await fetch('/api/support/clickup', {
        method: 'POST',
        body: formData,
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Failed to submit. Please try again.');
      }

      // Success - reset form
      setSubject('');
      setDescription('');
      setEmail('');
      setFile(null);
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
      resetTurnstile();
      setFeedback({
        message: 'Thank you! Your message has been sent. We will respond shortly.',
        type: 'success',
      });
    } catch (error) {
      setFeedback({
        message: error instanceof Error ? error.message : 'Something went wrong. Please try again.',
        type: 'error',
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className={styles.form} noValidate>
      <div className={styles.field}>
        <label htmlFor="support-subject" className={styles.label}>
          Subject *
        </label>
        <input
          type="text"
          id="support-subject"
          name="subject"
          value={subject}
          onChange={(e) => setSubject(e.target.value)}
          required
          maxLength={255}
          placeholder="Brief description of your inquiry"
          disabled={isSubmitting}
          className={styles.input}
        />
      </div>

      {/* Email field - only shown for unauthenticated users */}
      {!userEmail && (
        <div className={styles.field}>
          <label htmlFor="support-email" className={styles.label}>
            Email *
          </label>
          <input
            type="email"
            id="support-email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            maxLength={254}
            placeholder="your@email.com"
            disabled={isSubmitting}
            className={styles.input}
          />
        </div>
      )}

      <div className={styles.field}>
        <label htmlFor="support-description" className={styles.label}>
          Message *
        </label>
        <textarea
          id="support-description"
          name="description"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          rows={5}
          required
          maxLength={10000}
          placeholder="Provide details about your question or issue..."
          disabled={isSubmitting}
          className={styles.textarea}
        />
      </div>

      <div className={styles.field}>
        <label htmlFor="support-attachment" className={styles.label}>
          Screenshot (optional)
        </label>
        <div className={styles.fileInputWrapper}>
          <input
            type="file"
            id="support-attachment"
            name="attachment"
            ref={fileInputRef}
            onChange={handleFileChange}
            accept="image/jpeg,image/png,image/webp,.pdf"
            disabled={isSubmitting}
            className={styles.fileInputHidden}
          />
          <button
            type="button"
            onClick={() => fileInputRef.current?.click()}
            disabled={isSubmitting}
            className={styles.fileButton}
          >
            Choose File
          </button>
          <span className={styles.fileName}>{file ? file.name : 'No file chosen'}</span>
        </div>
        <span className={styles.hint}>Max 5MB. Accepted: JPG, PNG, WebP, PDF</span>
      </div>

      {/* Honeypot field - hidden from humans */}
      <div aria-hidden="true" className={styles.honeypot}>
        <label htmlFor="support-website">Website</label>
        <input
          type="text"
          id="support-website"
          name="website"
          ref={honeypotRef}
          tabIndex={-1}
          autoComplete="off"
        />
      </div>

      {/* Cloudflare Turnstile widget */}
      <div className={styles.turnstile} ref={turnstileRef} />

      <button
        type="submit"
        disabled={isSubmitting || !isTurnstileVerified}
        className={styles.submit}
      >
        {isSubmitting ? 'Sending...' : 'Send Message'}
      </button>

      {feedback && (
        <p
          className={`${styles.feedback} ${feedback.type === 'success' ? styles.success : styles.error}`}
          aria-live="polite"
          role="status"
        >
          {feedback.message}
        </p>
      )}
    </form>
  );
}