'use client'

import { useState, useEffect, type FormEvent } from 'react'
import { useSearchParams } from 'next/navigation'
import { RefreshCw, CheckCircle, AlertCircle, Send, Loader2, Package } from 'lucide-react'
import { submitKontakt } from '@/actions/kontakt'

interface CaptchaData {
  svg: string
  token: string
}

export default function KontaktForm() {
  const searchParams = useSearchParams()
  const productName = searchParams.get('produkt') ?? ''

  const [captcha, setCaptcha] = useState<CaptchaData | null>(null)
  const [captchaLoading, setCaptchaLoading] = useState(true)
  const [captchaAnswer, setCaptchaAnswer] = useState('')
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle')
  const [errorMsg, setErrorMsg] = useState('')

  async function loadCaptcha() {
    setCaptchaLoading(true)
    setCaptchaAnswer('')
    try {
      const res = await fetch('/api/captcha', { cache: 'no-store' })
      const data: CaptchaData = await res.json()
      setCaptcha(data)
    } finally {
      setCaptchaLoading(false)
    }
  }

  useEffect(() => { loadCaptcha() }, [])

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    if (!captcha || status === 'submitting') return

    setStatus('submitting')
    setErrorMsg('')

    const fd = new FormData(e.currentTarget)
    fd.set('captchaAnswer', captchaAnswer)
    fd.set('captchaToken', captcha.token)
    if (productName) fd.set('productName', productName)

    const result = await submitKontakt(fd)

    if (result.success) {
      setStatus('success')
    } else {
      setStatus('error')
      setErrorMsg(result.error ?? 'Wystąpił nieznany błąd.')
      loadCaptcha()
    }
  }

  if (status === 'success') {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-center">
        <div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-6">
          <CheckCircle className="w-8 h-8 text-green-600 dark:text-green-400" />
        </div>
        <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">Wiadomość wysłana!</h3>
        <p className="text-gray-500 dark:text-gray-400 max-w-md leading-relaxed">
          Dziękujemy za kontakt. Odpowiemy na podany adres email w ciągu 1 dnia roboczego.
        </p>
        <button
          onClick={() => { setStatus('idle'); loadCaptcha() }}
          className="mt-6 px-5 py-2.5 text-sm font-medium text-brand-600 dark:text-brand-400 border border-brand-200 dark:border-brand-800 rounded-xl hover:bg-brand-50 dark:hover:bg-brand-950/30 transition-colors"
        >
          Wyślij kolejną wiadomość
        </button>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      {/* Wybrany produkt */}
      {productName && (
        <div className="flex items-center gap-3 p-4 bg-brand-50 dark:bg-brand-950/40 border border-brand-200 dark:border-brand-800 rounded-xl">
          <div className="w-8 h-8 bg-brand-600 dark:bg-brand-700 rounded-lg flex items-center justify-center shrink-0">
            <Package className="w-4 h-4 text-white" />
          </div>
          <div>
            <p className="text-xs font-semibold text-brand-700 dark:text-brand-300 uppercase tracking-wide mb-0.5">Wybrany produkt</p>
            <p className="text-sm text-brand-900 dark:text-brand-200 font-medium">{productName}</p>
          </div>
        </div>
      )}

      {/* Error banner */}
      {status === 'error' && (
        <div className="flex items-start gap-3 p-4 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 rounded-xl text-sm text-red-700 dark:text-red-400">
          <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
          {errorMsg}
        </div>
      )}

      {/* Name + Email row */}
      <div className="grid sm:grid-cols-2 gap-5">
        <div>
          <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
            Imię i nazwisko <span className="text-red-500">*</span>
          </label>
          <input
            id="name"
            name="name"
            type="text"
            placeholder="Jan Kowalski"
            required
            className="w-full px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-colors"
          />
        </div>
        <div>
          <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
            Twój email <span className="text-red-500">*</span>
          </label>
          <input
            id="email"
            name="email"
            type="email"
            placeholder="jan@example.pl"
            required
            className="w-full px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-colors"
          />
        </div>
      </div>

      {/* Subject */}
      <div>
        <label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
          Temat
        </label>
        <select
          id="subject"
          name="subject"
          defaultValue={productName ? 'Zamówienie' : 'Zapytanie o produkt'}
          className="w-full px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-colors"
        >
          <option>Zapytanie o produkt</option>
          <option>Zamówienie</option>
          <option>Pomoc techniczna</option>
          <option>Reklamacja</option>
          <option>Inne</option>
        </select>
      </div>

      {/* Message */}
      <div>
        <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
          Wiadomość <span className="text-red-500">*</span>
        </label>
        <textarea
          id="message"
          name="message"
          rows={6}
          placeholder="Opisz swoje pytanie lub zamówienie. Podaj liczbę stopni schodowych, typ schodów, preferencje co do efektów świetlnych..."
          required
          className="w-full px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent resize-none transition-colors"
        />
      </div>

      {/* CAPTCHA */}
      <div className="p-4 bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-xl">
        <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
          Weryfikacja antybotowa – rozwiąż zadanie:
        </p>
        <div className="flex flex-wrap items-center gap-4">
          <div className="relative shrink-0">
            {captchaLoading ? (
              <div className="w-[220px] h-[70px] bg-gray-100 dark:bg-gray-600 rounded-lg flex items-center justify-center">
                <Loader2 className="w-5 h-5 text-gray-400 animate-spin" />
              </div>
            ) : captcha ? (
              <img
                src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(captcha.svg)}`}
                alt="Zadanie matematyczne do weryfikacji"
                className="rounded-lg border border-gray-200 dark:border-gray-600 select-none pointer-events-none"
                draggable={false}
              />
            ) : null}
          </div>
          <div className="flex items-center gap-3 flex-1">
            <input
              type="text"
              inputMode="numeric"
              pattern="[0-9]*"
              placeholder="Wynik"
              value={captchaAnswer}
              onChange={e => setCaptchaAnswer(e.target.value.replace(/\D/g, ''))}
              required
              maxLength={3}
              className="w-24 px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent text-center font-mono text-lg font-bold transition-colors"
            />
            <button
              type="button"
              onClick={loadCaptcha}
              title="Odśwież zadanie"
              className="p-2.5 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
            >
              <RefreshCw className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* Submit */}
      <div className="flex items-center justify-between pt-1">
        <p className="text-xs text-gray-500 dark:text-gray-400">
          <span className="text-red-500">*</span> Pola wymagane. Odpiszemy na podany email.
        </p>
        <button
          type="submit"
          disabled={status === 'submitting' || !captchaAnswer || captchaLoading}
          className="inline-flex items-center gap-2 px-6 py-3 bg-brand-600 text-white font-semibold rounded-xl hover:bg-brand-700 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
        >
          {status === 'submitting' ? (
            <><Loader2 className="w-4 h-4 animate-spin" /> Wysyłanie...</>
          ) : (
            <><Send className="w-4 h-4" /> Wyślij wiadomość</>
          )}
        </button>
      </div>
    </form>
  )
}