import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { BookOpen, Brain, TrendingUp } from 'lucide-react';

interface SrsStats {
    due: number;
    new: number;
    total_learned: number;
}

export default function SrsIndex({ stats }: { stats: SrsStats }) {
    return (
        <AuthenticatedLayout
            header={
                <h2 className="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
                    Vocabulary SRS
                </h2>
            }
        >
            <Head title="Vocabulary Flashcards" />

            <div className="py-12">
                <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
                        {/* Due Reviews Card */}
                        <Card className="bg-orange-50 border-orange-200">
                            <CardHeader className="flex flex-row items-center justify-between pb-2">
                                <CardTitle className="text-sm font-medium text-orange-900">
                                    Review Due
                                </CardTitle>
                                <Brain className="h-4 w-4 text-orange-600" />
                            </CardHeader>
                            <CardContent>
                                <div className="text-4xl font-bold text-orange-700">{stats.due}</div>
                                <p className="text-xs text-orange-600 mt-1">Cards ready to review</p>
                            </CardContent>
                        </Card>

                        {/* New Cards Card */}
                        <Card className="bg-blue-50 border-blue-200">
                            <CardHeader className="flex flex-row items-center justify-between pb-2">
                                <CardTitle className="text-sm font-medium text-blue-900">
                                    New Cards
                                </CardTitle>
                                <BookOpen className="h-4 w-4 text-blue-600" />
                            </CardHeader>
                            <CardContent>
                                <div className="text-4xl font-bold text-blue-700">{stats.new}</div>
                                <p className="text-xs text-blue-600 mt-1">Ready to learn</p>
                            </CardContent>
                        </Card>

                        {/* Total Learned Card */}
                        <Card className="bg-green-50 border-green-200">
                            <CardHeader className="flex flex-row items-center justify-between pb-2">
                                <CardTitle className="text-sm font-medium text-green-900">
                                    Total Learned
                                </CardTitle>
                                <TrendingUp className="h-4 w-4 text-green-600" />
                            </CardHeader>
                            <CardContent>
                                <div className="text-4xl font-bold text-green-700">{stats.total_learned}</div>
                                <p className="text-xs text-green-600 mt-1">Vocabulary mastered</p>
                            </CardContent>
                        </Card>
                    </div>

                    <div className="flex justify-center">
                        {stats.due + stats.new > 0 ? (
                            <Link href={route('srs.practice')}>
                                <Button size="lg" className="w-full md:w-auto px-12 py-6 text-lg font-bold bg-nihonbuzz-red hover:bg-nihonbuzz-red/90 shadow-xl shadow-nihonbuzz-red/20 rounded-2xl transition-all hover:scale-105 active:scale-95">
                                    Start Session ({stats.due + stats.new})
                                </Button>
                            </Link>
                        ) : (
                            <div className="text-center p-12 bg-gray-50 rounded-3xl border border-gray-100">
                                <h3 className="text-xl font-bold text-gray-800 mb-2">All Caught Up! 🎉</h3>
                                <p className="text-gray-500">You have no cards due for review. Come back later!</p>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
