import { useState, useEffect } from 'react'
import { useNavigate, useParams, Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'

export default function EditGuestForm() {
  const { id } = useParams()
  const { authFetch, user } = useAuth()
  const navigate = useNavigate()
  const [form, setForm] = useState({
    prenom: '', nom: '', societe: '', activite: '',
    telephone: '', email: '', site_web: '', commentaires: '',
    date_club: '',
  })
  const [error, setError] = useState('')
  const [busy, setBusy] = useState(false)
  const [showBlockedModal, setShowBlockedModal] = useState(false)

  useEffect(() => {
    authFetch(`/api/guests/${id}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (data) setForm({
          prenom: data.prenom || '',
          nom: data.nom || '',
          societe: data.societe || '',
          activite: data.activite || '',
          telephone: data.telephone || '',
          email: data.email || '',
          site_web: data.site_web || '',
          commentaires: data.commentaires || '',
          date_club: data.date_club ? data.date_club.split('T')[0] : '',
        })
      })
  }, [id])

  const handleChange = (e) => {
    const { name, value } = e.target
    setForm((f) => ({ ...f, [name]: value }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError('')
    const BLOCKED_DATES = ['2026-10-20', '2026-12-15']
    if (BLOCKED_DATES.includes(form.date_club)) {
      setShowBlockedModal(true)
      return
    }
    setBusy(true)
    try {
      const r = await authFetch(`/api/guests/${id}`, {
        method: 'PUT',
        body: JSON.stringify(form),
      })
      if (!r.ok) {
        const err = await r.json()
        throw new Error(err.error || 'Erreur')
      }
      navigate('/guests')
    } catch (err) {
      setError(err.message)
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="space-y-4">
      <Link to="/guests" className="text-blue-700 text-sm">&larr; Retour</Link>
      <h2 className="text-xl font-bold text-gray-800">Modifier l'invite(e)</h2>
      {error && <div className="bg-red-100 text-red-700 rounded-lg p-3 text-sm">{error}</div>}
      <form onSubmit={handleSubmit} className="bg-white rounded-xl p-5 shadow-sm space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Invite par</label>
          <input type="text" value={`${user?.prenom} ${user?.nom}`} disabled className="w-full px-4 py-3 rounded-lg bg-gray-100 border border-gray-200 text-gray-500 text-base" />
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Prenom *</label>
            <input name="prenom" required value={form.prenom} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Nom *</label>
            <input name="nom" required value={form.nom} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Societe *</label>
          <input name="societe" required value={form.societe} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Activite *</label>
          <input name="activite" required value={form.activite} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Telephone *</label>
            <input name="telephone" type="tel" required value={form.telephone} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
            <input name="email" type="email" required value={form.email} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Date de venue *</label>
          <input name="date_club" type="date" required value={form.date_club} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Site internet</label>
          <input name="site_web" type="url" value={form.site_web} onChange={handleChange} placeholder="https://..." className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Commentaires</label>
          <textarea name="commentaires" rows={3} value={form.commentaires} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
        </div>
        <button type="submit" disabled={busy} className="w-full bg-blue-900 text-white py-3 rounded-xl font-semibold text-base hover:bg-blue-800 active:bg-blue-950 transition disabled:opacity-50">
          {busy ? 'Enregistrement...' : 'Enregistrer les modifications'}
        </button>
      </form>

      {showBlockedModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setShowBlockedModal(false)}>
          <div className="bg-white rounded-2xl p-6 shadow-xl max-w-sm w-full mx-4 text-center" onClick={(e) => e.stopPropagation()}>
            <div className="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <span className="text-2xl">⛔</span>
            </div>
            <h3 className="text-lg font-bold text-gray-800 mb-2">Date non disponible</h3>
            <p className="text-sm text-gray-500 mb-6">Cette date n'accepte pas de nouveaux invités.</p>
            <button onClick={() => setShowBlockedModal(false)} className="w-full bg-blue-900 text-white py-3 rounded-xl font-semibold text-sm hover:bg-blue-800 active:bg-blue-950 transition">
              OK
            </button>
          </div>
        </div>
      )}
    </div>
  )
}