import { motion } from 'framer-motion'
import { Button } from '@/components/ui/button'
import { RotateCw, ArrowLeft, CheckCircle2, XCircle } from 'lucide-react'
import { useNavigate } from 'react-router'

interface EndCardProps {
    score: number
    total: number
    streak: number
    onRestart: () => void
    setId: string
}

export const EndCard = ({ score, total, streak, onRestart, setId }: EndCardProps) => {
    const navigate = useNavigate()
    const percentage = Math.round((score / total) * 100)

    return (
        <motion.div
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            className="flex flex-col items-center justify-center min-h-[60vh] w-full max-w-2xl mx-auto p-4"
        >
            <div className="text-center w-full">
                <h1 className="text-4xl md:text-6xl font-black tracking-tight mb-2">
                    {percentage}%
                </h1>
                <p className="text-muted-foreground uppercase tracking-widest font-bold mb-8">
                    Final Score
                </p>

                {streak >= 5 && (
                    <div className="mb-8 inline-block animate-bounce">
                        <span className="bg-orange-100 text-orange-600 px-4 py-2 rounded-full font-bold border border-orange-200">
                            🔥 Highest Streak: {streak}
                        </span>
                    </div>
                )}

                <div className="grid gap-4 max-w-sm mx-auto w-full">
                    <div className="grid grid-cols-2 gap-4">
                        <div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-xl border border-green-100 dark:border-green-800">
                            <span className="block text-2xl font-bold text-green-600 dark:text-green-400">{score}</span>
                            <span className="text-xs uppercase font-bold text-green-600/60 dark:text-green-400/60">Correct</span>
                        </div>
                        <div className="bg-red-50 dark:bg-red-900/20 p-4 rounded-xl border border-red-100 dark:border-red-800">
                            <span className="block text-2xl font-bold text-red-600 dark:text-red-400">{total - score}</span>
                            <span className="text-xs uppercase font-bold text-red-600/60 dark:text-red-400/60">Incorrect</span>
                        </div>
                    </div>

                    <div className="h-px bg-border my-2" />

                    <div className="grid gap-3">
                        <Button onClick={onRestart} className="w-full" size="lg">
                            <RotateCw className="w-4 h-4 mr-2" />
                            Restart Session
                        </Button>
                        <Button onClick={() => navigate(`/flashcards/${setId}`)} variant="outline" className="w-full" size="lg">
                            <ArrowLeft className="w-4 h-4 mr-2" />
                            Back to Set
                        </Button>
                    </div>
                </div>
            </div>
        </motion.div >
    )
}
