"use client"

import { StudyPlanCard } from "@/components/AI/StudyPlanCard"
import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
import { Card, CardContent } from "@/components/ui/card"
import { Calendar, BookOpen, Clock, Target, CheckCircle2, TrendingUp, Flame } from "lucide-react"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"

export default function StudyPlanPage() {
  const { user, userId } = useActiveUser()
  const isDemo = isDemoUser(userId)
  const streakCount = user?.streak_count || (isDemo ? 12 : 1)

  return (
    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
      {/* Page Header */}
      <div className="border-b border-border/50 pb-6">
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div>
            <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
              <span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
                <Calendar className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
              </span>
              Personalized Daily &amp; Weekly Study Plan
            </h1>
            <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
              AI-generated task schedule dynamically tailored to fix your weak areas and maintain optimal syllabus coverage.
            </p>
          </div>
          <span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
            <Calendar size={12} /> AI Powered
          </span>
        </div>
      </div>

      {/* KPI Strip */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[
          { label: "Tasks Today", value: isDemo ? "5" : "3", sub: isDemo ? "2 completed" : "0 completed", icon: <CheckCircle2 size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
          { label: "Study Hours Today", value: isDemo ? "3.8 hrs" : "0.0 hrs", sub: "Target: 5 hrs", icon: <Clock size={18} className="text-[var(--cyan-ai)]" />, color: "border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]" },
          { label: "Syllabus Coverage", value: isDemo ? "64%" : "0%", sub: isDemo ? "+8% this week" : "Day 1 Baseline", icon: <Target size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
          { label: "Current Streak", value: `${streakCount} Day${streakCount === 1 ? '' : 's'}`, sub: isDemo ? "Keep it up!" : "Day 1 active", icon: <Flame size={18} className="text-orange-400" />, color: "border-orange-400/20 bg-orange-400/5" },
        ].map((kpi) => (
          <Card key={kpi.label} className={`rounded-2xl border ${kpi.color} hover:scale-[1.02] transition-transform`}>
            <CardContent className="p-5 flex flex-col gap-2">
              {kpi.icon}
              <div className="text-2xl font-black">{kpi.value}</div>
              <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">{kpi.label}</div>
              <div className="text-[11px] font-bold text-muted-foreground/60">{kpi.sub}</div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2 space-y-8">
          {/* Today's Schedule */}
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
                <Clock size={16} className="text-[var(--cyan-ai)]" />
                Today&apos;s Schedule
              </div>
              <span className="text-xs font-bold text-[var(--cyan-ai)]">
                {new Date().toLocaleDateString("en-IN", { weekday: "long", day: "numeric", month: "long" })}
              </span>
            </div>
            <StudyPlanCard />
          </div>

          {/* Weekly Overview */}
          <div className="space-y-3">
            <div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
              <TrendingUp size={16} className="text-emerald-400" />
              Weekly Syllabus Progress
            </div>
            <WeeklyProgressReport />
          </div>

          {/* Syllabus Coverage */}
          <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
            <div className="flex items-center gap-2 mb-5">
              <BookOpen size={20} className="text-[var(--cyan-ai)]" />
              <h3 className="text-lg font-extrabold tracking-tight">Subject Coverage Breakdown</h3>
            </div>
            <div className="space-y-4">
              {[
                { subject: "Physics", covered: 58, total: 100, chapters: "21 / 29 chapters" },
                { subject: "Chemistry", covered: 71, total: 100, chapters: "19 / 26 chapters" },
                { subject: "Biology / Maths", covered: 64, total: 100, chapters: "32 / 52 topics" },
              ].map((sub) => (
                <div key={sub.subject}>
                  <div className="flex items-center justify-between mb-1.5">
                    <span className="text-sm font-black">{sub.subject}</span>
                    <div className="flex items-center gap-3 text-xs font-semibold text-muted-foreground">
                      <span>{sub.chapters}</span>
                      <span className={`font-black ${sub.covered >= 70 ? "text-green-400" : sub.covered >= 55 ? "text-amber-400" : "text-red-400"}`}>{sub.covered}%</span>
                    </div>
                  </div>
                  <div className="h-2.5 w-full bg-secondary rounded-full overflow-hidden">
                    <div
                      className={`h-full rounded-full ${sub.covered >= 70 ? "bg-green-400" : sub.covered >= 55 ? "bg-amber-400" : "bg-red-400"}`}
                      style={{ width: `${sub.covered}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          <Card className="p-6 bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-30)] rounded-3xl space-y-4">
            <h3 className="text-base font-black tracking-tight text-[var(--cyan-ai)] flex items-center gap-2">
              <BookOpen size={18} /> AI Scheduler Rules
            </h3>
            <ul className="space-y-3 text-sm font-medium text-muted-foreground">
              <li className="flex items-start gap-2">
                <CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
                <span><strong className="text-foreground">High-Yield Prioritization:</strong> Extra time on topics with heavy exam weightage.</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
                <span><strong className="text-foreground">Error Interleaving:</strong> Recent incorrect questions are integrated directly into study blocks.</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
                <span><strong className="text-foreground">Burnout Prevention:</strong> 10-minute micro-breaks recommended between intensive problem sets.</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
                <span><strong className="text-foreground">Spaced Repetition:</strong> SM-2 algorithm reschedules mistake reviews at optimal intervals.</span>
              </li>
            </ul>
          </Card>

          <Card className="p-5 bg-secondary/10 border-border/60 rounded-3xl space-y-3">
            <h3 className="text-sm font-black uppercase tracking-wider text-muted-foreground">Upcoming This Week</h3>
            <div className="space-y-2">
              {[
                { day: "Tue, Aug 5", task: "Full-Length Mock — JEE Mains Pattern", type: "Test", color: "text-purple-400 bg-purple-400/10" },
                { day: "Wed, Aug 6", task: "Rotational Dynamics Intensive Drill", type: "Practice", color: "text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)]" },
                { day: "Thu, Aug 7", task: "Chemistry Organic — Mistake Review", type: "Review", color: "text-red-400 bg-red-400/10" },
                { day: "Fri, Aug 8", task: "Optics + Wave Optics Revision", type: "Revision", color: "text-yellow-400 bg-yellow-400/10" },
              ].map((item) => (
                <div key={item.day} className="flex items-center gap-2 p-2.5 rounded-lg bg-white/5 border border-border/30">
                  <span className={`text-[10px] font-black px-2 py-0.5 rounded-md shrink-0 ${item.color}`}>{item.type}</span>
                  <div className="min-w-0">
                    <div className="text-xs font-bold truncate">{item.task}</div>
                    <div className="text-[11px] text-muted-foreground">{item.day}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}