'use client';

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { Campaign, Proposition, Participant, Vote } from '@/types';
import { campaignService, propositionService, participantService, voteService } from '@/lib/services';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import Navigation from '@/components/Navigation';
import AuthGuard from '@/components/AuthGuard';
import { 
  BarChart3, 
  Users, 
  Vote as VoteIcon, 
  TrendingUp, 
  Target, 
  Award,
  FileText,
  Calendar,
  ArrowLeft,
  SortAsc,
  TrendingDown,
  Users2,
  Target as TargetIcon,
  Hash
} from 'lucide-react';
import { ExportStatsButton } from '@/components/ExportStatsButton';

export const dynamic = 'force-dynamic';

interface PropositionStats {
  proposition: Proposition;
  voteCount: number;
  averageAmount: number;
  minAmount: number;
  maxAmount: number;
  totalAmount: number;
  participationRate: number;
  voteDistribution: number;
  consensusScore: number;
}

type SortOption = 
  | 'popularity' 
  | 'total_impact' 
  | 'consensus' 
  | 'engagement' 
  | 'distribution' 
  | 'alphabetical';

const sortOptions = [
  { value: 'total_impact', label: 'Impact total', icon: Target, description: 'Somme totale investie' },
  { value: 'popularity', label: 'Popularité', icon: TrendingUp, description: 'Moyenne puis nombre de votants' },
  { value: 'consensus', label: 'Consensus', icon: Users2, description: 'Plus petit écart-type' },
  { value: 'engagement', label: 'Engagement', icon: Users, description: 'Taux de participation' },
  { value: 'distribution', label: 'Répartition', icon: BarChart3, description: 'Nombre de votes différents' },
  { value: 'alphabetical', label: 'Alphabétique', icon: Hash, description: 'Ordre alphabétique' }
];

function CampaignStatsPageContent() {
  const params = useParams();
  const campaignId = params.id as string;
  
  const [campaign, setCampaign] = useState<Campaign | null>(null);
  const [participants, setParticipants] = useState<Participant[]>([]);
  const [propositions, setPropositions] = useState<Proposition[]>([]);
  const [votes, setVotes] = useState<Vote[]>([]);
  const [loading, setLoading] = useState(true);
  const [propositionStats, setPropositionStats] = useState<PropositionStats[]>([]);
  const [sortBy, setSortBy] = useState<SortOption>('total_impact');

  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;
    }
    
    if (campaignId) {
      loadData();
    }
  }, [campaignId]);

  const loadData = async () => {
    try {
      setLoading(true);
      const [campaignData, participantsData, propositionsData, votesData] = await Promise.all([
        campaignService.getById(campaignId),
        participantService.getByCampaign(campaignId),
        propositionService.getByCampaign(campaignId),
        voteService.getByCampaign(campaignId)
      ]);
      
      if (!campaignData) {
        throw new Error('Campagne non trouvée');
      }
      
      setCampaign(campaignData);
      setParticipants(participantsData);
      setPropositions(propositionsData);
      setVotes(votesData);
      
      // Calculer les statistiques des propositions
      const stats = propositionsData.map(proposition => {
        const propositionVotes = votesData.filter(vote => vote.proposition_id === proposition.id && vote.amount > 0);
        const amounts = propositionVotes.map(vote => vote.amount);
        const totalAmount = amounts.reduce((sum, amount) => sum + amount, 0);
        
        // Calculer l'écart-type pour le consensus
        const mean = amounts.length > 0 ? totalAmount / amounts.length : 0;
        const variance = amounts.length > 0 
          ? amounts.reduce((sum, amount) => sum + Math.pow(amount - mean, 2), 0) / amounts.length 
          : 0;
        const consensusScore = Math.sqrt(variance);
        
        // Calculer le taux de participation pour cette proposition
        const participationRate = participantsData.length > 0 
          ? (propositionVotes.length / participantsData.length) * 100 
          : 0;
        
        // Calculer la répartition des votes (nombre de montants différents)
        const uniqueAmounts = new Set(amounts).size;
        
        return {
          proposition,
          voteCount: propositionVotes.length,
          averageAmount: amounts.length > 0 ? Math.round(totalAmount / amounts.length) : 0,
          minAmount: amounts.length > 0 ? Math.min(...amounts) : 0,
          maxAmount: amounts.length > 0 ? Math.max(...amounts) : 0,
          totalAmount,
          participationRate: Math.round(participationRate * 100) / 100,
          voteDistribution: uniqueAmounts,
          consensusScore: Math.round(consensusScore * 100) / 100
        };
      });
      
      setPropositionStats(stats);
    } catch (error) {
      console.error('Erreur lors du chargement des données:', error);
    } finally {
      setLoading(false);
    }
  };

  const getSortedStats = () => {
    const sorted = [...propositionStats];
    
    switch (sortBy) {
      case 'popularity':
        return sorted.sort((a, b) => {
          if (b.averageAmount !== a.averageAmount) {
            return b.averageAmount - a.averageAmount;
          }
          return b.voteCount - a.voteCount;
        });
      
      case 'total_impact':
        return sorted.sort((a, b) => b.totalAmount - a.totalAmount);
      
      case 'consensus':
        return sorted.sort((a, b) => a.consensusScore - b.consensusScore);
      
      case 'engagement':
        return sorted.sort((a, b) => b.participationRate - a.participationRate);
      
      case 'distribution':
        return sorted.sort((a, b) => b.voteDistribution - a.voteDistribution);
      
      case 'alphabetical':
        return sorted.sort((a, b) => a.proposition.title.localeCompare(b.proposition.title));
      
      default:
        return sorted;
    }
  };

  const getParticipationRate = () => {
    if (participants.length === 0) return 0;
    const votedParticipants = participants.filter(p => {
      const participantVotes = votes.filter(v => v.participant_id === p.id);
      return participantVotes.some(v => v.amount > 0);
    });
    return Math.round((votedParticipants.length / participants.length) * 100);
  };

  const getAverageVotesPerProposition = () => {
    if (propositions.length === 0) return 0;
    const totalVotes = votes.filter(v => v.amount > 0).length;
    return Math.round(totalVotes / propositions.length);
  };

  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 statistiques...</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>
    );
  }

  const participationRate = getParticipationRate();
  const averageVotesPerProposition = getAverageVotesPerProposition();

  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 items-center gap-4 mb-4">
            <Button variant="outline" size="sm" asChild>
              <Link href="/admin">
                <ArrowLeft className="w-4 h-4 mr-2" />
                Retour
              </Link>
            </Button>
            <Badge variant={campaign.status === 'voting' ? 'default' : 'secondary'}>
              {campaign.status === 'voting' ? 'En cours de vote' : 'Terminée'}
            </Badge>
          </div>
          
          <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 flex items-center gap-3">
                <BarChart3 className="w-8 h-8 text-blue-600" />
                Statistiques
              </h1>
              <p className="text-slate-600 dark:text-slate-300 mt-2">
                {campaign.title}
              </p>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
                {campaign.description}
              </p>
            </div>
            
            <div className="flex gap-2">
              <ExportStatsButton
                campaignTitle={campaign.title}
                propositions={propositions}
                participants={participants}
                votes={votes}
                budgetPerUser={campaign.budget_per_user}
                propositionStats={propositionStats}
                disabled={loading}
              />
            </div>
          </div>
        </div>

        {/* Overview Stats */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-slate-600 dark:text-slate-300">Taux de participation</p>
                  <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{participationRate}%</p>
                </div>
                <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                  <Users className="w-6 h-6 text-blue-600 dark:text-blue-300" />
                </div>
              </div>
              <Progress value={participationRate} className="mt-4" />
              <p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
                {participants.filter(p => votes.some(v => v.participant_id === p.id && v.amount > 0)).length} / {participants.length} participants
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-slate-600 dark:text-slate-300">Propositions</p>
                  <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{propositions.length}</p>
                </div>
                <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
                  <FileText className="w-6 h-6 text-purple-600 dark:text-purple-300" />
                </div>
              </div>
              <p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
                {averageVotesPerProposition} votes moy. par proposition
              </p>
            </CardContent>
          </Card>
        </div>

        {/* Propositions Stats */}
        <Card>
          <CardHeader>
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
              <div>
                <CardTitle className="flex items-center gap-2">
                  <VoteIcon className="w-5 h-5" />
                  Préférences par proposition
                </CardTitle>
                <CardDescription>
                  Statistiques des montants exprimés par les participants pour chaque proposition
                </CardDescription>
              </div>
              
              <div className="flex items-center gap-2">
                <span className="text-sm font-medium text-slate-600 dark:text-slate-300">Trier par :</span>
                <Select value={sortBy} onValueChange={(value: SortOption) => setSortBy(value)}>
                  <SelectTrigger className="w-56">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="w-80">
                    {sortOptions.map((option) => {
                      const IconComponent = option.icon;
                      return (
                        <SelectItem key={option.value} value={option.value} className="py-3">
                          <div className="flex items-center gap-3 w-full">
                            <IconComponent className="w-4 h-4 flex-shrink-0" />
                            <div className="min-w-0 flex-1">
                              <div className="font-medium truncate">{option.label}</div>
                              <div className="text-xs text-slate-500 truncate">{option.description}</div>
                            </div>
                          </div>
                        </SelectItem>
                      );
                    })}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            {propositionStats.length === 0 ? (
              <div className="text-center py-12">
                <FileText className="w-12 h-12 text-slate-400 mx-auto mb-4" />
                <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
                  Aucune proposition
                </h3>
                <p className="text-slate-600 dark:text-slate-300">
                  Aucune proposition n'a été soumise pour cette campagne.
                </p>
              </div>
            ) : (
              <div className="space-y-6">
                {getSortedStats().map((stat, index) => (
                    <div key={stat.proposition.id} className="border rounded-lg p-6 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                      <div className="flex items-start justify-between mb-4">
                        <div className="flex-1">
                          <div className="flex items-center gap-3 mb-4">
                            <Badge variant="outline" className="text-xs">
                              #{index + 1}
                            </Badge>
                            <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
                              {stat.proposition.title}
                            </h3>
                          </div>
                        </div>
                        {index === 0 && stat.averageAmount > 0 && (
                          <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
                            <Award className="w-3 h-3 mr-1" />
                            {sortBy === 'popularity' ? 'Préférée' : 
                             sortBy === 'total_impact' ? 'Plus d\'impact' :
                             sortBy === 'consensus' ? 'Plus de consensus' :
                             sortBy === 'engagement' ? 'Plus d\'engagement' :
                             sortBy === 'distribution' ? 'Plus de répartition' : 'Première'}
                          </Badge>
                        )}
                      </div>

                      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                        <div className="text-center">
                          <p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
                            {stat.voteCount}
                          </p>
                          <p className="text-xs text-slate-500 dark:text-slate-400">
                            {stat.voteCount === 1 ? 'Votant' : 'Votants'}
                          </p>
                        </div>
                        <div className="text-center">
                          <p className="text-2xl font-bold text-green-600 dark:text-green-400">
                            {stat.averageAmount}€
                          </p>
                          <p className="text-xs text-slate-500 dark:text-slate-400">Moyenne</p>
                        </div>
                        <div className="text-center">
                          <p className="text-2xl font-bold text-purple-600 dark:text-purple-400">
                            {stat.totalAmount}€
                          </p>
                          <p className="text-xs text-slate-500 dark:text-slate-400">Total</p>
                        </div>
                        <div className="text-center">
                          <p className="text-2xl font-bold text-orange-600 dark:text-orange-400">
                            {stat.minAmount}€
                          </p>
                          <p className="text-xs text-slate-500 dark:text-slate-400">Minimum</p>
                        </div>
                        <div className="text-center">
                          <p className="text-2xl font-bold text-red-600 dark:text-red-400">
                            {stat.maxAmount}€
                          </p>
                          <p className="text-xs text-slate-500 dark:text-slate-400">Maximum</p>
                        </div>
                        <div className="text-center">
                          <p className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
                            {stat.participationRate}%
                          </p>
                          <p className="text-xs text-slate-500 dark:text-slate-400">Participation</p>
                        </div>
                      </div>

                      {/* Métriques avancées */}
                      <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
                          <div className="flex items-center gap-2">
                            <Users2 className="w-4 h-4 text-slate-500" />
                            <span className="text-sm text-slate-600 dark:text-slate-300">Consensus</span>
                          </div>
                          <Badge variant="outline" className="text-xs">
                            Écart-type: {stat.consensusScore}€
                          </Badge>
                        </div>
                        <div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
                          <div className="flex items-center gap-2">
                            <BarChart3 className="w-4 h-4 text-slate-500" />
                            <span className="text-sm text-slate-600 dark:text-slate-300">Répartition</span>
                          </div>
                          <Badge variant="outline" className="text-xs">
                            {stat.voteDistribution} montants différents
                          </Badge>
                        </div>
                      </div>

                      {stat.voteCount > 0 && (
                        <div className="mt-4">
                          <div className="flex justify-between text-xs text-slate-500 dark:text-slate-400 mb-1">
                            <span>Répartition des préférences</span>
                            <span>{stat.voteCount} {stat.voteCount === 1 ? 'votant' : 'votants'}</span>
                          </div>
                          <Progress 
                            value={(stat.averageAmount / campaign.budget_per_user) * 100} 
                            className="h-2"
                          />
                        </div>
                      )}
                    </div>
                  ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

export default function CampaignStatsPage() {
  return (
    <AuthGuard>
      <CampaignStatsPageContent />
    </AuthGuard>
  );
}