import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { participateApi } from '../services/game'
import UserNav from '../components/UserNav'
import { useHandleAuthError } from '../hooks/useHandleAuthError'

function formatDateTime(date) {
  return date.toLocaleDateString('fr-FR', {
    day: '2-digit', month: 'long', year: 'numeric',
    hour: '2-digit', minute: '2-digit',
  })
}

export default function SaisirCodeUnique() {
  const navigate = useNavigate()
  const handleAuthError = useHandleAuthError()
  const [code, setCode]           = useState('')
  const [loading, setLoading]     = useState(false)
  const [gain, setGain]           = useState(null)
  const [claim, setClaim]         = useState(null)
  const [wonAt, setWonAt]         = useState(null)
  const [showDetail, setShowDetail] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    try {
      const data = await participateApi(code.trim().toUpperCase())
      setGain(data.gain)
      setClaim(data.claim)
      setWonAt(new Date())
    } catch (err) {
      if (!handleAuthError(err)) {
        navigate('/perdu', { state: { message: err.message } })
      }
    } finally {
      setLoading(false)
    }
  }

  const handleClose = () => {
    setGain(null)
    setClaim(null)
    setWonAt(null)
    setShowDetail(false)
    setCode('')
  }

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col px-8 py-12 max-w-lg mx-auto">
      <UserNav active="code" />

      <div className="mb-8">
        <h1 className="text-2xl font-bold italic font-serif text-[#006B6B]">Saisir mon code gagnant</h1>
        <p className="text-gray-500 mt-2 text-sm">Saisissez le code présent sur votre ticket</p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-4">
        <label htmlFor="ticket-code" className="sr-only">Code de votre ticket</label>
        <input
          type="text"
          id="ticket-code"
          value={code}
          onChange={(e) => setCode(e.target.value.toUpperCase())}
          placeholder="Votre code"
          maxLength={10}
          required
          className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 bg-white focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
        />
        <button
          type="submit"
          disabled={loading || code.length !== 10}
          className="w-full bg-[#00786F] hover:bg-[#1A6B65] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors"
        >
          {loading ? 'Validation...' : 'Valider'}
        </button>
      </form>

      {/* ── Overlay Félicitation ── */}
      {gain && !showDetail && (
        <div className="fixed inset-0 bg-black/60 flex flex-col items-center justify-between z-50 px-6 py-12">
          <div className="w-full max-w-sm">
            <h2 className="text-4xl font-bold italic font-serif text-white mb-1">Félicitation !</h2>
            <p className="text-white/80 text-sm">Vous avez obtenu une récompense</p>
          </div>

          <div className="flex-1 flex items-center justify-center">
            <div className="bg-white/10 rounded-lg px-6 py-3 text-white font-mono tracking-widest text-lg">
              {code}
            </div>
          </div>

          <div className="mb-8">
            <svg className="w-24 h-24 text-yellow-200" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
            </svg>
          </div>

          <div className="w-full max-w-sm">
            <p className="text-white text-center font-semibold mb-1">{gain.name}</p>
            <p className="text-white/70 text-center text-sm mb-6">{gain.description}</p>
            <button
              onClick={() => setShowDetail(true)}
              className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"
            >
              Découvrir mon lot
            </button>
          </div>
        </div>
      )}

      {/* ── Modal détail du lot ── */}
      {gain && showDetail && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 px-4">
          <div className="bg-white rounded-2xl w-full max-w-sm shadow-xl overflow-hidden">

            {/* En-tête coloré */}
            <div className="bg-[#006B6B] px-6 py-5 relative">
              <button
                onClick={handleClose}
                className="absolute top-4 right-4 text-white/70 hover:text-white transition-colors"
                aria-label="Fermer"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                  <svg className="w-5 h-5 text-yellow-200" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
                  </svg>
                </div>
                <div>
                  <p className="text-white/70 text-xs">Votre lot</p>
                  <p className="text-white font-bold text-base leading-tight">{gain.name}</p>
                </div>
              </div>
            </div>

            {/* Corps */}
            <div className="px-6 py-5 space-y-4">

              {/* Description */}
              <p className="text-gray-600 text-sm leading-relaxed">{gain.description}</p>

              {/* Valeur */}
              {gain.value && (
                <div className="flex items-center justify-between py-2 border-b border-gray-100">
                  <span className="text-xs text-gray-400 uppercase tracking-wider">Valeur estimée</span>
                  <span className="text-sm font-semibold text-[#006B6B]">{gain.value} €</span>
                </div>
              )}

              {/* Code utilisé */}
              <div className="flex items-center justify-between py-2 border-b border-gray-100">
                <span className="text-xs text-gray-400 uppercase tracking-wider">Code utilisé</span>
                <span className="font-mono text-sm tracking-widest text-gray-700">{code}</span>
              </div>

              {/* Date & heure */}
              {wonAt && (
                <div className="flex items-center justify-between py-2 border-b border-gray-100">
                  <span className="text-xs text-gray-400 uppercase tracking-wider">Obtenu le</span>
                  <span className="text-sm text-gray-700">{formatDateTime(wonAt)}</span>
                </div>
              )}

              {/* Statut */}
              <div className="flex items-center justify-between py-2">
                <span className="text-xs text-gray-400 uppercase tracking-wider">Statut</span>
                <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-yellow-100 text-yellow-700">
                  En attente de remise
                </span>
              </div>

              {/* Info remise */}
              <div className="bg-[#006B6B]/5 rounded-xl px-4 py-3 flex gap-3 items-start">
                <svg className="w-4 h-4 text-[#006B6B] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <p className="text-xs text-[#006B6B] leading-relaxed">
                  Présentez ce code en boutique Thé Tip Top pour récupérer votre lot.
                </p>
              </div>
            </div>

            {/* Actions */}
            <div className="px-6 pb-6 space-y-2">
              <button
                onClick={() => navigate('/mes-gains')}
                className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-xl transition-colors text-sm"
              >
                Voir tout mon historique
              </button>
              <button
                onClick={handleClose}
                className="w-full border border-gray-200 text-gray-500 hover:bg-gray-50 font-medium py-2.5 rounded-xl transition-colors text-sm"
              >
                Retour
              </button>
            </div>

          </div>
        </div>
      )}
    </div>
  )
}