"use client"

import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Check, RefreshCw } from "lucide-react"
import Link from "next/link"

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: "DPS", description: "DPS — Electrostatics + Kinematics", duration_minutes: 20, status: "Done" },
          { type: "Mistake_Review", description: "Mistake Review — Thermodynamics", duration_minutes: 10, status: "Done" },
          { type: "Micro_test", description: "Micro-test — GOC (General Organic Chemistry)", duration_minutes: 5, status: "Pending" },
          { type: "Test", description: "Weekly Test — Full Syllabus", duration_minutes: 180, status: "Pending" },
          { type: "Revision", description: "Revise — Circles + Straight Lines", duration_minutes: 15, 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
    })
  }

  const completedTasks = tasks.filter(t => t.status === "Done").length
  const totalTasks = tasks.length
  const progressPercent = totalTasks === 0 ? 0 : Math.round((completedTasks / totalTasks) * 100)

  const getTagStyle = (type: string) => {
    switch(type) {
      case "Revision": return "bg-yellow-500/10 text-yellow-500"
      case "Mistake_Review": return "bg-red-500/10 text-red-500"
      case "DPS": return "bg-[#00F0FF]/10 text-[#00F0FF]"
      case "Micro_test": return "bg-green-500/10 text-green-500"
      case "Test": return "bg-purple-500/10 text-purple-500"
      default: return "bg-secondary text-muted-foreground"
    }
  }

  const getDisplayType = (type: string) => {
    switch(type) {
      case "Revision": return "Revision"
      case "Mistake_Review": return "Review"
      case "DPS": return "Practice"
      case "Micro_test": return "Micro-test"
      case "Test": return "Test"
      default: return "Task"
    }
  }

  return (
    <div className="flex flex-col h-full">
      <div className="flex justify-between items-center pb-3">
        <h2 className="text-base font-bold text-primary flex items-center gap-2">
          📅 Today's Study Plan
        </h2>
      </div>

      <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden group hover:border-[#00F0FF]/30 transition-colors">
        <div className="px-4 py-3.5 flex justify-between items-center border-b border-border">
          <div className="text-[13px] font-bold text-muted-foreground">
            {new Date().toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' })}
          </div>
          <div className="text-[12px] text-[#00F0FF] font-bold">{progressPercent}% Completed</div>
        </div>
        
        {/* Progress bar */}
        <div className="h-[3px] bg-[#00F0FF]/10 w-full">
          <div 
            className="h-full bg-gradient-to-r from-[#00F0FF] to-teal-400 rounded-r-[2px] transition-all duration-500"
            style={{ width: `${progressPercent}%` }}
          />
        </div>

        <CardContent className="p-0 flex-1 flex flex-col">
          {loading ? (
            <div className="flex-1 flex items-center justify-center p-8 min-h-[200px]">
              <RefreshCw className="animate-spin text-muted-foreground mr-3" /> Loading schedule...
            </div>
          ) : (
            <div className="py-1">
              {tasks.map((task, idx) => {
                const isDone = task.status === "Done"
                const isCurrent = idx === completedTasks && !isDone // First pending task is current
                
                return (
                  <div 
                    key={idx}
                    onClick={() => toggleTask(idx, isDone ? "Pending" : "Done")}
                    className={`flex items-center gap-3 px-4 py-2.5 transition-colors cursor-pointer border-l-[3px] ${
                      isDone ? "opacity-60 border-green-500 hover:bg-white/5" :
                      isCurrent ? "border-[#00F0FF] bg-[#00F0FF]/5 hover:bg-[#00F0FF]/10" :
                      "border-transparent hover:bg-white/5"
                    }`}
                  >
                    {/* Custom Checkbox */}
                    <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-all ${
                      isDone ? "bg-green-500 border-green-500" :
                      isCurrent ? "border-[#00F0FF] shadow-[0_0_0_0_rgba(0,240,255,0.3)] animate-[pulse-border_2s_infinite]" :
                      "border-muted-foreground"
                    }`}>
                      {isDone && <Check size={12} className="stroke-white stroke-[3px]" />}
                    </div>

                    <div className="flex-1 min-w-0">
                      <div className="text-[13px] font-bold text-primary truncate">{task.description}</div>
                      <div className="text-[11px] text-muted-foreground mt-0.5">{task.type.replace('_', ' ')} • Active Session</div>
                    </div>

                    <div className={`text-[10px] font-bold px-2 py-0.5 rounded-md shrink-0 ${getTagStyle(task.type)}`}>
                      {getDisplayType(task.type)}
                    </div>
                    
                    <div className="text-[12px] font-bold text-muted-foreground bg-white/5 px-2 py-0.5 rounded-md shrink-0">
                      {task.duration_minutes}m
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes pulse-border {
          0%, 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.3); }
          50% { box-shadow: 0 0 0 6px rgba(0, 240, 255, 0); }
        }
      `}} />
    </div>
  )
}