"use client"

import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
import { Target, TrendingUp, Calendar, Zap, ArrowRight, BookOpen, CheckCircle2 } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"

const STATS = [
  { label: "Avg. Accuracy", value: "85%", delta: "+6%", positive: true },
  { label: "Days Active", value: "7 / 7", delta: "Perfect week", positive: true },
  { label: "Questions Solved", value: "214", delta: "+38 vs last week", positive: true },
  { label: "Topics Covered", value: "12", delta: "3 remaining", positive: false },
]

const SYLLABUS_PROGRESS = [
  { subject: "Physics", completed: 42, total: 60, percentage: 70, color: "bg-blue-500", text: "text-blue-500" },
  { subject: "Chemistry", completed: 35, total: 55, percentage: 63, color: "bg-amber-500", text: "text-amber-500" },
  { subject: "Mathematics", completed: 50, total: 65, percentage: 76, color: "bg-purple-500", text: "text-purple-500" },
  { subject: "Biology", completed: 20, total: 40, percentage: 50, color: "bg-emerald-500", text: "text-emerald-500" },
]

export default function WeeklyProgressPage() {
  return (
    <div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 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-1">
              <span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
                <Target className="text-[#00F0FF]" size={28} />
              </span>
              Weekly Progress Overview
            </h1>
            <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
              Track your syllabus completion goals, study streaks, and weekly milestones at a glance.
            </p>
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5">
              <Zap size={12} /> Live Analytics
            </span>
          </div>
        </div>
      </div>

      {/* KPI Stats Row */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {STATS.map((stat) => (
          <Card key={stat.label} className="bg-secondary/20 border-border/60 rounded-2xl">
            <CardContent className="p-4">
              <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-1">{stat.label}</p>
              <p className="text-2xl font-black tracking-tight">{stat.value}</p>
              <p className={`text-xs font-bold mt-1 ${stat.positive ? "text-emerald-400" : "text-amber-400"}`}>
                {stat.delta}
              </p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Weekly Bar Chart */}
        <div className="lg:col-span-2 space-y-4">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-extrabold tracking-tight flex items-center gap-2">
              <Calendar size={20} className="text-[#00F0FF]" /> This Week at a Glance
            </h2>
          </div>
          <WeeklyProgressReport />
        </div>

        {/* Side Panel */}
        <div className="space-y-6">
          {/* Syllabus Progress */}
          <div className="space-y-3">
            <h2 className="text-xl font-extrabold tracking-tight flex items-center gap-2">
              <BookOpen size={20} className="text-purple-400" /> Syllabus Progress
            </h2>
            <Card className="bg-secondary/10 border-border/60 rounded-2xl">
              <CardContent className="p-5 space-y-4">
                {SYLLABUS_PROGRESS.map((item) => (
                  <div key={item.subject} className="space-y-1.5">
                    <div className="flex items-center justify-between text-sm">
                      <span className="font-bold">{item.subject}</span>
                      <span className={`font-black ${item.text}`}>{item.percentage}%</span>
                    </div>
                    <div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
                      <div
                        className={`h-full ${item.color} rounded-full transition-all duration-500`}
                        style={{ width: `${item.percentage}%` }}
                      />
                    </div>
                    <div className="text-[10px] text-muted-foreground font-semibold text-right">
                      {item.completed} / {item.total} chapters
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>
          </div>

          {/* Weekly Goals */}
          <Card className="bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/20 rounded-2xl">
            <CardContent className="p-5 space-y-3">
              <h3 className="text-sm font-black uppercase tracking-wider text-[#00F0FF]">Weekly Goals</h3>
              <div className="space-y-2">
                <div className="flex items-start gap-2 p-2 rounded-lg bg-white/5">
                  <CheckCircle2 size={16} className="text-green-400 mt-0.5 shrink-0" />
                  <div>
                    <div className="text-xs font-bold">Complete 200 Questions</div>
                    <div className="text-[10px] text-muted-foreground">Goal Met (214/200)</div>
                  </div>
                </div>
                <div className="flex items-start gap-2 p-2 rounded-lg bg-white/5 opacity-70">
                  <div className="w-4 h-4 rounded-full border-2 border-muted-foreground mt-0.5 shrink-0" />
                  <div>
                    <div className="text-xs font-bold">Take 1 Full Mock Test</div>
                    <div className="text-[10px] text-muted-foreground">Scheduled for Sunday</div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}