'use client'

import { useState } from 'react'
import * as motion from 'framer-motion/m'
import { useTranslations } from 'next-intl'
import { Send, CheckCircle, AlertCircle, User, Mail, MessageSquare } from 'lucide-react'

interface FormData {
  name: string
  email: string
  subject: string
  message: string
}

interface ContactFormProps {
  prefill?: { subject: string; orderNumber: string; requestType: string }
}

export default function ContactForm({ prefill }: ContactFormProps) {
  const t = useTranslations('Contact')
  const [formData, setFormData] = useState<FormData>(() => ({
    name: '',
    email: '',
    subject: prefill?.subject || (prefill?.orderNumber ? 'order' : ''),
    message: prefill?.orderNumber
      ? t(prefill.requestType === 'cancel' ? 'prefillCancel' : prefill.requestType === 'return' ? 'prefillReturn' : 'prefillHelp', { order: prefill.orderNumber })
      : '',
  }))
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle')
  const [errorMessage, setErrorMessage] = useState('')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }))
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setSubmitStatus('idle')
    setErrorMessage('')

    try {
      const res = await fetch('/api/frontend/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      })
      const data = await res.json()

      if (res.ok && data.success) {
        setSubmitStatus('success')
        setFormData({ name: '', email: '', subject: '', message: '' })
        // Reset success message after 5 seconds
        setTimeout(() => setSubmitStatus('idle'), 5000)
      } else {
        setErrorMessage(res.status === 429 ? t('tooMany') : '')
        setSubmitStatus('error')
      }
    } catch {
      setSubmitStatus('error')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <motion.div
      initial={{ opacity: 0, x: 20 }}
      whileInView={{ opacity: 1, x: 0 }}
      viewport={{ once: true }}
      className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8"
    >
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-dark mb-2">{t('title')}</h2>
        <p className="text-gray-custom text-sm">{t('subtitle')}</p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-5">
        {/* Name Field */}
        <div>
          <label className="block text-dark font-medium mb-2 text-sm">
            {t('fullName')}
          </label>
          <div className="relative">
            <User size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-custom" />
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
              required
              maxLength={100}
              className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none transition"
              placeholder={t('namePlaceholder')}
            />
          </div>
        </div>

        {/* Email Field */}
        <div>
          <label className="block text-dark font-medium mb-2 text-sm">
            {t('emailLabel')}
          </label>
          <div className="relative">
            <Mail size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-custom" />
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              required
              maxLength={150}
              className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none transition"
              placeholder="john@example.com"
            />
          </div>
        </div>

        {/* Subject Field */}
        <div>
          <label className="block text-dark font-medium mb-2 text-sm">
            {t('subjectLabel')}
          </label>
          <div className="relative">
            <MessageSquare size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-custom" />
            <select
              name="subject"
              value={formData.subject}
              onChange={handleChange}
              required
              className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none transition appearance-none bg-white"
            >
              <option value="">{t('subjectPlaceholder')}</option>
              <option value="order">{t('subjectOrder')}</option>
              <option value="delivery">{t('subjectDelivery')}</option>
              <option value="product">{t('subjectProduct')}</option>
              <option value="feedback">{t('subjectFeedback')}</option>
              <option value="other">{t('subjectOther')}</option>
            </select>
          </div>
        </div>

        {/* Message Field */}
        <div>
          <label className="block text-dark font-medium mb-2 text-sm">
            {t('messageLabel')}
          </label>
          <textarea
            name="message"
            value={formData.message}
            onChange={handleChange}
            required
            maxLength={5000}
            rows={5}
            className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none transition resize-none"
            placeholder={t('messagePlaceholder')}
          />
        </div>

        {/* Submit Status */}
        {submitStatus === 'success' && (
          <div className="flex items-center gap-2 p-3 bg-green-50 text-green-700 rounded-lg">
            <CheckCircle size={18} />
            <span className="text-sm">{t('success')}</span>
          </div>
        )}

        {submitStatus === 'error' && (
          <div className="flex items-center gap-2 p-3 bg-red-50 text-red-700 rounded-lg">
            <AlertCircle size={18} />
            <span className="text-sm">{errorMessage || t('error')}</span>
          </div>
        )}

        {/* Submit Button */}
        <button
          type="submit"
          disabled={isSubmitting}
          className="w-full bg-gradient-primary text-white py-3 rounded-lg font-semibold flex items-center justify-center gap-2 hover:shadow-md transition-all disabled:opacity-70 disabled:cursor-not-allowed"
        >
          {isSubmitting ? (
            <>
              <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
              {t('sending')}
            </>
          ) : (
            <>
              <Send size={18} />
              {t('send')}
            </>
          )}
        </button>
      </form>
    </motion.div>
  )
}