import { useState } from 'react'
import { searchTicketApi, deliverClaimApi } from '../services/employee'
import { useHandleAuthError } from '../hooks/useHandleAuthError'

function formatDate(dateStr) {
  return new Date(dateStr).toLocaleDateString('fr-FR', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

const STATUS_CONFIG = {
  PENDING:   { label: 'À remettre',  classes: 'bg-yellow-100 text-yellow-800' },
  DELIVERED: { label: 'Déjà remis',  classes: 'bg-green-100 text-green-800'  },
  CANCELLED: { label: 'Expiré',      classes: 'bg-gray-100 text-gray-500'    },
}

export default function Employe() {
  const handleAuthError = useHandleAuthError()
  const [code, setCode]         = useState('')
  const [result, setResult]     = useState(null)
  const [searching, setSearching] = useState(false)
  const [delivering, setDelivering] = useState(false)
  const [searchError, setSearchError] = useState('')
  const [deliverError, setDeliverError] = useState('')
  const [success, setSuccess]   = useState(false)

  const handleSearch = async (e) => {
    e.preventDefault()
    setResult(null)
    setSuccess(false)
    setDeliverError('')
    setSearchError('')
    setSearching(true)
    try {
      const data = await searchTicketApi(code.trim())
      setResult(data)
    } catch (err) {
      if (!handleAuthError(err)) setSearchError(err.message)
    } finally {
      setSearching(false)
    }
  }

  const handleDeliver = async () => {
    if (!result?.claim?.id) return
    setDeliverError('')
    setDelivering(true)
    try {
      await deliverClaimApi(result.claim.id)
      setResult((prev) => ({
        ...prev,
        claim: { ...prev.claim, status: 'DELIVERED', claimedAt: new Date().toISOString() },
      }))
      setSuccess(true)
    } catch (err) {
      if (!handleAuthError(err)) setDeliverError(err.message)
    } finally {
      setDelivering(false)
    }
  }

  const handleReset = () => {
    setCode('')
    setResult(null)
    setSuccess(false)
    setSearchError('')
    setDeliverError('')
  }

  const statusCfg = result ? (STATUS_CONFIG[result.claim?.status] ?? STATUS_CONFIG.PENDING) : null

  return (
    <div className="min-h-screen bg-gray-50 px-4 py-8 sm:py-12">
      <div className="max-w-lg mx-auto">

        {/* En-tête */}
        <div className="mb-8">
          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Espace Employé</h1>
          <p className="text-gray-500 mt-1 text-sm">Recherchez un code ticket pour remettre le lot au client.</p>
        </div>

        {/* Formulaire de recherche */}
        <form onSubmit={handleSearch} className="flex gap-2 mb-6">
          <label htmlFor="employee-ticket-code" className="sr-only">Code ticket</label>
          <input
            type="text"
            id="employee-ticket-code"
            value={code}
            onChange={(e) => setCode(e.target.value.toUpperCase())}
            required
            placeholder="Code ticket (10 caractères)"
            maxLength={10}
            className="flex-1 min-w-0 border border-gray-300 rounded-lg px-4 py-3 text-sm font-mono uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-[#006B6B] focus:border-[#006B6B]"
          />
          <button
            type="submit"
            disabled={searching || code.trim().length === 0}
            className="bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-5 py-3 rounded-lg transition-colors text-sm whitespace-nowrap"
          >
            {searching ? 'Recherche…' : 'Rechercher'}
          </button>
        </form>

        {/* Erreur de recherche */}
        {searchError && (
          <div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
            {searchError}
          </div>
        )}

        {/* Résultat */}
        {result && (
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">

            {/* Bandeau succès remise */}
            {success && (
              <div className="bg-green-500 px-5 py-3 flex items-center gap-3">
                <svg className="w-5 h-5 text-white flex-shrink-0" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                </svg>
                <p className="text-white text-sm font-semibold">Lot remis avec succès — espace client mis à jour.</p>
              </div>
            )}

            {/* En-tête carte : lot + statut */}
            <div className="px-5 py-4 flex items-start justify-between gap-3 border-b border-gray-100">
              <div>
                <p className="font-bold text-gray-900 text-base">{result.lot.name}</p>
                <p className="text-gray-500 text-xs mt-0.5">{result.lot.description}</p>
                {result.lot.value && (
                  <p className="text-[#006B6B] text-xs font-semibold mt-1">Valeur : {result.lot.value} €</p>
                )}
              </div>
              <span className={`flex-shrink-0 text-xs font-semibold px-3 py-1 rounded-full ${statusCfg.classes}`}>
                {statusCfg.label}
              </span>
            </div>

            {/* Infos client */}
            <div className="px-5 py-4 space-y-2 border-b border-gray-100">
              <p className="text-xs text-gray-500 font-medium uppercase tracking-wider mb-2">Client</p>
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
                  {(result.client.firstname?.[0] ?? '?').toUpperCase()}{(result.client.lastname?.[0] ?? '?').toUpperCase()}
                </div>
                <div>
                  <p className="text-sm font-semibold text-gray-800">
                    {result.client.firstname} {result.client.lastname}
                  </p>
                  <p className="text-xs text-gray-500">{result.client.email}</p>
                </div>
              </div>
            </div>

            {/* Infos ticket */}
            <div className="px-5 py-4 space-y-1 border-b border-gray-100">
              <p className="text-xs text-gray-500 font-medium uppercase tracking-wider mb-2">Ticket</p>
              <p className="text-sm text-gray-700">
                <span className="font-medium">Code :</span>{' '}
                <span className="font-mono">{result.ticket.code}</span>
              </p>
              <p className="text-sm text-gray-700">
                <span className="font-medium">Utilisé le :</span> {formatDate(result.ticket.usedAt)}
              </p>
              {result.claim.claimedAt && (
                <p className="text-sm text-gray-700">
                  <span className="font-medium">Remis le :</span> {formatDate(result.claim.claimedAt)}
                </p>
              )}
            </div>

            {/* Actions */}
            <div className="px-5 py-4 space-y-3">
              {deliverError && (
                <div className="px-4 py-2 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
                  {deliverError}
                </div>
              )}

              {result.claim.status === 'PENDING' && !success && (
                <button
                  onClick={handleDeliver}
                  disabled={delivering}
                  className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold py-3 rounded-xl transition-colors text-sm"
                >
                  {delivering ? 'Confirmation en cours…' : 'Confirmer la remise du lot'}
                </button>
              )}

              {result.claim.status === 'CANCELLED' && (
                <div className="px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 text-gray-500 text-sm text-center">
                  Ce gain est expiré et ne peut plus être remis.
                </div>
              )}

              <button
                onClick={handleReset}
                className="w-full border border-gray-200 text-gray-600 hover:bg-gray-50 font-medium py-2.5 rounded-xl transition-colors text-sm"
              >
                Rechercher un autre code
              </button>
            </div>

          </div>
        )}

      </div>
    </div>
  )
}