"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CalendarClock, CheckCircle2, Circle, Clock, Loader2, PlayCircle, RefreshCw, XCircle } from "lucide-react"

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

export function StudyPlanCard() {
  const [tasks, setTasks] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const { userId, loading: userLoading } = useActiveUser();

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

    async function fetchPlan() {
      try {
        const res = await fetch(`/api/ai-coach/study-plan/today?user_id=${userId}`)
        if (!res.ok) {
          // If no plan is generated yet, fallback to mock silently
          throw new Error("silent_fallback")
        }
        const data = await res.json()
        setTasks(data.tasks || [])
      } catch (err: any) {
        if (err.message !== "silent_fallback") {
          console.error("Study plan fetch error:", err)
        }
        // Mock fallback if celery hasn't seeded yet
        setTasks([
          { type: "Revision", description: "Revise Thermodynamics", duration_minutes: 15, status: "Pending" },
          { type: "Mistake_Review", description: "Daily Mistake Review Session", duration_minutes: 10, status: "Pending" },
          { type: "DPS", description: "Attempt Thermodynamics Practice Sheet", duration_minutes: 20, status: "Pending" }
        ])
      } finally {
        setLoading(false)
      }
    }
    fetchPlan()
  }, [userId, userLoading])

  const toggleTask = (idx: number, newStatus: string) => {
    setTasks(prev => {
      const copy = [...prev]
      copy[idx] = { ...copy[idx], status: newStatus }
      return copy
    })
  }

  return (
    <Card className="border-border shadow-sm h-full flex flex-col">
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <CardTitle className="text-xl flex items-center gap-2">
            <CalendarClock className="text-primary" size={24} /> 
            Today's Plan
          </CardTitle>
          <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
            {tasks.reduce((acc, curr) => acc + curr.duration_minutes, 0)} min total
          </Badge>
        </div>
        <CardDescription>AI-generated curriculum targeting your weak spots.</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 flex flex-col">
        {loading ? (
          <div className="flex-1 flex items-center justify-center p-8">
            <RefreshCw className="animate-spin text-muted-foreground mr-3" /> Loading schedule...
          </div>
        ) : (
          <div className="space-y-3">
            {tasks.map((task, idx) => {
              const isDone = task.status === "Done"
              const isSkipped = task.status === "Skipped"
              const isPending = task.status === "Pending"

              return (
                <div 
                  key={idx} 
                  className={`flex items-center p-4 rounded-xl border transition-all duration-300 ${
                    isDone ? "bg-green-500/5 border-green-500/20" : 
                    isSkipped ? "bg-secondary/50 border-transparent opacity-60" : 
                    "bg-background border-border hover:border-primary/50"
                  }`}
                >
                  <div className="flex flex-col flex-1 mr-4">
                    <div className="flex items-center gap-2 mb-1">
                      <Badge variant="secondary" className="text-[10px] uppercase tracking-wider">{task.type}</Badge>
                      <span className="text-xs font-semibold text-muted-foreground flex items-center gap-1">
                        <Clock size={12}/> {task.duration_minutes} min
                      </span>
                    </div>
                    <p className={`font-semibold text-sm transition-all duration-300 ${
                      isDone || isSkipped ? "line-through text-muted-foreground" : "text-foreground"
                    }`}>
                      {task.description}
                    </p>
                  </div>
                  
                  {/* Controls */}
                  <div className="flex items-center gap-2">
                    {isPending && (
                      <>
                        <button 
                          onClick={() => toggleTask(idx, "Skipped")}
                          className="p-2 rounded-full hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors"
                          title="Skip Task"
                        >
                          <XCircle size={20} />
                        </button>
                        <button 
                          onClick={() => toggleTask(idx, "Done")}
                          className="p-2 rounded-full hover:bg-green-500/10 text-muted-foreground hover:text-green-500 transition-colors"
                          title="Complete Task"
                        >
                          <Circle size={20} />
                        </button>
                      </>
                    )}
                    {(isDone || isSkipped) && (
                      <button 
                        onClick={() => toggleTask(idx, "Pending")}
                        className={`flex items-center gap-1 text-xs font-bold px-3 py-1.5 rounded-full ${isDone ? "bg-green-500 text-white" : "bg-secondary text-muted-foreground"}`}
                      >
                        {isDone ? <CheckCircle2 size={14}/> : <PlayCircle size={14}/>}
                        {isDone ? "Completed" : "Resume"}
                      </button>
                    )}
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </CardContent>
    </Card>
  )
}