'use client'

import { useEffect, useState } from 'react'
import { Star } from 'lucide-react'
import { toast } from 'react-hot-toast'
import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'

interface ReviewFormProps {
  productId: string
}

type AuthState = 'loading' | 'guest' | 'customer'

export default function ReviewForm({ productId }: ReviewFormProps) {
  const t = useTranslations('ProductDetail')
  const [auth, setAuth] = useState<AuthState>('loading')
  const [rating, setRating] = useState(0)
  const [hover, setHover] = useState(0)
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    let cancelled = false
    fetch('/api/frontend/auth/me', { credentials: 'include' })
      .then((res) => {
        if (!cancelled) setAuth(res.ok ? 'customer' : 'guest')
      })
      .catch(() => {
        if (!cancelled) setAuth('guest')
      })
    return () => {
      cancelled = true
    }
  }, [])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    if (rating < 1) {
      setError(t('ratingRequired'))
      return
    }
    if (!content.trim()) {
      setError(t('reviewContentRequired'))
      return
    }

    setSubmitting(true)
    try {
      const res = await fetch('/api/frontend/reviews', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({
          product_id: productId,
          rating,
          title: title.trim() || null,
          content: content.trim(),
        }),
      })
      const data = await res.json()
      if (res.ok && data.success) {
        setSubmitted(true)
        toast.success(t('reviewSubmitted'))
      } else if (res.status === 401) {
        setAuth('guest')
      } else if (res.status === 409) {
        setError(t('reviewAlreadySubmitted'))
      } else {
        setError(t('reviewSubmitFailed'))
      }
    } catch {
      setError(t('networkError'))
    } finally {
      setSubmitting(false)
    }
  }

  if (auth === 'loading') return null

  return (
    <div className="mt-10 pt-8 border-t border-gray-200">
      <h3 className="text-lg font-semibold text-dark mb-4">{t('writeReview')}</h3>

      {auth === 'guest' ? (
        <p className="text-sm text-gray-custom">
          <Link href="/login" className="text-primary font-medium hover:underline">
            {t('loginToReview')}
          </Link>
        </p>
      ) : submitted ? (
        <p className="text-sm text-green-700 bg-green-50 border border-green-200 rounded-lg px-4 py-3">
          {t('reviewSubmitted')}
        </p>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-4 max-w-xl">
          {error && (
            <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-4 py-2">{error}</p>
          )}

          <div>
            <label className="block text-sm font-medium text-dark mb-2">{t('yourRating')}</label>
            <div className="flex gap-1" onMouseLeave={() => setHover(0)}>
              {[1, 2, 3, 4, 5].map((n) => (
                <button
                  key={n}
                  type="button"
                  aria-label={`${n}`}
                  onMouseEnter={() => setHover(n)}
                  onClick={() => setRating(n)}
                  className="p-0.5"
                >
                  <Star
                    size={26}
                    className={n <= (hover || rating) ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}
                  />
                </button>
              ))}
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-dark mb-2">{t('reviewTitleLabel')}</label>
            <input
              type="text"
              value={title}
              maxLength={255}
              onChange={(e) => setTitle(e.target.value)}
              className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-dark mb-2">{t('reviewContentLabel')}</label>
            <textarea
              value={content}
              maxLength={5000}
              rows={4}
              onChange={(e) => setContent(e.target.value)}
              className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
            />
          </div>

          <button
            type="submit"
            disabled={submitting}
            className="px-6 py-2.5 bg-gradient-primary text-white rounded-lg font-semibold hover:shadow-md transition-all disabled:opacity-60 disabled:cursor-not-allowed"
          >
            {submitting ? t('submittingReview') : t('submitReview')}
          </button>
        </form>
      )}
    </div>
  )
}