"use client"

import { ReadinessGauge } from "@/components/AI/ReadinessGauge"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Gauge, TrendingUp, Target, Award, ShieldAlert, CheckCircle2, BookOpen, Zap, BarChart2, Clock } from "lucide-react"
import Link from "next/link"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"

const DEMO_SCORE_HISTORY = [
  { week: "Wk 1", score: 54 },
  { week: "Wk 2", score: 60 },
  { week: "Wk 3", score: 63 },
  { week: "Wk 4", score: 68 },
  { week: "Wk 5", score: 72 },
  { week: "Wk 6", score: 78 },
]

const ZERO_SCORE_HISTORY = [
  { week: "Wk 1", score: 0 },
  { week: "Wk 2", score: 0 },
  { week: "Wk 3", score: 0 },
  { week: "Wk 4", score: 0 },
  { week: "Wk 5", score: 0 },
  { week: "Wk 6", score: 0 },
]

export default function ReadinessPage() {
  const { userId } = useActiveUser()
  const isDemo = isDemoUser(userId)
  const scoreHistory = isDemo ? DEMO_SCORE_HISTORY : ZERO_SCORE_HISTORY
  const maxScore = Math.max(1, ...scoreHistory.map(d => d.score))

  return (
    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto animate-in fade-in duration-500 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)]">
                <Gauge className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
              </span>
              Exam Readiness Analytics
            </h1>
            <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
              Real-time algorithmic prediction of your exam readiness — based on speed, accuracy, syllabus coverage, and test history.
            </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">
            <Gauge size={12} /> AI Powered
          </span>
        </div>
      </div>

      {/* KPI Strip */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[
          { label: "Overall Score", value: isDemo ? "72 / 100" : "0 / 100", trend: isDemo ? "+5 this week" : "Baseline", trendUp: true, icon: <Gauge size={20} className="text-[var(--cyan-ai)]" /> },
          { label: "Accuracy Rate", value: isDemo ? "88%" : "0%", trend: isDemo ? "+3% vs last week" : "0 attempts", trendUp: isDemo, icon: <Target size={20} className="text-amber-400" /> },
          { label: "Avg Speed / Q", value: isDemo ? "45 sec" : "-- sec", trend: isDemo ? "↓ Needs work" : "Not tested", trendUp: false, icon: <Clock size={20} className="text-red-400" /> },
          { label: "Syllabus Covered", value: isDemo ? "64%" : "0%", trend: isDemo ? "+8% this month" : "Day 1", trendUp: true, icon: <BookOpen size={20} className="text-emerald-400" /> },
        ].map((kpi) => (
          <Card key={kpi.label} className="border-border/60 bg-secondary/10 rounded-2xl hover:border-[var(--cyan-ai-30)] transition-colors">
            <CardContent className="p-5">
              <div className="flex items-center justify-between mb-3">
                {kpi.icon}
                <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${kpi.trendUp ? "bg-green-500/10 text-green-400" : "bg-white/5 text-muted-foreground"}`}>
                  {kpi.trend}
                </span>
              </div>
              <div className="text-2xl font-black mb-0.5">{kpi.value}</div>
              <div className="text-xs text-muted-foreground font-semibold uppercase tracking-wider">{kpi.label}</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">
          {/* Readiness Score Card */}
          <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
            <div className="flex items-center gap-2 mb-5">
              <Award className="text-amber-400" size={22} />
              <h2 className="text-xl font-extrabold tracking-tight">Composite Readiness Index</h2>
              <span className="ml-auto text-xs font-bold 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-2.5 py-1 rounded-full">
                {isDemo ? "Updated Daily" : "Day 1 Initializing"}
              </span>
            </div>
            <ReadinessGauge />
          </Card>

          {/* Subject Confidence Matrix */}
          <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-5">
            <div className="flex items-center gap-2">
              <BarChart2 size={20} className="text-[var(--cyan-ai)]" />
              <h3 className="text-lg font-extrabold tracking-tight">Subject Confidence Matrix</h3>
            </div>
            <div className="space-y-4">
              {[
                { subject: "Biology / Maths", score: isDemo ? 82 : 0, color: "bg-[var(--cyan-ai)]", status: isDemo ? "High Readiness" : "Not Started", statusColor: isDemo ? "text-[var(--cyan-ai)]" : "text-muted-foreground" },
                { subject: "Chemistry", score: isDemo ? 74 : 0, color: "bg-amber-400", status: isDemo ? "Moderate Readiness" : "Not Started", statusColor: isDemo ? "text-amber-400" : "text-muted-foreground" },
                { subject: "Physics", score: isDemo ? 61 : 0, color: "bg-red-400", status: isDemo ? "Needs Intensive Drill" : "Not Started", statusColor: isDemo ? "text-red-400" : "text-muted-foreground" },
              ].map((sub) => (
                <div key={sub.subject} className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-sm font-black">{sub.subject}</span>
                    <span className={`text-xs font-bold ${sub.statusColor}`}>{sub.score}% · {sub.status}</span>
                  </div>
                  <div className="h-2.5 w-full bg-secondary rounded-full overflow-hidden">
                    <div className={`h-full ${sub.color} rounded-full transition-all duration-700`} style={{ width: `${sub.score}%` }} />
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {/* Score History Chart */}
          <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
            <div className="flex items-center gap-2 mb-6">
              <TrendingUp size={20} className="text-green-400" />
              <h3 className="text-lg font-extrabold tracking-tight">6-Week Readiness Trend</h3>
            </div>
            <div className="flex items-end gap-3 h-28">
              {scoreHistory.map((d, i) => (
                <div key={d.week} className="flex flex-col items-center gap-1 flex-1">
                  <span className="text-xs font-black text-muted-foreground">{d.score}</span>
                  <div
                    className={`w-full rounded-t-md transition-all duration-700 ${
                      !isDemo
                        ? "bg-white/5 border border-white/10"
                        : i === scoreHistory.length - 1
                        ? "bg-gradient-to-t from-[var(--cyan-ai-50)] to-[var(--cyan-ai)]"
                        : "bg-gradient-to-t from-white/10 to-white/25"
                    }`}
                    style={{ height: isDemo ? `${(d.score / maxScore) * 80}px` : "4px" }}
                  />
                  <span className="text-xs text-muted-foreground font-semibold">{d.week}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          <Card className="p-6 bg-gradient-to-br from-amber-500/10 via-secondary/20 to-background border border-amber-500/30 rounded-3xl space-y-4">
            <h3 className="text-base font-black tracking-tight text-amber-400 flex items-center gap-2">
              <ShieldAlert size={18} /> Readiness Boosters
            </h3>
            <ul className="space-y-3.5 text-sm font-semibold text-muted-foreground">
              <li className="flex items-start gap-2.5">
                <CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
                <span>{isDemo ? "Complete 2 full-length mock tests this week to boost consistency score." : "Complete your first diagnostic test to calculate your initial readiness baseline."}</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
                <span>{isDemo ? "Clear 15 pending errors in your Physics queue to gain ~4 readiness points." : "Attempt daily DPPs to populate your question error log."}</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
                <span>Maintain daily streak — consistency adds directly to your readiness algorithm.</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
                <span>Target under 45s per question in timed test series practice.</span>
              </li>
            </ul>
          </Card>

          <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-4">
            <h3 className="text-base font-black text-muted-foreground uppercase tracking-wider flex items-center gap-2">
              <Zap size={16} className="text-[var(--cyan-ai)]" /> Quick Actions
            </h3>
            <div className="space-y-2.5">
              {[
                { label: "Practice Physics DPP", href: "/dashboard/ai-coach/cbt-dpp", color: "text-[var(--cyan-ai)]" },
                { label: "Review Mistake Queue", href: "/dashboard/ai-coach/mistakes", color: "text-red-400" },
                { label: "View Exam Strategy", href: "/dashboard/ai-coach/strategy", color: "text-amber-400" },
                { label: "College Predictor", href: "/dashboard/ai-coach/college-predictor", color: "text-emerald-400" },
              ].map((a) => (
                <Link key={a.href} href={a.href}
                  className="flex items-center justify-between p-2.5 rounded-xl border border-border/40 hover:border-[var(--cyan-ai-30)] hover:bg-white/5 transition-all group text-sm font-bold">
                  <span className={a.color}>{a.label}</span>
                  <span className="text-muted-foreground group-hover:translate-x-1 transition-transform">→</span>
                </Link>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}