'use client';

import { useState, useEffect, useCallback } from 'react';
import { Card } from '@/components/ui/Card';
import Button from '@/components/Button';
import toast from 'react-hot-toast';
import { API_BASE_URL } from '@/utils/constants';
import {
  Trophy,
  Users,
  CheckCircle,
  AlertCircle,
  Download,
  Mail,
  Gift,
  User,
  RefreshCw,
  Trash2,
} from 'lucide-react';

interface Participant {
  id: string;
  email: string;
  first_name: string;
  last_name: string;
  is_verified: boolean;
  tickets_played: number;
  prizes_won: number;
}

interface DrawResult {
  draw: {
    id: string;
    drawDate: string;
    status: string;
  };
  winner: {
    id: string;
    email: string;
    name: string;
    ticketsPlayed: number;
  };
  statistics: {
    totalParticipants: number;
    eligibleParticipants: number;
    criteria: any;
  };
  prize: {
    name: string;
    value: string;
  };
}

interface ExistingDraw {
  id: string;
  draw_date: string;
  winner_email: string;
  winner_name: string;
  prize_name: string;
  prize_value: string;
  total_participants: number;
  eligible_participants: number;
  status: string;
  notified_at: string | null;
  claimed_at: string | null;
}

export default function TiragesPage() {
  const [participants, setParticipants] = useState<Participant[]>([]);
  const [loading, setLoading] = useState(false);
  const [drawResult, setDrawResult] = useState<DrawResult | null>(null);
  const [existingDraw, setExistingDraw] = useState<ExistingDraw | null>(null);
  const [hasExistingDraw, setHasExistingDraw] = useState(false);

  // Critères
  const [minTickets, setMinTickets] = useState(1);
  const [verifiedOnly, setVerifiedOnly] = useState(true);
  const [prizeName, setPrizeName] = useState('An de thé');
  const [prizeValue, setPrizeValue] = useState('360');
  const [allowRedraw, setAllowRedraw] = useState(false);

  const checkExistingDraw = useCallback(async () => {
    try {
      const token = localStorage.getItem('auth_token') || localStorage.getItem('token');
      const response = await fetch(`${API_BASE_URL}/draw/check-existing`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      if (response.ok) {
        const data = await response.json();
        setHasExistingDraw(data.data.hasExistingDraw);
        setExistingDraw(data.data.lastDraw);
      }
    } catch (error) {
      console.error('Erreur:', error);
    }
  }, []);

  const loadParticipants = useCallback(async () => {
    setLoading(true);
    try {
      const token = localStorage.getItem('auth_token') || localStorage.getItem('token');
      const response = await fetch(
        `${API_BASE_URL}/draw/eligible-participants?minTickets=${minTickets}&verified=${verifiedOnly}`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      if (!response.ok) throw new Error('Erreur lors du chargement');

      const data = await response.json();
      setParticipants(data.data.participants);
      toast.success(`${data.data.total} participants éligibles trouvés`);
    } catch (error: any) {
      toast.error(error.message || 'Erreur lors du chargement');
      setParticipants([]);
    } finally {
      setLoading(false);
    }
  }, [minTickets, verifiedOnly]);

  useEffect(() => {
    checkExistingDraw();
    // Charger automatiquement les participants au chargement de la page
    loadParticipants();
  }, [checkExistingDraw, loadParticipants]);

  const conductDraw = async () => {
    if (participants.length === 0) {
      toast.error('Veuillez d\'abord charger les participants éligibles');
      return;
    }

    const confirmMessage = hasExistingDraw
      ? `⚠️ ATTENTION: Un tirage a déjà été effectué!\n\nÊtes-vous ABSOLUMENT SÛR de vouloir effectuer un nouveau tirage parmi ${participants.length} participants éligibles?\n\nCeci remplacera le tirage précédent!`
      : `Êtes-vous sûr de vouloir lancer le tirage au sort parmi ${participants.length} participants éligibles?\n\nCette action est irréversible!`;

    if (!confirm(confirmMessage)) return;

    setLoading(true);
    try {
      const token = localStorage.getItem('auth_token') || localStorage.getItem('token');
      const response = await fetch(`${API_BASE_URL}/draw/conduct`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          criteria: {
            minTickets,
            verified: verifiedOnly,
          },
          prizeName,
          prizeValue,
          allowRedraw: hasExistingDraw,
        }),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'Erreur lors du tirage');
      }

      const data = await response.json();
      setDrawResult(data.data);
      setHasExistingDraw(true);
      toast.success('🎉 Tirage au sort effectué avec succès!');
      await checkExistingDraw();
    } catch (error: any) {
      toast.error(error.message || 'Erreur lors du tirage');
    } finally {
      setLoading(false);
    }
  };

  const downloadReport = async () => {
    if (!existingDraw) return;

    try {
      const token = localStorage.getItem('auth_token') || localStorage.getItem('token');
      const response = await fetch(
        `${API_BASE_URL}/draw/${existingDraw.id}/report`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      if (!response.ok) throw new Error('Erreur lors de la génération du rapport');

      const data = await response.json();
      const report = data.data;

      // Créer un rapport texte
      const reportText = `
=================================================
    RAPPORT DE TIRAGE AU SORT - THÉ TIP TOP
=================================================

📅 Date du tirage: ${new Date(report.draw.date).toLocaleString('fr-FR')}
👤 Effectué par: ${report.draw.conductedBy.name} (${report.draw.conductedBy.email})
📊 Statut: ${report.draw.status}

-------------------------------------------------
                  GAGNANT
-------------------------------------------------
🏆 Nom: ${report.winner.firstName} ${report.winner.lastName}
📧 Email: ${report.winner.email}
📱 Téléphone: ${report.winner.phone || 'Non renseigné'}
📍 Ville: ${report.winner.city || 'Non renseignée'}
🎫 Nombre de tickets joués: ${report.winner.totalTickets}

-------------------------------------------------
                   PRIX
-------------------------------------------------
🎁 Nom: ${report.prize.name}
💰 Valeur: ${report.prize.value}€

-------------------------------------------------
                STATISTIQUES
-------------------------------------------------
👥 Total de participants: ${report.statistics.totalParticipants}
✅ Participants éligibles: ${report.statistics.eligibleParticipants}
📋 Critères:
   - Tickets minimum: ${report.statistics.criteria.minTickets}
   - Email vérifié: ${report.statistics.criteria.verified ? 'Oui' : 'Non'}

-------------------------------------------------
            TICKETS DU GAGNANT
-------------------------------------------------
${report.winner.tickets.map((t: any, i: number) =>
  `${i + 1}. Code: ${t.code} | Lot: ${t.prize_name} | Statut: ${t.status} | Joué le: ${new Date(t.played_at).toLocaleDateString('fr-FR')}`
).join('\n')}

-------------------------------------------------
${report.draw.notifiedAt ? `📧 Gagnant notifié le: ${new Date(report.draw.notifiedAt).toLocaleString('fr-FR')}\n` : ''}${report.draw.claimedAt ? `✅ Lot récupéré le: ${new Date(report.draw.claimedAt).toLocaleString('fr-FR')}\n` : ''}-------------------------------------------------

📝 Notes: ${report.draw.notes || 'Aucune note'}

=================================================
     Généré le ${new Date().toLocaleString('fr-FR')}
=================================================
      `.trim();

      // Télécharger le rapport
      const blob = new Blob([reportText], { type: 'text/plain;charset=utf-8' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = `rapport-tirage-${existingDraw.id}.txt`;
      link.click();

      toast.success('Rapport téléchargé!');
    } catch (error: any) {
      toast.error(error.message || 'Erreur lors du téléchargement');
    }
  };

  const markAsNotified = async () => {
    if (!existingDraw) return;

    try {
      const token = localStorage.getItem('auth_token') || localStorage.getItem('token');
      const response = await fetch(
        `${API_BASE_URL}/draw/${existingDraw.id}/notify`,
        {
          method: 'PUT',
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      if (!response.ok) throw new Error('Erreur');

      toast.success('Gagnant marqué comme notifié');
      await checkExistingDraw();
    } catch (error: any) {
      toast.error(error.message || 'Erreur');
    }
  };

  const markAsClaimed = async () => {
    if (!existingDraw) return;

    const notes = prompt('Notes (optionnel):');

    try {
      const token = localStorage.getItem('auth_token') || localStorage.getItem('token');
      const response = await fetch(
        `${API_BASE_URL}/draw/${existingDraw.id}/claim`,
        {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify({ notes }),
        }
      );

      if (!response.ok) throw new Error('Erreur');

      toast.success('Lot marqué comme récupéré');
      await checkExistingDraw();
    } catch (error: any) {
      toast.error(error.message || 'Erreur');
    }
  };

  const deleteDraw = async () => {
    if (!existingDraw) return;

    const confirmMessage = `⚠️ ATTENTION: Cette action est IRRÉVERSIBLE!\n\nVoulez-vous vraiment annuler ce tirage au sort?\n\nGagnant: ${existingDraw.winner_name}\nEmail: ${existingDraw.winner_email}\nPrix: ${existingDraw.prize_name}`;

    if (!confirm(confirmMessage)) {
      return;
    }

    setLoading(true);
    try {
      const token = localStorage.getItem('auth_token') || localStorage.getItem('token');
      const response = await fetch(
        `${API_BASE_URL}/draw/${existingDraw.id}`,
        {
          method: 'DELETE',
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      if (!response.ok) {
        let errorMessage = 'Erreur lors de l\'annulation';
        try {
          const error = await response.json();
          errorMessage = error.message || errorMessage;
        } catch (e) {
          // Si le parsing JSON échoue, utiliser le message par défaut
          errorMessage = `Erreur ${response.status}: ${response.statusText}`;
        }
        throw new Error(errorMessage);
      }

      toast.success('🗑️ Tirage au sort annulé avec succès!');
      setHasExistingDraw(false);
      setExistingDraw(null);
      setDrawResult(null);
      setAllowRedraw(false);
      await checkExistingDraw();
      await loadParticipants();
    } catch (error: any) {
      console.error('Erreur lors de l\'annulation du tirage:', error);
      toast.error(error.message || 'Erreur lors de l\'annulation');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-6 max-w-7xl mx-auto">
      {/* En-tête avec titre du prix */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2 flex items-center gap-3">
          <Trophy className="w-10 h-10 text-yellow-600" />
          Tirage au Sort - {prizeName}
        </h1>
        <p className="text-gray-600 text-lg">
          Prix à gagner : <span className="font-bold text-purple-600">{prizeValue}€</span> •
          Participants ayant joué au moins {minTickets} ticket{minTickets > 1 ? 's' : ''}
        </p>
      </div>

      {/* Alerte si un tirage existe déjà */}
      {hasExistingDraw && existingDraw && (
        <Card className="p-6 mb-6 border-yellow-500 bg-yellow-50">
          <div className="flex items-start gap-4">
            <AlertCircle className="w-6 h-6 text-yellow-600 flex-shrink-0 mt-1" />
            <div className="flex-1">
              <h3 className="font-bold text-yellow-900 mb-2">Un tirage a déjà été effectué!</h3>
              <div className="space-y-1 text-sm text-yellow-800">
                <p><strong>Date:</strong> {new Date(existingDraw.draw_date).toLocaleString('fr-FR')}</p>
                <p><strong>Gagnant:</strong> {existingDraw.winner_name} ({existingDraw.winner_email})</p>
                <p><strong>Prix:</strong> {existingDraw.prize_name} - {existingDraw.prize_value}€</p>
                <p><strong>Participants éligibles:</strong> {existingDraw.eligible_participants} / {existingDraw.total_participants}</p>
                <p>
                  <strong>Statut:</strong>{' '}
                  <span
                    className={`px-2 py-1 rounded text-xs ${
                      existingDraw.status === 'CLAIMED'
                        ? 'bg-green-100 text-green-800'
                        : existingDraw.status === 'NOTIFIED'
                        ? 'bg-blue-100 text-blue-800'
                        : 'bg-gray-100 text-gray-800'
                    }`}
                  >
                    {existingDraw.status}
                  </span>
                </p>
              </div>

              <div className="flex gap-2 mt-4 flex-wrap">
                <Button onClick={downloadReport} size="sm" variant="outline">
                  <Download className="w-4 h-4 mr-1" />
                  Télécharger rapport
                </Button>

                {existingDraw.status === 'COMPLETED' && (
                  <Button onClick={markAsNotified} size="sm" variant="outline">
                    <Mail className="w-4 h-4 mr-1" />
                    Marquer comme notifié
                  </Button>
                )}

                {existingDraw.status === 'NOTIFIED' && (
                  <Button onClick={markAsClaimed} size="sm" variant="outline">
                    <CheckCircle className="w-4 h-4 mr-1" />
                    Marquer comme récupéré
                  </Button>
                )}

                <Button
                  onClick={deleteDraw}
                  size="sm"
                  variant="outline"
                  className="border-red-300 text-red-700 hover:bg-red-50 hover:border-red-400"
                >
                  <Trash2 className="w-4 h-4 mr-1" />
                  Annuler ce tirage
                </Button>
              </div>
            </div>
          </div>
        </Card>
      )}

      {/* Liste des participants éligibles */}
      <Card className="p-6 mb-6">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-2xl font-bold flex items-center gap-2">
              <Users className="w-6 h-6 text-blue-600" />
              Participants Éligibles
            </h2>
            <p className="text-gray-600 text-sm mt-1">
              {loading
                ? 'Chargement en cours...'
                : participants.length > 0
                  ? `${participants.length} participant${participants.length > 1 ? 's' : ''} éligible${participants.length > 1 ? 's' : ''} au tirage`
                  : 'Aucun participant chargé'}
            </p>
          </div>
          <Button
            onClick={loadParticipants}
            isLoading={loading}
            disabled={loading}
            size="sm"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            Actualiser
          </Button>
        </div>

        {loading && (
          <div className="text-center py-12">
            <RefreshCw className="w-12 h-12 text-blue-600 animate-spin mx-auto mb-4" />
            <p className="text-gray-600">Chargement des participants éligibles...</p>
          </div>
        )}

        {!loading && participants.length === 0 && (
          <div className="text-center py-12 bg-gray-50 rounded-lg">
            <Users className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <p className="text-gray-600 text-lg font-medium">Aucun participant éligible</p>
            <p className="text-gray-500 text-sm mt-2">
              Vérifiez que des participants ont joué au moins {minTickets} ticket{minTickets > 1 ? 's' : ''}
            </p>
          </div>
        )}

        {!loading && participants.length > 0 && (
          <>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gradient-to-r from-blue-50 to-purple-50">
                  <tr>
                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                      #
                    </th>
                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                      Nom Complet
                    </th>
                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                      Email
                    </th>
                    <th className="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">
                      Tickets Joués
                    </th>
                    <th className="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">
                      Lots Gagnés
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {participants.map((participant, index) => (
                    <tr key={participant.id} className="hover:bg-blue-50 transition-colors">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {index + 1}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <User className="w-5 h-5 text-blue-500 mr-2" />
                          <span className="text-sm font-medium text-gray-900">
                            {participant.first_name} {participant.last_name}
                          </span>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                        {participant.email}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-center">
                        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                          {participant.tickets_played}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-center">
                        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
                          {participant.prizes_won}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Bouton de tirage au sort */}
            <div className="mt-8 p-6 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg border-2 border-yellow-200">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="text-lg font-bold text-gray-900 mb-1">
                    Prêt à lancer le tirage au sort ?
                  </h3>
                  <p className="text-sm text-gray-600">
                    {participants.length} participant{participants.length > 1 ? 's ont' : ' a'} une chance égale de gagner {prizeName} ({prizeValue}€)
                  </p>
                </div>
                <Button
                  onClick={conductDraw}
                  disabled={loading}
                  size="lg"
                  className="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600"
                >
                  <Trophy className="w-5 h-5 mr-2" />
                  Lancer le Tirage
                </Button>
              </div>
            </div>
          </>
        )}
      </Card>

      {/* Résultat du tirage */}
      {drawResult && (
        <Card className="p-6 bg-gradient-to-br from-yellow-50 to-orange-50 border-yellow-500">
          <div className="text-center">
            <Trophy className="w-16 h-16 text-yellow-600 mx-auto mb-4" />
            <h2 className="text-3xl font-bold text-gray-900 mb-2">
              Félicitations au gagnant!
            </h2>

            <div className="bg-white rounded-lg p-6 my-6 shadow-lg">
              <User className="w-12 h-12 text-blue-600 mx-auto mb-3" />
              <h3 className="text-2xl font-bold text-gray-900 mb-2">
                {drawResult.winner.name}
              </h3>
              <p className="text-gray-600 mb-1">{drawResult.winner.email}</p>
              <p className="text-sm text-gray-500">
                {drawResult.winner.ticketsPlayed} ticket(s) joué(s)
              </p>
            </div>

            <div className="bg-white rounded-lg p-6 shadow-lg">
              <Gift className="w-12 h-12 text-purple-600 mx-auto mb-3" />
              <h3 className="text-xl font-bold text-gray-900 mb-1">
                {drawResult.prize.name}
              </h3>
              <p className="text-2xl font-bold text-purple-600">
                {drawResult.prize.value}€
              </p>
            </div>

            <div className="mt-6 grid grid-cols-3 gap-4 text-center">
              <div>
                <p className="text-2xl font-bold text-gray-900">
                  {drawResult.statistics.totalParticipants}
                </p>
                <p className="text-sm text-gray-600">Total participants</p>
              </div>
              <div>
                <p className="text-2xl font-bold text-blue-600">
                  {drawResult.statistics.eligibleParticipants}
                </p>
                <p className="text-sm text-gray-600">Éligibles</p>
              </div>
              <div>
                <p className="text-2xl font-bold text-green-600">1</p>
                <p className="text-sm text-gray-600">Gagnant</p>
              </div>
            </div>

            <div className="mt-6 flex gap-3 justify-center">
              <Button onClick={downloadReport}>
                <Download className="w-4 h-4 mr-2" />
                Télécharger le rapport
              </Button>
              <Button variant="outline" onClick={() => {
                if (typeof window !== 'undefined') {
                  window.location.reload();
                }
              }}>
                <RefreshCw className="w-4 h-4 mr-2" />
                Rafraîchir
              </Button>
            </div>
          </div>
        </Card>
      )}
    </div>
  );
}