import React, { useState, useEffect, useMemo } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  GraduationCap, 
  Layers, 
  ArrowLeft, 
  ChevronLeft, 
  ChevronRight, 
  RotateCcw, 
  CheckCircle2, 
  X, 
  Inbox, 
  BookOpen,
  Calendar,
  Sparkles,
  Award
} from 'lucide-react';
import { Note, Flashcard, FlashcardDeck, FlashcardEvaluation } from '../types';

interface RevisionViewProps {
  notes: Note[];
  flashcards: Flashcard[];
  onUpdateFlashcards: (updated: Flashcard[]) => void;
  onSelectNote: (noteId: string) => void;
  onOpenSidebar?: () => void;
  initialActiveDeckId?: string | null;
  onClearActiveDeckId?: () => void;
}

export const RevisionView: React.FC<RevisionViewProps> = ({
  notes,
  flashcards,
  onUpdateFlashcards,
  onSelectNote,
  onOpenSidebar,
  initialActiveDeckId,
  onClearActiveDeckId
}) => {
  // Active states
  const [activeDeckId, setActiveDeckId] = useState<string | null>(initialActiveDeckId || null);
  const [isSessionActive, setIsSessionActive] = useState(false);
  const [isSessionFinished, setIsSessionFinished] = useState(false);
  
  // Active review states
  const [currentCardIndex, setCurrentCardIndex] = useState(0);
  const [isFlipped, setIsFlipped] = useState(false);
  const [sessionCards, setSessionCards] = useState<Flashcard[]>([]);
  const [sessionHistory, setSessionHistory] = useState<Record<string, FlashcardEvaluation>>({});
  const [onlyFailedCardsSession, setOnlyFailedCardsSession] = useState(false);

  // Sync initial deck selection from outer prop/reminder
  useEffect(() => {
    if (initialActiveDeckId) {
      setActiveDeckId(initialActiveDeckId);
      // Auto-trigger session
      const deckCards = flashcards.filter(c => c.noteId === initialActiveDeckId);
      if (deckCards.length > 0) {
        setSessionCards([...deckCards]);
        setCurrentCardIndex(0);
        setIsFlipped(false);
        setIsSessionActive(true);
        setIsSessionFinished(false);
        setSessionHistory({});
      }
    }
  }, [initialActiveDeckId, flashcards]);

  // Compute Decks based on current flashcards and notes
  const decks = useMemo(() => {
    const deckMap = new Map<string, Flashcard[]>();
    flashcards.forEach(card => {
      if (!deckMap.has(card.noteId)) {
        deckMap.set(card.noteId, []);
      }
      deckMap.get(card.noteId)!.push(card);
    });

    const list: FlashcardDeck[] = [];
    deckMap.forEach((cardsInDeck, noteId) => {
      const parentNote = notes.find(n => n.id === noteId);
      if (!parentNote || parentNote.isDeleted) return;

      // Find min nextReviewDate
      let minDate = cardsInDeck[0]?.nextReviewDate || new Date().toISOString();
      cardsInDeck.forEach(c => {
        if (c.nextReviewDate < minDate) {
          minDate = c.nextReviewDate;
        }
      });

      // Mastery score: portion of mastered/sure cards in last evaluation
      const totalCards = cardsInDeck.length;
      let masteredCount = 0;
      cardsInDeck.forEach(c => {
        if (c.mastered) masteredCount++;
      });

      list.push({
        noteId,
        title: parentNote.title,
        cardsCount: totalCards,
        nextReviewDate: minDate,
        masteryScore: totalCards > 0 ? masteredCount / totalCards : 0,
        cards: cardsInDeck
      });
    });

    // Sort decks: first those that need review (past nextReviewDate), then alphabetical
    const nowStr = new Date().toISOString();
    return list.sort((a, b) => {
      const aNeeds = a.nextReviewDate <= nowStr;
      const bNeeds = b.nextReviewDate <= nowStr;
      if (aNeeds && !bNeeds) return -1;
      if (!aNeeds && bNeeds) return 1;
      return a.title.localeCompare(b.title);
    });
  }, [flashcards, notes]);

  const activeDeck = useMemo(() => {
    return decks.find(d => d.noteId === activeDeckId);
  }, [decks, activeDeckId]);

  // Launch review session for a deck
  const handleStartReview = (noteId: string, failedOnly = false) => {
    const deck = decks.find(d => d.noteId === noteId);
    if (!deck) return;

    let cardsToReview = [...deck.cards];
    if (failedOnly) {
      // Filter for cards graded as 'fail' or 'hesitant' in session history, or simply subset of session cards
      const failedIds = Object.keys(sessionHistory).filter(id => sessionHistory[id] === 'fail');
      cardsToReview = deck.cards.filter(c => failedIds.includes(c.id));
      if (cardsToReview.length === 0) {
        // Fallback to active session's rated fail
        cardsToReview = deck.cards.filter(c => sessionHistory[c.id] === 'fail');
      }
      setOnlyFailedCardsSession(true);
    } else {
      setOnlyFailedCardsSession(false);
    }

    if (cardsToReview.length === 0) return;

    // Shuffle cards for better learning cognitive effect
    const shuffled = [...cardsToReview].sort(() => Math.random() - 0.5);

    setActiveDeckId(noteId);
    setSessionCards(shuffled);
    setCurrentCardIndex(0);
    setIsFlipped(false);
    setIsSessionActive(true);
    setIsSessionFinished(false);
    setSessionHistory({});
  };

  const handleCardFlip = () => {
    setIsFlipped(!isFlipped);
  };

  // Keyboard support during review
  useEffect(() => {
    if (!isSessionActive || isSessionFinished) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.code === 'Space') {
        e.preventDefault();
        handleCardFlip();
      } else if (isFlipped) {
        if (e.key === '1') {
          handleEvaluate('fail');
        } else if (e.key === '2') {
          handleEvaluate('hesitant');
        } else if (e.key === '3') {
          handleEvaluate('sure');
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isSessionActive, isSessionFinished, isFlipped, currentCardIndex, sessionCards]);

  // Simple Spaced Repetition Logic (Leitner system variation)
  const handleEvaluate = (evaluation: FlashcardEvaluation) => {
    const currentCard = sessionCards[currentCardIndex];
    if (!currentCard) return;

    // Record evaluation in session context
    setSessionHistory(prev => ({
      ...prev,
      [currentCard.id]: evaluation
    }));

    // Calculate new intervals
    let interval = currentCard.intervalDays || 1;
    let ease = currentCard.easeFactor || 2.5;
    let mastered = currentCard.mastered || false;

    if (evaluation === 'fail') {
      interval = 1; // back to review tomorrow
      ease = Math.max(1.3, ease - 0.2);
      mastered = false;
    } else if (evaluation === 'hesitant') {
      interval = Math.max(2, Math.floor(interval * 1.2));
      mastered = false;
    } else { // sure
      interval = Math.ceil(interval * ease);
      ease = Math.min(3.5, ease + 0.15);
      mastered = true;
    }

    // Calculate next review date
    const nextDate = new Date();
    nextDate.setDate(nextDate.getDate() + interval);

    // Build historical entry
    const historyItem = {
      reviewedAt: new Date().toISOString(),
      evaluation
    };

    const updatedCard: Flashcard = {
      ...currentCard,
      intervalDays: interval,
      nextReviewDate: nextDate.toISOString(),
      easeFactor: ease,
      mastered,
      history: [...(currentCard.history || []), historyItem]
    };

    // Propagate up to global storage
    const updatedGlobal = flashcards.map(c => c.id === currentCard.id ? updatedCard : c);
    onUpdateFlashcards(updatedGlobal);

    // Update in-place session cards to preserve intermediate updates
    setSessionCards(prev => prev.map((c, i) => i === currentCardIndex ? updatedCard : c));

    // Progress flow
    if (currentCardIndex < sessionCards.length - 1) {
      setTimeout(() => {
        setCurrentCardIndex(prev => prev + 1);
        setIsFlipped(false);
      }, 300);
    } else {
      setTimeout(() => {
        setIsSessionFinished(true);
      }, 300);
    }
  };

  const handleNext = () => {
    if (currentCardIndex < sessionCards.length - 1) {
      setCurrentCardIndex(currentCardIndex + 1);
      setIsFlipped(false);
    }
  };

  const handlePrev = () => {
    if (currentCardIndex > 0) {
      setCurrentCardIndex(currentCardIndex - 1);
      setIsFlipped(false);
    }
  };

  const handleExitSession = () => {
    setIsSessionActive(false);
    setIsSessionFinished(false);
    onClearActiveDeckId?.();
  };

  // Statistics summaries
  const finishedStats = useMemo(() => {
    if (sessionCards.length === 0) return { sureCount: 0, hesitantCount: 0, failCount: 0, percentage: 0 };
    
    let sureCount = 0;
    let hesitantCount = 0;
    let failCount = 0;

    sessionCards.forEach(c => {
      const evaluation = sessionHistory[c.id];
      if (evaluation === 'sure') sureCount++;
      else if (evaluation === 'hesitant') hesitantCount++;
      else if (evaluation === 'fail') failCount++;
    });

    const totalRated = Object.keys(sessionHistory).length || 1;
    const percentage = Math.round((sureCount / totalRated) * 100);

    return {
      sureCount,
      hesitantCount,
      failCount,
      percentage
    };
  }, [sessionCards, sessionHistory]);

  const formattingDate = (isoStr: string) => {
    const diff = new Date(isoStr).getTime() - Date.now();
    if (diff <= 0) return 'Dû aujourd\'hui';
    const days = Math.ceil(diff / (24 * 60 * 60 * 1000));
    return `Dans ${days}j`;
  };

  return (
    <div className="h-full flex flex-col bg-white dark:bg-dark-paper overflow-y-auto w-full transition-colors duration-500">
      
      {/* 1. Header Toolbar */}
      <div className="px-6 sm:px-12 py-6 flex items-center justify-between sticky top-0 bg-white/90 dark:bg-dark-paper/90 backdrop-blur-sm z-40 border-b border-border gap-4">
        <div className="flex items-center gap-4">
          {onOpenSidebar && (
            <button 
              onClick={onOpenSidebar}
              className="lg:hidden p-2 -ml-2 text-ink dark:text-dark-ink hover:bg-black/5 rounded-lg transition-colors"
            >
              <ChevronLeft size={20} />
            </button>
          )}

          {isSessionActive ? (
            <button 
              onClick={handleExitSession}
              className="flex items-center gap-2 text-concrete hover:text-ink dark:text-dark-concrete dark:hover:text-dark-ink transition-colors"
            >
              <ArrowLeft size={16} />
              <span className="text-xs font-bold uppercase tracking-widest">Abandonner</span>
            </button>
          ) : (
            <div className="flex items-center gap-2.5">
              <GraduationCap className="text-accent shrink-0" size={20} />
              <h2 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">Focal de Révision</h2>
            </div>
          )}
        </div>

        {isSessionActive && activeDeck && (
          <div className="text-[11px] font-mono bg-paper dark:bg-dark-paper text-concrete border border-border px-3 py-1.5 rounded-full lowercase tracking-wider">
            deck : <span className="font-bold text-accent">{activeDeck.title}</span>
          </div>
        )}
      </div>

      {/* 2. Main Display Area */}
      <div className="flex-1 flex flex-col items-center justify-center p-6 md:p-12 max-w-5xl mx-auto w-full">
        <AnimatePresence mode="wait">
          
          {/* SCREEN A: Decks Collection list view */}
          {!isSessionActive && (
            <motion.div 
              key="decks-list"
              initial={{ opacity: 0, y: 15 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -15 }}
              className="w-full space-y-10"
            >
              <div className="space-y-2">
                <h1 className="text-4xl font-serif font-black text-ink dark:text-dark-ink">Decks de Révision Active</h1>
                <p className="text-sm font-light text-muted-ink dark:text-dark-muted max-w-2xl">
                  Révisez vos connaissances de manière ciblée grâce au système d'espacement algorithmique Leitner. L’apprentissage actif commence ici.
                </p>
              </div>

              {decks.length > 0 ? (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {decks.map(deck => {
                    const nowStr = new Date().toISOString();
                    const dueCount = deck.cards.filter(c => c.nextReviewDate <= nowStr).length;

                    return (
                      <div 
                        key={deck.noteId}
                        id={`deck-card-${deck.noteId}`}
                        className="p-6 bg-[#FCFCFA] dark:bg-white/[0.02] border border-border/60 hover:border-accent/40 rounded-2xl flex flex-col justify-between gap-5 transition-all shadow-sm hover:shadow-xs relative group"
                      >
                        <div className="space-y-4">
                          <div className="flex justify-between items-start gap-3">
                            <div className="space-y-1 truncate">
                              <h3 className="text-lg font-serif font-semibold text-ink dark:text-dark-ink truncate group-hover:text-accent transition-colors">
                                {deck.title}
                              </h3>
                              <p className="text-xs text-concrete flex items-center gap-1">
                                <Layers size={12} />
                                <span>{deck.cardsCount} cartes de mémoire</span>
                              </p>
                            </div>

                            {/* Circular progress bar rendering */}
                            <div className="relative w-12 h-12 flex items-center justify-center shrink-0">
                              <svg className="w-full h-full transform -rotate-90">
                                <circle cx="24" cy="24" r="19" stroke="currentColor" strokeWidth="2" className="text-zinc-100 dark:text-zinc-800" fill="transparent" />
                                <circle cx="24" cy="24" r="19" stroke="currentColor" strokeWidth="3" className="text-sage" fill="transparent" strokeDasharray={2 * Math.PI * 19} strokeDashoffset={2 * Math.PI * 19 * (1 - deck.masteryScore)} />
                              </svg>
                              <span className="absolute text-[10px] font-mono font-black text-sage">
                                {Math.round(deck.masteryScore * 100)}%
                              </span>
                            </div>
                          </div>

                          <div className="flex flex-wrap gap-2 items-center text-[10.5px] font-medium text-concrete pt-1">
                            {dueCount > 0 ? (
                              <span className="bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/15 px-2.5 py-1 rounded-full flex items-center gap-1 font-bold animate-pulse">
                                {dueCount} à réviser
                              </span>
                            ) : (
                              <span className="bg-sage/10 text-sage dark:text-sage border border-sage/15 px-2.5 py-1 rounded-full flex items-center gap-1 font-bold">
                                À jour
                              </span>
                            )}
                            <span className="bg-slate-500/5 dark:bg-white/5 border border-border px-2.5 py-1 rounded-full flex items-center gap-1 font-mono">
                              <Calendar size={10} />
                              Prochain : {formattingDate(deck.nextReviewDate)}
                            </span>
                          </div>
                        </div>

                        <div className="flex gap-2 pt-1 border-t border-border/40">
                          <button
                            onClick={() => onSelectNote(deck.noteId)}
                            className="flex-1 h-9 flex items-center justify-center text-[10.5px] uppercase tracking-wider font-bold text-muted-ink hover:text-ink dark:text-dark-muted dark:hover:text-dark-ink border border-border rounded-lg bg-white/50 dark:bg-transparent hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
                          >
                            Ouvrir note
                          </button>
                          <button
                            onClick={() => handleStartReview(deck.noteId)}
                            className="flex-1 h-9 flex items-center justify-center bg-accent text-white text-[10.5px] uppercase tracking-wider font-bold rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1.5 shadow-sm shadow-accent/10"
                          >
                            <GraduationCap size={14} />
                            Réviser
                          </button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center text-center p-16 border border-dashed border-border/60 rounded-3xl bg-[#FAF9F6]/30 py-24">
                  <div className="w-16 h-16 rounded-2xl bg-accent/5 text-accent flex items-center justify-center mb-6">
                    <GraduationCap size={32} />
                  </div>
                  <h3 className="text-2xl font-serif font-black text-ink dark:text-dark-ink mb-2">Aucun deck de flashcards</h3>
                  <p className="text-sm text-concrete max-w-md font-light mb-8">
                    Démarrez votre apprentissage en générant des flashcards à l'aide de l'IA directement depuis la barre d'outils de vos notes architecturales.
                  </p>
                  <button
                    onClick={() => onSelectNote('n1')}
                    className="h-11 px-6 bg-ink dark:bg-ochre text-paper dark:text-ink rounded-xl text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-all flex items-center gap-2"
                  >
                    <BookOpen size={15} />
                    Essayer sur la Note "Grid Systems"
                  </button>
                </div>
              )}
            </motion.div>
          )}

          {/* SCREEN B: Active Deck session review state */}
          {isSessionActive && !isSessionFinished && (
            <motion.div 
              key="active-session"
              initial={{ opacity: 0, scale: 0.98 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.98 }}
              className="w-full max-w-2xl flex flex-col items-center gap-10"
            >
              {/* Header navigation bar */}
              <div className="w-full flex items-center justify-between px-2 text-xs font-medium text-concrete">
                <button
                  onClick={handlePrev}
                  disabled={currentCardIndex === 0}
                  className="flex items-center gap-1 hover:text-ink dark:hover:text-dark-ink disabled:opacity-30 transition-colors cursor-pointer"
                >
                  <ChevronLeft size={16} />
                  <span>Précédent</span>
                </button>

                <div className="px-3.5 py-1.5 bg-slate-100 dark:bg-white/5 border border-border/40 text-[11px] font-mono tracking-widest font-bold rounded-full text-ink dark:text-dark-ink">
                  {currentCardIndex + 1} / {sessionCards.length}
                </div>

                <button
                  onClick={handleNext}
                  disabled={currentCardIndex === sessionCards.length - 1}
                  className="flex items-center gap-1 hover:text-ink dark:hover:text-dark-ink disabled:opacity-30 transition-colors cursor-pointer"
                >
                  <span>Suivant</span>
                  <ChevronRight size={16} />
                </button>
              </div>

              {/* Centered Flashcard */}
              <div 
                id="flashcard-container"
                onClick={handleCardFlip}
                className="w-[480px] h-[280px] cursor-pointer select-none perspective group"
              >
                <div className={`relative w-full h-full transition-transform duration-500 transform-style preserve-3d ${isFlipped ? 'rotate-y-180' : ''}`}>
                  
                  {/* RECTO - Front */}
                  <div className="absolute inset-0 w-full h-full backface-hidden bg-[#FAF9F5] dark:bg-slate-900 border border-border hover:border-accent/40 rounded-2xl p-8 flex flex-col justify-between shadow-md transition-colors">
                    <div className="flex justify-between items-start text-[10px] font-mono text-concrete/75 uppercase tracking-widest">
                      <span>Recto : Question</span>
                      <span className="bg-slate-200/50 dark:bg-white/10 px-2 py-0.5 rounded text-[8.5px]">Cliquer pour tourner</span>
                    </div>

                    <div className="flex-1 flex items-center justify-center p-2 text-center">
                      <p className="text-xl font-serif font-black text-ink dark:text-dark-ink leading-relaxed">
                        {sessionCards[currentCardIndex]?.question}
                      </p>
                    </div>

                    <div className="text-[10px] text-center text-concrete italic font-light pt-2 shrink-0 border-t border-border/10">
                      Raccourci : [Espace] pour révéler la réponse
                    </div>
                  </div>

                  {/* VERSO - Back */}
                  <div className="absolute inset-0 w-full h-full backface-hidden rotate-y-180 bg-white dark:bg-paper dark:text-ink border border-border rounded-2xl p-8 flex flex-col justify-between shadow-xl">
                    <div className="flex justify-between items-start text-[10px] font-mono text-concrete/75 uppercase tracking-widest">
                      <span className="text-accent font-bold">Verso : Réponse</span>
                      <span className="bg-accent/10 px-2 py-0.5 rounded text-[8.5px] text-accent">Duo Mémoire</span>
                    </div>

                    <div className="flex-1 flex items-center justify-center p-2 text-center overflow-y-auto max-h-[160px] custom-scrollbar">
                      <p className="text-sm font-light text-ink leading-relaxed">
                        {sessionCards[currentCardIndex]?.answer}
                      </p>
                    </div>

                    <div className="text-[10px] text-center text-concrete/60 italic font-light pt-2 shrink-0 border-t border-border/15">
                      Raccourcis : [1] Raté, [2] Hésitant, [3] Sûr
                    </div>
                  </div>

                </div>
              </div>

              {/* Grading Buttons - Rendered after Verso is revealed */}
              <div className="h-16 flex items-center justify-center w-full">
                <AnimatePresence mode="wait">
                  {isFlipped ? (
                    <motion.div 
                      key="grading-expanded"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      className="flex items-center gap-4 w-full justify-center max-w-md"
                    >
                      <button
                        id="grade-btn-fail"
                        onClick={(e) => { e.stopPropagation(); handleEvaluate('fail'); }}
                        className="flex-1 flex flex-col items-center justify-center h-14 rounded-2xl border border-rust/10 bg-rust/10 font-black text-rust cursor-pointer hover:bg-rust/15 transition-all text-xs"
                      >
                        <span className="text-sm">Raté</span>
                        <span className="opacity-70 text-[9px] font-light font-mono mt-0.5">Touche 1</span>
                      </button>

                      <button
                        id="grade-btn-hesitant"
                        onClick={(e) => { e.stopPropagation(); handleEvaluate('hesitant'); }}
                        className="flex-1 flex flex-col items-center justify-center h-14 rounded-2xl border border-ochre/15 bg-ochre/10 font-black text-ochre cursor-pointer hover:bg-ochre/15 transition-all text-xs"
                      >
                        <span className="text-sm">Hésitant</span>
                        <span className="opacity-70 text-[9px] font-light font-mono mt-0.5">Touche 2</span>
                      </button>

                      <button
                        id="grade-btn-sure"
                        onClick={(e) => { e.stopPropagation(); handleEvaluate('sure'); }}
                        className="flex-1 flex flex-col items-center justify-center h-14 rounded-2xl border border-sage/15 bg-sage/10 font-black text-sage cursor-pointer hover:bg-sage/15 transition-all text-xs"
                      >
                        <span className="text-sm">Sûr</span>
                        <span className="opacity-70 text-[9px] font-light font-mono mt-0.5">Touche 3</span>
                      </button>
                    </motion.div>
                  ) : (
                    <motion.button
                      key="reveal-btn"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      onClick={handleCardFlip}
                      className="h-12 px-8 bg-ink dark:bg-dark-ink text-paper dark:text-dark-paper text-xs uppercase font-bold tracking-widest rounded-xl hover:opacity-90 active:scale-98 transition-all shadow-md shrink-0 cursor-pointer"
                    >
                      Révéler la réponse (Espace)
                    </motion.button>
                  )}
                </AnimatePresence>
              </div>
            </motion.div>
          )}

          {/* SCREEN C: Finishing dashboard view with Donut Chart and actions */}
          {isSessionFinished && (
            <motion.div 
              key="finished-stats"
              initial={{ opacity: 0, scale: 0.96 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.96 }}
              className="w-full max-w-lg flex flex-col items-center text-center gap-8"
            >
              <div className="space-y-2">
                <div className="w-12 h-12 rounded-full bg-sage/10 text-sage flex items-center justify-center mx-auto mb-3">
                  <Award size={26} />
                </div>
                <h1 className="text-3xl font-serif font-black text-ink dark:text-dark-ink">Félicitations !</h1>
                <p className="text-sm font-light text-muted-ink dark:text-dark-muted">
                  Vous venez de finir votre session de révision de la note active.
                </p>
              </div>

              {/* Custom SVG Donut Chart showing score */}
              <div className="relative w-44 h-44 flex items-center justify-center my-2">
                <svg className="w-full h-full transform -rotate-90">
                  <circle cx="88" cy="88" r="64" stroke="currentColor" strokeWidth="12" className="text-zinc-100 dark:text-zinc-900" fill="transparent" />
                  <circle cx="88" cy="88" r="64" stroke="currentColor" strokeWidth="12" className="text-sage" fill="transparent" strokeDasharray={2 * Math.PI * 64} strokeDashoffset={2 * Math.PI * 64 * (1 - (finishedStats.percentage / 100))} strokeLinecap="round" />
                </svg>
                <div className="absolute inset-0 flex flex-col items-center justify-center">
                  <span className="text-4.5xl font-serif font-black text-ink dark:text-dark-ink leading-none">
                    {finishedStats.percentage}%
                  </span>
                  <p className="text-[10px] uppercase font-bold tracking-widest text-concrete mt-1">Sûr de soi</p>
                </div>
              </div>

              {/* Core Analytics parameters (Stats) */}
              <div className="grid grid-cols-3 gap-4 w-full border-t border-b border-border py-6 select-none bg-[#FCFCFA] dark:bg-white/[0.01] rounded-2xl px-6">
                <div className="space-y-1">
                  <p className="text-2xl font-serif font-bold text-ink dark:text-dark-ink">{sessionCards.length}</p>
                  <p className="text-[10px] uppercase tracking-wide font-medium text-concrete">Révisées</p>
                </div>
                <div className="space-y-1 border-l border-r border-border/60">
                  <p className="text-2xl font-serif font-bold text-rust">{finishedStats.failCount}</p>
                  <p className="text-[10px] uppercase tracking-wide font-medium text-concrete">À revoir</p>
                </div>
                <div className="space-y-1">
                  <p className="text-2xl font-serif font-bold text-sage">{finishedStats.sureCount}</p>
                  <p className="text-[10px] uppercase tracking-wide font-medium text-concrete">Maîtrisées</p>
                </div>
              </div>

              <div className="flex flex-col sm:flex-row gap-3 w-full">
                <button
                  onClick={handleExitSession}
                  className="flex-1 h-11 border border-border text-ink dark:text-dark-ink rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-slate-50 dark:hover:bg-white/5 transition-all cursor-pointer"
                >
                  Retour aux decks
                </button>
                {finishedStats.failCount > 0 && (
                  <button
                    onClick={() => handleStartReview(activeDeckId!, true)}
                    className="flex-1 h-11 bg-[#8F4C38] text-white rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-[#8F4C38]/95 transition-all flex items-center justify-center gap-1.5 shadow-sm cursor-pointer"
                  >
                    <RotateCcw size={14} />
                    Ré-réviser les ratées
                  </button>
                )}
              </div>
            </motion.div>
          )}

        </AnimatePresence>
      </div>

    </div>
  );
};