// Fichier : src/pages/InfrastructureEvolution.tsx

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useEvolutionRequest } from '@/hooks/useEvolutionRequest';

import { BackButton } from '@/components/ui/BackButton';
import { EmptyState } from '@/components/ui/EmptyState';

// Nos nouveaux composants
import { EvolutionOptionCard } from '@/components/widgets/EvolutionOptionCard';
import { EvolutionFilterBar } from '@/components/widgets/EvolutionFilterBar';

import { EVOLUTION_OPTIONS, type EvolutionOption } from '@/data/evolutionOptions';
import SupportFooterWidget from '@/components/widgets/SupportFooterWidget';

export const InfrastructureEvolution: React.FC = () => {
  const navigate = useNavigate();
  const { submitRequest, isSubmitting, submitSuccess, error } = useEvolutionRequest();
  
  const [selectedCategory, setSelectedCategory] = useState<string>('all');
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);

  // Redirection automatique
  useEffect(() => {
    if (submitSuccess) {
      const timer = setTimeout(() => navigate('/dashboard'), 3000);
      return () => clearTimeout(timer);
    }
  }, [submitSuccess, navigate]);

  // Logique de filtrage
  const filteredOptions = EVOLUTION_OPTIONS.filter((opt) => {
    const matchesCategory = selectedCategory === 'all' || opt.category === selectedCategory;
    const matchesSearch = opt.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          opt.description.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  const handleSelectOption = (option: EvolutionOption) => {
    setSelectedOptionId(option.id);
    submitRequest(option.subject, option.payloadDescription);
  };

  return (
    <div className="max-w-5xl mx-auto py-8 px-4 sm:px-6">
      
      {/* EN-TÊTE DE LA PAGE */}
      <div className="mb-8">
        <div className="flex items-center justify-between mb-2">
          <BackButton to="/dashboard" label="Retour au tableau de bord" />
          <span className="text-xs font-mono font-bold tracking-widest text-slate-400 uppercase">
            AEGIS • Catalogue Projets
          </span>
        </div>
        <h1 className="text-3xl font-extrabold text-slate-900 tracking-tight">
          Évolution & Extension de l'Infrastructure
        </h1>
        <p className="text-slate-600 mt-2 text-base">
          Sélectionnez une initiative stratégique. Votre demande ouvrira immédiatement un ticket projet sécurisé auprès de votre référent technique GISE.
        </p>
      </div>

      {/* ÉTAT DE SUCCÈS */}
      {submitSuccess ? (
        <div className="bg-white rounded-xl border border-emerald-200 shadow-sm p-12 text-center max-w-xl mx-auto my-12 animate-in fade-in zoom-in-95 duration-200">
          <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
            <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <h2 className="text-2xl font-bold text-slate-900 mb-2">Demande d'évolution enregistrée</h2>
          <p className="text-slate-600 text-sm mb-6 leading-relaxed">
            Votre ticket projet a été chiffré et transmis à notre équipe d'ingénierie. Un expert GISE analyse vos prérequis et reprendra contact avec vous sous 24h ouvrées.
          </p>
          <p className="text-xs text-slate-400 font-mono">Redirection automatique vers le Trust Center...</p>
        </div>
      ) : (
        <>
          {/* BARRE DE RECHERCHE ET FILTRES */}
          <EvolutionFilterBar 
            selectedCategory={selectedCategory}
            onSelectCategory={setSelectedCategory}
            searchQuery={searchQuery}
            onSearchChange={setSearchQuery}
          />

          {/* AFFICHAGE DES ERREURS */}
          {error && (
            <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm font-medium">
              {error}
            </div>
          )}

          {/* GRILLE DES OPTIONS */}
          {filteredOptions.length === 0 ? (
            <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
              <EmptyState message="Aucune initiative ne correspond à votre recherche." />
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
              {filteredOptions.map((option) => (
                <EvolutionOptionCard
                  key={option.id}
                  option={option}
                  isSubmitting={isSubmitting && selectedOptionId === option.id}
                  isDisabled={isSubmitting} // On bloque toutes les cartes pendant un envoi
                  onSelect={handleSelectOption}
                />
              ))}
            </div>
          )}

          {/* PIED DE PAGE D'ASSISTANCE */}
          <SupportFooterWidget />
        </>
      )}
    </div>
  );
};

export default InfrastructureEvolution;