'use client';

import { useState, useEffect, useMemo } from 'react';
import { parseCSV, Person } from '@/lib/csv-parser';

export default function Home() {
  const [people, setPeople] = useState<Person[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedCount, setSelectedCount] = useState<number>(5);
  const [selectedPostes, setSelectedPostes] = useState<Set<string>>(new Set());
  const [randomPeople, setRandomPeople] = useState<Person[]>([]);
  const [showResults, setShowResults] = useState(false);
  const [searchPoste, setSearchPoste] = useState<string>('');

  useEffect(() => {
    async function loadData() {
      try {
        const response = await fetch('/api/people');
        const data = await response.json();
        setPeople(data);
      } catch (error) {
        console.error('Error loading data:', error);
      } finally {
        setLoading(false);
      }
    }
    loadData();
  }, []);

  // Compter le nombre de personnes par poste
  const posteCounts = useMemo(() => {
    const counts: Record<string, number> = {};
    people.forEach(person => {
      if (person.description) {
        counts[person.description] = (counts[person.description] || 0) + 1;
      }
    });
    return counts;
  }, [people]);

  // Extraire tous les postes uniques triés par nombre décroissant
  const allPostes = useMemo(() => {
    const postes = new Set<string>();
    people.forEach(person => {
      if (person.description) {
        postes.add(person.description);
      }
    });
    return Array.from(postes).sort((a, b) => {
      const countA = posteCounts[a] || 0;
      const countB = posteCounts[b] || 0;
      // Tri décroissant par nombre, puis alphabétique si égal
      if (countA !== countB) {
        return countB - countA;
      }
      return a.localeCompare(b);
    });
  }, [people, posteCounts]);

  // Filtrer les postes selon la recherche
  const filteredPostes = useMemo(() => {
    if (!searchPoste.trim()) {
      return allPostes;
    }
    const searchLower = searchPoste.toLowerCase();
    return allPostes.filter(poste => 
      poste.toLowerCase().includes(searchLower)
    );
  }, [allPostes, searchPoste]);

  // Filtrer les personnes selon les postes sélectionnés
  const filteredPeople = useMemo(() => {
    if (selectedPostes.size === 0) {
      return people;
    }
    return people.filter(person => 
      person.description && selectedPostes.has(person.description)
    );
  }, [people, selectedPostes]);

  const handlePosteToggle = (poste: string) => {
    const newSelected = new Set(selectedPostes);
    if (newSelected.has(poste)) {
      newSelected.delete(poste);
    } else {
      newSelected.add(poste);
    }
    setSelectedPostes(newSelected);
    setShowResults(false);
  };

  const handleSelectAll = () => {
    if (selectedPostes.size === allPostes.length) {
      setSelectedPostes(new Set());
    } else {
      setSelectedPostes(new Set(allPostes));
    }
    setShowResults(false);
  };

  const handleRandomize = () => {
    if (selectedCount <= 0 || selectedCount > filteredPeople.length) {
      alert(`Veuillez entrer un nombre entre 1 et ${filteredPeople.length}`);
      return;
    }

    const shuffled = [...filteredPeople].sort(() => Math.random() - 0.5);
    const selected = shuffled.slice(0, selectedCount);
    setRandomPeople(selected);
    setShowResults(true);
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="relative">
          <div className="w-16 h-16 border-4 border-cyan-500 border-t-transparent rounded-full animate-spin"></div>
          <div className="absolute inset-0 w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin opacity-50" style={{ animationDirection: 'reverse', animationDuration: '1.5s' }}></div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen py-8 px-4 relative overflow-hidden">
      {/* Effets de fond animés */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div className="absolute bottom-1/4 left-1/3 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
      </div>
      
      <div className="max-w-6xl mx-auto relative z-10">
        <div className="text-center mb-12">
          <h1 className="text-6xl font-black mb-4 text-gradient tracking-tight">
            People Randomizr
          </h1>
          <p className="text-cyan-300 text-lg font-light">Sélection intelligente • Extraction aléatoire</p>
        </div>

        <div className="glass-strong rounded-2xl p-8 mb-8 shadow-2xl border border-cyan-500/20">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400">
              Filtres par poste
            </h2>
            <div className="flex items-center gap-4">
              <div className="px-4 py-2 glass rounded-lg border border-cyan-500/30">
                <span className="text-sm text-cyan-300">
                  <span className="font-bold text-cyan-400 text-lg">{selectedPostes.size}</span>
                  <span className="text-purple-300"> / </span>
                  <span className="text-white">{allPostes.length}</span>
                  <span className="text-gray-400 ml-2">sélectionné{selectedPostes.size > 1 ? 's' : ''}</span>
                </span>
              </div>
              <button
                onClick={handleSelectAll}
                className="px-5 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-cyan-600 to-purple-600 rounded-lg hover:from-cyan-500 hover:to-purple-500 transition-all duration-300 shadow-lg hover:shadow-cyan-500/50 border border-cyan-400/30"
              >
                {selectedPostes.size === allPostes.length ? 'Tout désélectionner' : 'Tout sélectionner'}
              </button>
            </div>
          </div>

          {/* Barre de recherche */}
          <div className="mb-6">
            <div className="relative">
              <input
                type="text"
                placeholder="🔍 Rechercher un poste..."
                value={searchPoste}
                onChange={(e) => setSearchPoste(e.target.value)}
                className="w-full px-5 py-3 glass rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-cyan-400/50 text-white placeholder-gray-400 border border-cyan-500/20 transition-all duration-300"
              />
              {searchPoste && (
                <button
                  onClick={() => setSearchPoste('')}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
                >
                  ✕
                </button>
              )}
            </div>
          </div>

          {/* Badges de filtres */}
          <div className="max-h-64 overflow-y-auto p-3 mb-6 custom-scrollbar">
            <div className="flex flex-wrap gap-3">
              {filteredPostes.length === 0 ? (
                <div className="w-full text-center py-8">
                  <p className="text-gray-400 text-sm">Aucun poste trouvé</p>
                </div>
              ) : (
                filteredPostes.map((poste) => {
                  const isSelected = selectedPostes.has(poste);
                  const count = posteCounts[poste] || 0;
                  return (
                    <button
                      key={poste}
                      onClick={() => handlePosteToggle(poste)}
                      className={`
                        px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300
                        flex items-center gap-2 border-2 relative overflow-hidden group
                        ${isSelected
                          ? 'bg-gradient-to-r from-cyan-600 to-purple-600 text-white border-cyan-400 shadow-lg glow-cyan transform scale-105'
                          : 'glass text-gray-300 border-cyan-500/20 hover:border-cyan-400/50 hover:bg-cyan-500/10 hover:text-white'
                        }
                      `}
                    >
                      {isSelected && (
                        <div className="absolute inset-0 bg-gradient-to-r from-cyan-400/20 to-purple-400/20 animate-pulse"></div>
                      )}
                      <span className="relative z-10">{poste}</span>
                      <span className={`
                        px-2.5 py-1 rounded-lg text-xs font-bold relative z-10
                        ${isSelected
                          ? 'bg-white/20 text-white backdrop-blur-sm'
                          : 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30'
                        }
                      `}>
                        {count}
                      </span>
                    </button>
                  );
                })
              )}
            </div>
          </div>

          <div className="flex flex-col sm:flex-row gap-6 items-end">
            <div className="flex-1">
              <label htmlFor="count" className="block text-sm font-semibold text-cyan-300 mb-3">
                Nombre de personnes à extraire
              </label>
              <input
                id="count"
                type="number"
                min="1"
                max={filteredPeople.length}
                value={selectedCount}
                onChange={(e) => setSelectedCount(parseInt(e.target.value) || 1)}
                className="w-full px-5 py-3 glass rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-cyan-400/50 text-white bg-white/5 border border-cyan-500/20 transition-all duration-300"
              />
              <p className="text-sm text-gray-400 mt-2 font-medium">
                {selectedPostes.size === 0 ? (
                  <>📊 Total disponible: <span className="text-cyan-400 font-bold">{people.length}</span> personnes</>
                ) : (
                  <>🎯 Total filtré: <span className="text-cyan-400 font-bold">{filteredPeople.length}</span> personne{filteredPeople.length > 1 ? 's' : ''} <span className="text-gray-500">(sur {people.length})</span></>
                )}
              </p>
            </div>
            <button
              onClick={handleRandomize}
              disabled={filteredPeople.length === 0}
              className="px-8 py-4 bg-gradient-to-r from-cyan-600 via-purple-600 to-pink-600 text-white font-bold rounded-xl hover:from-cyan-500 hover:via-purple-500 hover:to-pink-500 focus:outline-none transition-all duration-300 shadow-lg hover:shadow-cyan-500/50 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:from-cyan-600 disabled:hover:via-purple-600 disabled:hover:to-pink-600 border border-cyan-400/30 relative overflow-hidden group"
            >
              <span className="relative z-10 flex items-center gap-2">
                <span>🎲</span>
                <span>Extraire aléatoirement</span>
              </span>
              <div className="absolute inset-0 bg-gradient-to-r from-cyan-400/20 to-purple-400/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>
          </div>
        </div>

        {showResults && randomPeople.length > 0 && (
          <div className="glass-strong rounded-2xl p-8 mb-8 shadow-2xl border border-purple-500/20">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-1 h-8 bg-gradient-to-b from-cyan-400 to-purple-400 rounded-full"></div>
              <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400">
                Résultats sélectionnés
              </h2>
              <span className="px-3 py-1 glass rounded-lg text-cyan-300 font-semibold border border-cyan-500/30">
                {randomPeople.length} personne{randomPeople.length > 1 ? 's' : ''}
              </span>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {randomPeople.map((person, index) => (
                <div
                  key={`${person.nom}-${index}`}
                  className="glass rounded-xl p-5 hover:bg-white/10 border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/20 group"
                  style={{ animationDelay: `${index * 50}ms` }}
                >
                  <h3 className="font-bold text-lg text-white mb-2 group-hover:text-cyan-300 transition-colors">
                    {person.nom}
                  </h3>
                  {person.description && (
                    <p className="text-sm text-gray-300 mb-3">{person.description}</p>
                  )}
                  <span className="inline-block px-3 py-1 text-xs rounded-lg bg-gradient-to-r from-cyan-600/30 to-purple-600/30 text-cyan-300 border border-cyan-500/30 font-semibold">
                    {person.type}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="glass-strong rounded-2xl p-8 shadow-2xl border border-purple-500/20">
          <div className="flex items-center gap-3 mb-6">
            <div className="w-1 h-8 bg-gradient-to-b from-purple-400 to-pink-400 rounded-full"></div>
            <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">
              {selectedPostes.size === 0 
                ? `Toutes les personnes`
                : `Personnes filtrées`
              }
            </h2>
            <span className="px-3 py-1 glass rounded-lg text-purple-300 font-semibold border border-purple-500/30">
              {filteredPeople.length} / {people.length}
            </span>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-h-96 overflow-y-auto custom-scrollbar p-2">
            {filteredPeople.map((person, index) => (
              <div
                key={`${person.nom}-${index}`}
                className={`glass rounded-xl p-4 hover:bg-white/10 border transition-all duration-300 hover:shadow-lg ${
                  selectedPostes.size > 0 && selectedPostes.has(person.description)
                    ? 'border-cyan-400/50 bg-cyan-500/10 hover:border-cyan-400 hover:shadow-cyan-500/20'
                    : 'border-purple-500/20 hover:border-purple-400/50'
                }`}
              >
                <h3 className="font-semibold text-white mb-1">{person.nom}</h3>
                {person.description && (
                  <p className="text-sm text-gray-400 mt-1">{person.description}</p>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}