"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { GraduationCap, MapPin, RefreshCw } from "lucide-react"

import { useActiveUser } from "@/hooks/useActiveUser"

export function CollegePredictorCard() {
  const [data, setData] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const { userId, loading: userLoading } = useActiveUser();

  useEffect(() => {
    if (userLoading || !userId) return;

    async function fetchReadiness() {
      try {
        const res = await fetch(`/api/ai-coach/readiness/${userId}`)
        if (!res.ok) throw new Error("Failed to fetch")
        const json = await res.json()
        setData(json)
      } catch (err) {
        console.warn("Using mock fallback data for College Predictor.")
        setData({
          college_prediction: "NIT Trichy / NIT Surathkal on track.",
          prediction_category: "Target"
        })
      } finally {
        setLoading(false)
      }
    }
    fetchReadiness()
  }, [userId, userLoading])

  if (loading) {
    return (
      <Card className="border-border shadow-sm h-full flex items-center justify-center min-h-[150px]">
        <RefreshCw className="animate-spin text-muted-foreground" />
      </Card>
    )
  }

  const prediction = data?.college_prediction || "Keep Practicing"
  const category = data?.prediction_category || "State Level"

  const getCategoryColor = (cat: string) => {
    switch(cat.toUpperCase()) {
      case "REACH": return "bg-purple-500/10 text-purple-600 border-purple-500/20"
      case "TARGET": return "bg-blue-500/10 text-blue-600 border-blue-500/20"
      case "SAFETY": return "bg-green-500/10 text-green-600 border-green-500/20"
      default: return "bg-secondary text-muted-foreground border-transparent"
    }
  }

  return (
    <Card className="border-border shadow-sm h-full flex flex-col bg-gradient-to-br from-background to-secondary/30 relative overflow-hidden">
      <div className="absolute -right-12 -top-12 opacity-5 pointer-events-none">
        <GraduationCap size={150} />
      </div>
      
      <CardHeader className="pb-2">
        <CardTitle className="text-xl flex items-center justify-between">
          <div className="flex items-center gap-2">
            <MapPin className="text-primary" size={24} /> 
            Admissions Radar
          </div>
          <span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest border ${getCategoryColor(category)}`}>
            {category}
          </span>
        </CardTitle>
        <CardDescription>AI-projected admission trajectory.</CardDescription>
      </CardHeader>
      
      <CardContent className="flex-1 flex flex-col justify-center">
        <div className="p-5 bg-background rounded-xl border border-border shadow-sm mt-4">
          <p className="font-semibold text-lg leading-snug">
            "{prediction}"
          </p>
        </div>
        <p className="text-xs text-muted-foreground mt-4 font-medium flex items-center gap-1 opacity-70">
          <RefreshCw size={10} /> Prediction updates dynamically after every test.
        </p>
      </CardContent>
    </Card>
  )
}