"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { BrainCircuit, Play, CheckCircle2, Download, Filter, Lock } from "lucide-react"

import { useEffect, useState } from "react"
import Link from "next/link"
import { useActiveUser } from "@/hooks/useActiveUser"

export default function DPPPage() {
  const { user } = useActiveUser()
  const [dpps, setDpps] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchDpps() {
      if (!user) return; // Wait for user to be available

      try {
        const pattern = user.target_exam || "JEE_Main";
        // Also fetch from the correct Next.js proxied route instead of localhost:8000
        const res = await fetch(`/api/tests?type=DPS&exam_pattern=${pattern}`);
        if (res.ok) {
          const data = await res.json()
          setDpps(data)
        }
      } catch (err) {
        console.error("Failed to fetch DPPs", err)
      } finally {
        setLoading(false)
      }
    }
    fetchDpps()
  }, [user])

  const getDifficultyColor = (diff: string) => {
    switch(diff) {
      case 'Easy': return 'text-emerald-500 bg-emerald-500/10 border-emerald-500/20';
      case 'Medium': return 'text-amber-500 bg-amber-500/10 border-amber-500/20';
      case 'Hard': return 'text-destructive bg-destructive/10 border-destructive/20';
      default: return 'text-primary bg-primary/10 border-primary/20';
    }
  }

  return (
    <div className="p-8 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-5xl mx-auto">
      <div className="flex flex-col md:flex-row md:items-center justify-between p-8 bg-gradient-to-r from-secondary/50 to-background border border-border rounded-2xl shadow-sm gap-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight mb-2">Daily Practice Problems (DPP)</h1>
          <p className="text-muted-foreground font-medium max-w-xl">
            Hyper-personalized problem sets generated daily by our AI Evaluator to target your specific weak areas based on past exam performance.
          </p>
        </div>
        <Button size="lg" className="h-14 px-8 rounded-xl bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 font-bold shadow-[0_0_20px_-5px_#00F0FF] shrink-0">
          <BrainCircuit className="mr-2" /> Generate Custom DPP
        </Button>
      </div>

      <div className="flex flex-col sm:flex-row justify-between items-center gap-4 border-b border-border pb-6">
        <div className="flex items-center gap-2">
          <span className="text-sm font-bold text-muted-foreground mr-2"><Filter size={16} className="inline mr-1"/> Difficulty:</span>
          {['Mixed', 'Easy', 'Medium', 'Hard'].map((diff) => (
            <button key={diff} className={`px-3 py-1.5 rounded-lg text-xs font-bold border transition-colors ${diff === 'Mixed' ? 'bg-primary text-primary-foreground border-primary' : 'bg-background text-muted-foreground border-border hover:border-primary/50'}`}>
              {diff}
            </button>
          ))}
          <div className="flex items-center gap-1 ml-2 text-xs text-muted-foreground bg-secondary/50 px-2 py-1 rounded-md">
            <Lock size={12}/> Pro
          </div>
        </div>
        <Button variant="outline" className="gap-2 rounded-xl text-sm font-bold">
          <Download size={16} /> Export as PDF <span className="ml-1 text-[10px] uppercase tracking-wider bg-primary/10 text-primary px-1.5 py-0.5 rounded-md">Pro</span>
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {loading ? (
          <div className="col-span-2 text-center py-12 text-muted-foreground">Loading AI-generated DPPs...</div>
        ) : dpps.length === 0 ? (
          <div className="col-span-2 text-center py-12 text-muted-foreground border border-dashed rounded-xl">No DPPs available yet. Upload some PDFs in the Admin Panel!</div>
        ) : dpps.map((dpp, i) => {
          // Calculate total questions dynamically from sections
          let count = 0;
          if (dpp.sections) {
             Object.values(dpp.sections).forEach((s: any) => { count += (s.questions?.length || 0) });
          }
          // Temporary mock for status
          let status: string = "Pending" 

          return (
          <Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${status === 'Completed' ? 'opacity-70 hover:opacity-100 bg-secondary/10' : 'hover:border-[#00F0FF]/50 bg-background'}`}>
            <CardContent className="p-6 flex items-center justify-between">
              <div className="flex gap-4">
                <div className={`mt-1 flex-shrink-0 ${status === 'Completed' ? 'text-green-500' : 'text-foreground'}`}>
                  {status === 'Completed' ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[#00F0FF] transition-colors flex items-center justify-center"></div>}
                </div>
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF]">
                      {user?.target_exam?.replace("_", " ") || "JEE/NEET"}
                    </span>
                    <span className="text-muted-foreground text-xs font-bold">•</span>
                    <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">{dpp.difficulty} Level</span>
                  </div>
                  <h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors flex items-center gap-2">
                    {dpp.title}
                    <span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
                      {dpp.difficulty}
                    </span>
                  </h3>
                  <div className="text-sm text-muted-foreground mt-2 font-medium">
                    {count} Questions • {dpp.total_time} mins
                  </div>
                </div>
              </div>
              <div className="text-muted-foreground group-hover:text-foreground transition-colors pl-4 shrink-0">
                {status === 'Completed' ? (
                  <Link href={`/dashboard/cbt/history/${dpp.id}`}>
                    <Button variant="ghost" size="sm" className="font-bold">Review</Button>
                  </Link>
                ) : (
                  <Link href={`/cbt/${dpp.id}`}>
                    <Button variant="secondary" size="icon" className="rounded-full group-hover:bg-primary group-hover:text-primary-foreground hover:bg-primary hover:text-primary-foreground shadow-sm transition-all duration-300">
                      <Play size={16} className="ml-1" />
                    </Button>
                  </Link>
                )}
              </div>
            </CardContent>
          </Card>
        )})}
      </div>
    </div>
  )
}