'use client';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Campaign, Participant, ParticipantWithVoteStatus } from '@/types';
import { campaignService, participantService, voteService } from '@/lib/services';
import AddParticipantModal from '@/components/AddParticipantModal';
import EditParticipantModal from '@/components/EditParticipantModal';
import DeleteParticipantModal from '@/components/DeleteParticipantModal';
import ImportFileModal from '@/components/ImportFileModal';
import SendParticipantEmailModal from '@/components/SendParticipantEmailModal';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Input } from '@/components/ui/input';
import Navigation from '@/components/Navigation';
import AuthGuard from '@/components/AuthGuard';
import { User, Calendar, Mail, Vote, Copy, Check, Upload } from 'lucide-react';

export const dynamic = 'force-dynamic';

function CampaignParticipantsPageContent() {
  const params = useParams();
  const campaignId = params.id as string;
  const [campaign, setCampaign] = useState<Campaign | null>(null);
  const [participants, setParticipants] = useState<ParticipantWithVoteStatus[]>([]);
  const [loading, setLoading] = useState(true);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [showImportModal, setShowImportModal] = useState(false);
  const [showSendEmailModal, setShowSendEmailModal] = useState(false);
  const [selectedParticipant, setSelectedParticipant] = useState<Participant | null>(null);
  const [copiedParticipantId, setCopiedParticipantId] = useState<string | null>(null);

  useEffect(() => {
    // Vérifier la configuration Supabase
    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
    
    // Si pas de configuration ou valeurs par défaut, rediriger vers setup
    if (!supabaseUrl || !supabaseAnonKey || 
        supabaseUrl === 'https://placeholder.supabase.co' || 
        supabaseAnonKey === 'your-anon-key') {
      console.log('🔧 Configuration Supabase manquante, redirection vers /setup');
      window.location.href = '/setup';
      return;
    }
    
    loadData();
  }, [campaignId]);

  const loadData = async () => {
    try {
      setLoading(true);
      const [campaignData, participantsWithVoteStatus] = await Promise.all([
        campaignService.getById(campaignId),
        voteService.getParticipantVoteStatus(campaignId)
      ]);
      
      setCampaign(campaignData);
      setParticipants(participantsWithVoteStatus);
    } catch (error) {
      console.error('Erreur lors du chargement des données:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleParticipantAdded = () => {
    setShowAddModal(false);
    loadData();
  };

  const handleParticipantEdited = () => {
    setShowEditModal(false);
    loadData();
  };

  const handleParticipantDeleted = () => {
    setShowDeleteModal(false);
    loadData();
  };

  const handleImportParticipants = async (data: any[]) => {
    try {
      const participantsToCreate = data.map(row => ({
        campaign_id: campaignId,
        first_name: row.first_name || '',
        last_name: row.last_name || '',
        email: row.email || ''
      }));

      // Créer les participants un par un
      for (const participant of participantsToCreate) {
        await participantService.create(participant);
      }

      loadData();
    } catch (error) {
      console.error('Erreur lors de l\'import des participants:', error);
    }
  };

  const getInitials = (firstName: string, lastName: string) => {
    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
  };

  const copyVoteLink = (participantId: string, shortId?: string) => {
    // Utiliser le lien court si disponible, sinon le lien long
    const voteUrl = shortId 
      ? `${window.location.origin}/v/${shortId}`
      : `${window.location.origin}/campaigns/${campaignId}/vote/${participantId}`;
    navigator.clipboard.writeText(voteUrl);
    setCopiedParticipantId(participantId);
    setTimeout(() => setCopiedParticipantId(null), 2000);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
        <div className="container mx-auto px-4 py-8">
          <Navigation showBackButton backUrl="/admin" />
          <div className="flex items-center justify-center h-64">
            <div className="text-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
              <p className="text-slate-600 dark:text-slate-300">Chargement des participants...</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (!campaign) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
        <div className="container mx-auto px-4 py-8">
          <Navigation showBackButton backUrl="/admin" />
          <Card className="border-dashed">
            <CardContent className="p-12 text-center">
              <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">❌</span>
              </div>
              <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
                Campagne introuvable
              </h3>
              <p className="text-slate-600 dark:text-slate-300 mb-6">
                La campagne que vous recherchez n'existe pas ou a été supprimée.
              </p>
              <Button asChild>
                <Link href="/admin">Retour à l'administration</Link>
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }



  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <div className="container mx-auto px-4 py-8">
        <Navigation showBackButton backUrl="/admin" />
        
        {/* Header */}
        <div className="mb-8">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
              <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
                Participants
              </h1>
              <p className="text-slate-600 dark:text-slate-300 mt-2">
                {campaign.title}
              </p>
            </div>
            <div className="flex gap-2">
              <Button variant="outline" onClick={() => setShowImportModal(true)}>
                <Upload className="w-4 h-4 mr-2" />
                Importer
              </Button>
              <Button onClick={() => setShowAddModal(true)} size="lg">
                ✨ Nouveau participant
              </Button>
            </div>
          </div>
        </div>



        {/* Participants List */}
        {participants.length === 0 ? (
          <Card className="border-dashed">
            <CardContent className="p-12 text-center">
              <div className="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
                <User className="w-8 h-8 text-slate-400" />
              </div>
              <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
                Aucun participant
              </h3>
              <p className="text-slate-600 dark:text-slate-300 mb-6">
                Aucun participant n'a encore été ajouté à cette campagne.
              </p>
              <Button onClick={() => setShowAddModal(true)}>
                Ajouter un participant
              </Button>
            </CardContent>
          </Card>
        ) : (
          <div className="grid gap-6">
            {participants.map((participant) => (
              <Card key={participant.id} className="hover:shadow-lg transition-shadow duration-200">
                <CardHeader>
                  <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <CardTitle className="text-xl">
                          {participant.first_name} {participant.last_name}
                        </CardTitle>
                        <Badge variant={participant.has_voted ? 'default' : 'secondary'}>
                          {participant.has_voted ? 'A voté' : 'N\'a pas voté'}
                        </Badge>
                      </div>
                    </div>
                    <div className="flex flex-col sm:flex-row gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          setSelectedParticipant(participant);
                          setShowEditModal(true);
                        }}
                      >
                        ✏️ Modifier
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          setSelectedParticipant(participant);
                          setShowDeleteModal(true);
                        }}
                      >
                        🗑️ Supprimer
                      </Button>
                    </div>
                  </div>
                </CardHeader>
                
                <CardContent>
                  <div className="flex items-center gap-4 mb-4">
                    <Avatar className="w-10 h-10">
                      <AvatarFallback className="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
                        {getInitials(participant.first_name, participant.last_name)}
                      </AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-300">
                        <div className="flex items-center gap-1">
                          <Mail className="w-3 h-3" />
                          {participant.email}
                        </div>
                        <div className="flex items-center gap-1">
                          <Calendar className="w-3 h-3" />
                          {new Date(participant.created_at).toLocaleDateString('fr-FR')}
                        </div>
                        {participant.has_voted && participant.total_voted_amount !== undefined && (
                          <div className="flex items-center gap-1">
                            <Vote className="w-3 h-3" />
                            {participant.total_voted_amount}€ votés
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Vote Link for voting campaigns */}
                  {campaign.status === 'voting' && (
                    <div className="flex items-center space-x-2">
                      <div className="flex-1 min-w-0">
                        <div className="text-xs text-blue-700 dark:text-blue-300 mb-1">
                          Lien de vote :
                        </div>
                        <div className="flex items-center space-x-2">
                          <Input
                            type="text"
                            readOnly
                            value={participant.short_id 
                              ? `${window.location.origin}/v/${participant.short_id}`
                              : 'Génération en cours...'
                            }
                            className="flex-1 text-xs bg-white dark:bg-slate-800 border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 font-mono"
                          />
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => copyVoteLink(participant.id, participant.short_id)}
                            className="text-xs"
                            disabled={!participant.short_id}
                          >
                            {copiedParticipantId === participant.id ? (
                              <>
                                <Check className="w-3 h-3 mr-1" />
                                Copié !
                              </>
                            ) : (
                              <>
                                <Copy className="w-3 h-3 mr-1" />
                                Copier
                              </>
                            )}
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              setSelectedParticipant(participant);
                              setShowSendEmailModal(true);
                            }}
                            className="text-xs"
                          >
                            <Mail className="w-3 h-3 mr-1" />
                            Envoyer un mail
                          </Button>
                        </div>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            ))}
          </div>
        )}

        {/* Modals */}
        <AddParticipantModal
          isOpen={showAddModal}
          onClose={() => setShowAddModal(false)}
          onSuccess={handleParticipantAdded}
          campaignId={campaignId}
        />
        
        {selectedParticipant && (
          <EditParticipantModal
            isOpen={showEditModal}
            onClose={() => setShowEditModal(false)}
            onSuccess={handleParticipantEdited}
            participant={selectedParticipant}
          />
        )}
        
        {selectedParticipant && (
          <DeleteParticipantModal
            isOpen={showDeleteModal}
            onClose={() => setShowDeleteModal(false)}
            onSuccess={handleParticipantDeleted}
            participant={selectedParticipant}
          />
        )}

        <ImportFileModal
          isOpen={showImportModal}
          onClose={() => setShowImportModal(false)}
          onImport={handleImportParticipants}
          type="participants"
          campaignTitle={campaign?.title}
        />

        {selectedParticipant && campaign && (
          <SendParticipantEmailModal
            isOpen={showSendEmailModal}
            onClose={() => setShowSendEmailModal(false)}
            participant={selectedParticipant}
            campaign={campaign}
          />
        )}
      </div>
    </div>
  );
}

export default function CampaignParticipantsPage() {
  return (
    <AuthGuard>
      <CampaignParticipantsPageContent />
    </AuthGuard>
  );
}