"use client";

import { useState, useEffect } from "react";
import { employeeService } from "@/services/employee.service";
import { Ticket } from "@/types";
import toast from "react-hot-toast";
import { StatusBadge, StatCard } from "@/components/ui";
import {
  Search,
  CheckCircle,
  XCircle,
  RefreshCw,
  Users,
  Clock,
  BarChart3,
} from "lucide-react";

export default function EmployeeVerificationPage() {
  const [tickets, setTickets] = useState<Ticket[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchCode, setSearchCode] = useState("");
  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [validating, setValidating] = useState(false);
  const [rejectReason, setRejectReason] = useState("");
  const [showRejectInput, setShowRejectInput] = useState(false);

  useEffect(() => {
    loadPendingTickets();
  }, []);

  const loadPendingTickets = async () => {
    try {
      setLoading(true);
      const data = await employeeService.getPendingTickets();
      // Trier par date décroissante (plus récent en premier)
      const sortedData = data.sort((a: Ticket, b: Ticket) => {
        const dateA = a.playedAt ? new Date(a.playedAt).getTime() : 0;
        const dateB = b.playedAt ? new Date(b.playedAt).getTime() : 0;
        return dateB - dateA;
      });
      setTickets(sortedData);
    } catch (error: any) {
      console.error("Error loading tickets:", error);
      toast.error("Erreur lors du chargement des tickets");
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    if (!searchCode.trim()) {
      toast.error("Veuillez entrer un code de ticket");
      return;
    }

    const ticket = tickets.find(
      (t) => t.code.toLowerCase() === searchCode.toLowerCase()
    );

    if (ticket) {
      setSelectedTicket(ticket);
      setShowModal(true);
      setSearchCode("");
    } else {
      toast.error("Ticket non trouvé ou déjà traité");
    }
  };

  const handleValidate = async () => {
    if (!selectedTicket) return;

    setValidating(true);
    try {
      await employeeService.validateTicket(selectedTicket.id, "APPROVE");
      toast.success("✅ Ticket validé ! Le lot peut être remis au client.");
      setShowModal(false);
      setSelectedTicket(null);
      loadPendingTickets();
    } catch (error: any) {
      toast.error(error.message || "Erreur lors de la validation");
    } finally {
      setValidating(false);
    }
  };

  const handleReject = async () => {
    if (!selectedTicket) return;

    if (!rejectReason.trim()) {
      toast.error("Veuillez indiquer la raison du rejet");
      return;
    }

    setValidating(true);
    try {
      await employeeService.validateTicket(
        selectedTicket.id,
        "REJECT",
        rejectReason
      );
      toast.success("Ticket rejeté");
      setShowModal(false);
      setSelectedTicket(null);
      setShowRejectInput(false);
      setRejectReason("");
      loadPendingTickets();
    } catch (error: any) {
      toast.error(error.message || "Erreur lors du rejet");
    } finally {
      setValidating(false);
    }
  };


  if (loading) {
    return (
      <div className="p-8">
        <div className="animate-pulse space-y-4">
          <div className="h-8 bg-gray-200 rounded w-1/4"></div>
          <div className="h-32 bg-gray-200 rounded"></div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-full bg-gradient-to-br from-gray-50 via-white to-gray-50 p-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-4xl font-bold text-[#2d5a3d] mb-2">
          Validation des Tickets
        </h1>
        <p className="text-gray-600 text-lg">
          Scannez ou recherchez un code pour valider les lots gagnés
        </p>
      </div>

      {/* Search Section */}
      <div className="bg-gradient-to-r from-green-600 to-green-700 rounded-2xl shadow-lg p-8 mb-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
            <Search className="w-5 h-5 text-white" />
          </div>
          <h2 className="text-xl font-bold text-white">
            Rechercher un ticket
          </h2>
        </div>
        <div className="flex gap-4">
          <div className="flex-1">
            <input
              type="text"
              placeholder="Entrez le code du ticket (ex: TTABC123)"
              value={searchCode}
              onChange={(e) => setSearchCode(e.target.value.toUpperCase())}
              onKeyPress={(e) => e.key === "Enter" && handleSearch()}
              className="w-full px-5 py-4 border-2 border-white/20 bg-white/10 text-white placeholder-white/60 rounded-xl focus:ring-2 focus:ring-white focus:border-transparent font-mono text-lg backdrop-blur-sm"
              maxLength={12}
            />
          </div>
          <button
            onClick={handleSearch}
            className="flex items-center gap-2 px-8 py-4 bg-white text-green-700 rounded-xl hover:bg-green-50 transition-all font-bold shadow-lg hover:shadow-xl hover:scale-[1.02]"
          >
            <Search className="w-5 h-5" />
            Rechercher
          </button>
        </div>
      </div>

      {/* Lots en attente de remise */}
      <div className="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden">
        <div className="px-6 py-5 border-b border-gray-100 flex items-center justify-between bg-gradient-to-r from-gray-50 to-white">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
              <Clock className="w-5 h-5 text-yellow-600" />
            </div>
            <div>
              <h2 className="text-xl font-bold text-gray-800">
                Lots en attente de remise
              </h2>
              <p className="text-sm text-gray-500">{tickets.length} ticket(s) en attente</p>
            </div>
          </div>
          <button
            onClick={loadPendingTickets}
            className="flex items-center gap-2 px-4 py-2 text-green-700 bg-green-50 hover:bg-green-100 rounded-lg transition-colors font-medium"
          >
            <RefreshCw className="w-4 h-4" />
            Actualiser
          </button>
        </div>

        <div className="overflow-x-auto">
          {tickets.length === 0 ? (
            <div className="text-center py-16">
              <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="w-10 h-10 text-green-600" />
              </div>
              <p className="text-gray-800 mb-2 font-semibold text-lg">
                Aucun lot en attente
              </p>
              <p className="text-sm text-gray-500">
                Tous les lots ont été remis !
              </p>
            </div>
          ) : (
            <table className="min-w-full">
              <thead className="bg-gray-50 border-b border-gray-100">
                <tr>
                  <th className="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
                    Client
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
                    Lot Gagné
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
                    Date
                  </th>
                  <th className="px-6 py-4 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">
                    Action
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-50">
                {tickets.map((ticket, index) => (
                  <tr key={ticket.id} className={`hover:bg-green-50/50 transition-colors ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50/30'}`}>
                    <td className="px-6 py-5">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
                          {ticket.user ? `${ticket.user.firstName?.charAt(0) || ''}${ticket.user.lastName?.charAt(0) || ''}` : 'N/A'}
                        </div>
                        <div>
                          <div className="text-sm font-semibold text-gray-900">
                            {ticket.user ? `${ticket.user.firstName} ${ticket.user.lastName}` : 'N/A'}
                          </div>
                          <div className="text-sm text-gray-500">
                            {ticket.user?.email || 'N/A'}
                          </div>
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-5">
                      <div>
                        <div className="text-sm font-semibold text-gray-900">
                          {ticket.prize?.name || 'N/A'}
                        </div>
                        <div className="text-xs text-gray-500 font-mono bg-gray-100 inline-block px-2 py-1 rounded mt-1">
                          {ticket.code}
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-5 whitespace-nowrap">
                      <div className="text-sm font-medium text-gray-700">
                        {ticket.playedAt
                          ? new Date(ticket.playedAt).toLocaleDateString('fr-FR')
                          : 'N/A'}
                      </div>
                    </td>
                    <td className="px-6 py-5 whitespace-nowrap text-right">
                      <button
                        onClick={() => {
                          setSelectedTicket(ticket);
                          setShowModal(true);
                        }}
                        className="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-green-600 to-green-700 text-white text-sm font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all shadow-sm hover:shadow-md"
                      >
                        Traiter
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                        </svg>
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {/* Modal de validation */}
      {showModal && selectedTicket && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg max-w-2xl w-full p-6">
            <h2 className="text-2xl font-bold text-gray-900 mb-6">
              Détails du Ticket
            </h2>

            <div className="space-y-6">
              {/* Ticket Code */}
              <div className="bg-gray-50 rounded-lg p-6">
                <p className="text-sm font-medium text-gray-600 mb-2">
                  Code du ticket
                </p>
                <p className="text-xl font-mono font-bold text-gray-900">
                  {selectedTicket.code}
                </p>
              </div>

              {/* Client Info */}
              <div className="bg-blue-50 rounded-lg p-6 border-l-4 border-blue-500">
                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                  <Users className="w-5 h-5 text-blue-600" />
                  Informations du Client
                </h3>
                <div className="space-y-2">
                  <div>
                    <p className="text-sm font-medium text-gray-600">Nom complet</p>
                    <p className="text-base font-semibold text-gray-900">
                      {selectedTicket.user ? `${selectedTicket.user.firstName} ${selectedTicket.user.lastName}` : 'N/A'}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-gray-600">Email</p>
                    <p className="text-sm text-gray-900">
                      {selectedTicket.user?.email || 'N/A'}
                    </p>
                  </div>
                  {selectedTicket.user?.phone && (
                    <div>
                      <p className="text-sm font-medium text-gray-600">Téléphone</p>
                      <p className="text-sm text-gray-900">
                        {selectedTicket.user.phone}
                      </p>
                    </div>
                  )}
                </div>
              </div>

              {/* Prize Info */}
              <div className="bg-green-50 rounded-lg p-6 border-l-4 border-green-500">
                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-green-600" />
                  Lot Gagné
                </h3>
                <div className="space-y-2">
                  <div>
                    <p className="text-xl font-bold text-green-600">
                      {selectedTicket.prize?.name || 'N/A'}
                    </p>
                    <p className="text-sm text-gray-600 mt-1">
                      {selectedTicket.prize?.description || 'Description non disponible'}
                    </p>
                  </div>
                  {selectedTicket.playedAt && (
                    <div>
                      <p className="text-sm font-medium text-gray-600">Date de gain</p>
                      <p className="text-sm text-gray-900">
                        {new Date(selectedTicket.playedAt).toLocaleDateString('fr-FR', {
                          day: 'numeric',
                          month: 'long',
                          year: 'numeric',
                          hour: '2-digit',
                          minute: '2-digit'
                        })}
                      </p>
                    </div>
                  )}
                </div>
              </div>

              {/* Reject Reason Input */}
              {showRejectInput && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Raison du rejet *
                  </label>
                  <textarea
                    value={rejectReason}
                    onChange={(e) => setRejectReason(e.target.value)}
                    placeholder="Ex: Ticket endommagé, code illisible..."
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
                    rows={3}
                  />
                </div>
              )}

              {/* Actions */}
              <div className="flex gap-3 justify-end pt-4">
                {!showRejectInput ? (
                  <>
                    <button
                      onClick={() => {
                        setShowModal(false);
                        setSelectedTicket(null);
                      }}
                      disabled={validating}
                      className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium"
                    >
                      Annuler
                    </button>
                    <button
                      onClick={() => setShowRejectInput(true)}
                      disabled={validating}
                      className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium flex items-center gap-2"
                    >
                      <XCircle className="w-4 h-4" />
                      Rejeter
                    </button>
                    <button
                      onClick={handleValidate}
                      disabled={validating}
                      className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium flex items-center gap-2"
                    >
                      <CheckCircle className="w-4 h-4" />
                      {validating ? "Validation..." : "Valider et Remettre"}
                    </button>
                  </>
                ) : (
                  <>
                    <button
                      onClick={() => {
                        setShowRejectInput(false);
                        setRejectReason("");
                      }}
                      disabled={validating}
                      className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium"
                    >
                      Retour
                    </button>
                    <button
                      onClick={handleReject}
                      disabled={validating || !rejectReason.trim()}
                      className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      <XCircle className="w-4 h-4" />
                      {validating ? "Rejet..." : "Confirmer le Rejet"}
                    </button>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

