"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Activity, Clock, PlayCircle, Search } from "lucide-react";

interface TestData {
  id: string;
  title: string;
  type: string;
  exam_pattern: string;
  total_time: number;
  difficulty: string;
}

export default function CBTPage() {
  const [exams, setExams] = useState<TestData[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [targetExam, setTargetExam] = useState("");
  const [attempts, setAttempts] = useState<any[]>([]);

  const userId = "b0e17378-864d-439e-8806-708dc48a891b";

  useEffect(() => {
    async function loadCBTExams() {
      try {
        // 1. Fetch user target exam
        const userRes = await fetch(`http://localhost:8000/api/users/${userId}`);
        if (!userRes.ok) throw new Error("Failed to load user target exam");
        const userData = await userRes.json();
        const pattern = userData.target_exam;
        setTargetExam(pattern === "NEET" ? "NEET" : "JEE Main");

        // 2. Fetch tests filtered by exam
        const testRes = await fetch(`http://localhost:8000/api/tests?exam_pattern=${pattern}`);
        if (!testRes.ok) throw new Error("Failed to fetch tests");
        const testsData = await testRes.json();
        setExams(testsData);

        // 3. Fetch user attempts
        const attemptsRes = await fetch(`http://localhost:8000/api/users/${userId}/attempts`);
        if (attemptsRes.ok) {
          const attemptsData = await attemptsRes.json();
          setAttempts(attemptsData);
        }
      } catch (err) {
        console.error("Error loading exams:", err);
      } finally {
        setLoading(false);
      }
    }
    loadCBTExams();
  }, []);

  const filteredExams = exams.filter(exam =>
    exam.title.toLowerCase().includes(search.toLowerCase())
  );

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString("en-US", { year: 'numeric', month: 'short', day: 'numeric' });
  }

  // Get the highest score for each test if attempted multiple times
  const attemptsByTest = attempts.reduce((acc, curr) => {
    if (!acc[curr.source_id] || acc[curr.source_id].score < curr.score) {
      acc[curr.source_id] = curr;
    }
    return acc;
  }, {} as Record<string, any>);

  return (
    <div className="p-8 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-6xl mx-auto">
      <div className="flex justify-between items-end">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Computer Based Tests (CBT)</h1>
          <p className="text-muted-foreground mt-1 font-medium">
            Real exam environment simulations to conquer {targetExam || "NEET/JEE"}.
          </p>
        </div>
        <div className="relative w-64">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
          <input
            type="text"
            placeholder="Search exams..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full pl-10 pr-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-[#00F0FF] outline-none"
          />
        </div>
      </div>

      <div className="space-y-6">
        <h2 className="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
          <Clock size={20} className="text-[#00F0FF]" /> Upcoming & Active Exams
        </h2>

        {loading ? (
          <div className="py-12 text-center text-muted-foreground">Loading test catalog...</div>
        ) : filteredExams.length === 0 ? (
          <div className="py-12 text-center text-muted-foreground bg-secondary/10 border border-dashed border-border rounded-2xl">
            No active exams found for {targetExam || "your target exam"}. Try switching it in settings!
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredExams.map((exam) => {
              const attempt = attemptsByTest[exam.id];
              const isAttempted = !!attempt;
              
              return (
              <Card key={exam.id} className={`hover:border-[#00F0FF]/50 hover:shadow-[0_0_15px_-5px_#00F0FF] transition-all group ${isAttempted ? 'border-primary/20' : ''}`}>
                <CardContent className="p-6">
                  <div className="flex justify-between items-start mb-4">
                    <Badge variant="outline" className="bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20">
                      {exam.type} Test
                    </Badge>
                    {isAttempted && (
                      <Badge variant="secondary" className="bg-green-500/10 text-green-500 border-green-500/20">
                        Attempted
                      </Badge>
                    )}
                  </div>
                  <h3 className="font-bold text-lg leading-tight mb-2 group-hover:text-[#00F0FF] transition-colors">
                    {exam.title}
                  </h3>
                  <div className="text-sm text-muted-foreground space-y-1 mb-6">
                    <div className="font-medium text-foreground">Available Now</div>
                    <div>{exam.total_time} Min • {exam.difficulty} Difficulty</div>
                  </div>
                  <Link href={`/cbt/${exam.id}`}>
                    <Button className={`w-full gap-2 rounded-xl transition-colors font-bold ${isAttempted ? 'bg-secondary border border-border text-foreground' : 'bg-secondary text-foreground hover:bg-[#00F0FF] hover:text-background'}`}>
                      <PlayCircle size={16} /> {isAttempted ? 'Retake Exam' : 'Start Exam'}
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            )})}
          </div>
        )}
      </div>

      <div className="space-y-6 pt-8">
        <h2 className="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
          <Activity size={20} className="text-muted-foreground" /> Past Attempts
        </h2>
        <div className="space-y-4">
          {attempts.length === 0 ? (
            <div className="py-8 text-center text-muted-foreground bg-secondary/10 border border-dashed border-border rounded-2xl">
              You haven't attempted any CBT exams yet.
            </div>
          ) : attempts.map((attempt, i) => {
            const exam = exams.find(e => e.id === attempt.source_id);
            const scoreCalc = (attempt.score * 4) - ((attempt.total_questions - attempt.score) * 1); // rough calc for display
            
            return (
            <Card key={i} className="bg-secondary/20">
              <CardContent className="p-4 flex flex-col md:flex-row items-center justify-between gap-4">
                <div className="w-full md:w-auto">
                  <h3 className="font-bold">{exam?.title || 'Unknown Test'}</h3>
                  <p className="text-sm text-muted-foreground font-medium">{formatDate(attempt.submitted_at)}</p>
                </div>
                <div className="flex items-center gap-4 md:gap-8 w-full md:w-auto justify-between md:justify-end">
                  <div className="text-right">
                    <div className="text-xs md:text-sm text-muted-foreground font-bold uppercase tracking-wider">Score</div>
                    <div className="font-bold text-base md:text-lg">
                      <span className="text-foreground">{scoreCalc}</span>
                      <span className="text-muted-foreground">/{attempt.total_questions * 4}</span>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-xs md:text-sm text-muted-foreground font-bold uppercase tracking-wider">Accuracy</div>
                    <div className="font-bold text-base md:text-lg text-[#00F0FF]">{Math.round(attempt.accuracy)}%</div>
                  </div>
                  <Link href={`/dashboard/cbt/history/${attempt.id}`}>
                    <Button variant="outline" className="rounded-xl border-border hover:bg-secondary">
                      View Solutions
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          )})}
        </div>
      </div>
    </div>
  );
}