import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { GraduationCap, Play, Sparkles } from "lucide-react";
import AiTipBanner from "@/components/ai/AiTipBanner";

export default function ExamPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] gap-4 max-w-md mx-auto">
      <AiTipBanner context="exam" variant="recommendation" />

      <Card className="border-0 shadow-sm w-full">
        <CardContent className="p-8 text-center space-y-6">
          <div className="mx-auto h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center">
            <GraduationCap className="h-8 w-8 text-primary" />
          </div>
          <div>
            <h2 className="text-xl font-bold mb-1">Ready to Start?</h2>
            <p className="text-muted-foreground text-sm">IELTS Academic Mock Exam</p>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Student</span>
              <span className="font-medium">Sarah Johnson</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Level</span>
              <Badge variant="outline">B2</Badge>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Modules</span>
              <span className="font-medium">4</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Duration</span>
              <span className="font-medium">180 min</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Mode</span>
              <Badge variant="secondary">Practice</Badge>
            </div>
          </div>
          <div className="rounded-lg bg-primary/5 border border-primary/20 p-3 text-left">
            <p className="text-xs font-semibold text-primary flex items-center gap-1 mb-1"><Sparkles className="h-3 w-3" /> AI Pre-Exam Tip</p>
            <p className="text-xs text-muted-foreground">Your last mock scored 7.5. To target 8.0, focus on time management in Writing Task 2 — you spent 45 min last time vs recommended 40 min.</p>
          </div>
          <Button className="w-full" size="lg">
            <Play className="h-4 w-4 mr-2" /> Begin Exam
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}