"use client"

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { LineChart as LineChartIcon, Activity, BrainCircuit } from "lucide-react"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Cell } from 'recharts'
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"

const DEMO_TREND_DATA = [
  { name: 'Week 1', score: 120 },
  { name: 'Week 2', score: 135 },
  { name: 'Week 3', score: 130 },
  { name: 'Week 4', score: 145 },
  { name: 'Week 5', score: 160 },
  { name: 'Week 6', score: 185 },
]

const ZERO_TREND_DATA = [
  { name: 'Week 1', score: 0 },
  { name: 'Week 2', score: 0 },
  { name: 'Week 3', score: 0 },
  { name: 'Week 4', score: 0 },
  { name: 'Week 5', score: 0 },
  { name: 'Week 6', score: 0 },
]

const DEMO_HEATMAP_DATA = [
  { topic: 'Kinematics', accuracy: 95 },
  { topic: 'Optics', accuracy: 72 },
  { topic: 'Thermodynamics', accuracy: 45 },
  { topic: 'Calculus', accuracy: 38 },
  { topic: 'Organic Chem', accuracy: 88 },
  { topic: 'Inorganic', accuracy: 65 },
]

const ZERO_HEATMAP_DATA = [
  { topic: 'Kinematics', accuracy: 0 },
  { topic: 'Optics', accuracy: 0 },
  { topic: 'Thermodynamics', accuracy: 0 },
  { topic: 'Calculus', accuracy: 0 },
  { topic: 'Organic Chem', accuracy: 0 },
  { topic: 'Inorganic', accuracy: 0 },
]

export default function AnalyticsPage() {
  const { userId } = useActiveUser()
  const isDemo = isDemoUser(userId)
  const trendData = isDemo ? DEMO_TREND_DATA : ZERO_TREND_DATA
  const heatmapData = isDemo ? DEMO_HEATMAP_DATA : ZERO_HEATMAP_DATA

  const getColor = (accuracy: number) => {
    if (accuracy === 0) return '#374151' // neutral gray
    if (accuracy >= 80) return '#10b981' // emerald-500
    if (accuracy >= 60) return '#f59e0b' // amber-500
    return '#ef4444' // red-500
  }

  return (
    <div className="p-8 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-7xl mx-auto">
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
        <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-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
              <LineChartIcon className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
            </span>
            Performance Analytics
          </h1>
          <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
            Deep AI-driven insights into your study patterns and test trajectories.
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="col-span-1 lg:col-span-2 border-border shadow-sm bg-background">
          <CardHeader>
            <CardTitle className="flex items-center gap-2"><LineChartIcon className="text-[var(--cyan-ai)]" size={20} /> Projected Score Trajectory</CardTitle>
            <CardDescription>
              {isDemo ? "Your mock scores over the last 6 months projected towards the final exam." : "Your mock test trajectory will plot here as you complete tests."}
            </CardDescription>
          </CardHeader>
          <CardContent className="h-[350px] mt-4">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={trendData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#333" vertical={false} />
                <XAxis dataKey="name" stroke="#888" tick={{ fill: '#888' }} />
                <YAxis stroke="#888" tick={{ fill: '#888' }} domain={[0, 300]} />
                <Tooltip 
                  contentStyle={{ backgroundColor: '#1f2937', borderColor: '#374151', borderRadius: '8px' }}
                  itemStyle={{ color: 'var(--cyan-ai)' }}
                />
                <Line type="monotone" dataKey="score" stroke="var(--cyan-ai)" strokeWidth={3} dot={{ r: 4, fill: 'var(--cyan-ai)' }} activeDot={{ r: 6 }} />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        <div className="space-y-6">
          <Card className="border-[var(--cyan-ai-30)] bg-[var(--cyan-ai-10)]">
            <CardHeader className="pb-2">
              <CardTitle className="text-lg flex items-center gap-2"><BrainCircuit size={18} className="text-[var(--cyan-ai)]"/> AI Diagnosis</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-foreground/80 leading-relaxed font-medium">
                {isDemo ? (
                  <>Our models detect a consistent <strong>14% accuracy drop</strong> in physics questions involving Calculus. We are adjusting your upcoming DPPs to focus heavily on integration applications in kinematics.</>
                ) : (
                  <>Complete your first diagnostic test or DPP to unlock personalized AI diagnoses and focus area recommendations. Our neural models will begin analyzing your accuracy curves as soon as you attempt questions.</>
                )}
              </p>
            </CardContent>
          </Card>

          <Card className="border-border shadow-sm">
            <CardHeader className="pb-2">
              <CardTitle className="text-lg">Topic Heatmap (Accuracy)</CardTitle>
            </CardHeader>
            <CardContent className="h-[250px] mt-2">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={heatmapData} layout="vertical" margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                  <XAxis type="number" domain={[0, 100]} hide />
                  <YAxis dataKey="topic" type="category" stroke="#888" width={100} tick={{ fontSize: 12, fill: '#bbb' }} axisLine={false} tickLine={false} />
                  <Tooltip 
                    cursor={{fill: 'transparent'}}
                    contentStyle={{ backgroundColor: '#1f2937', borderColor: '#374151', borderRadius: '8px', color: '#fff' }}
                    formatter={(value: any) => [`${value}% Accuracy`, 'Accuracy']}
                  />
                  <Bar dataKey="accuracy" radius={[0, 4, 4, 0]} barSize={12}>
                    {heatmapData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={getColor(entry.accuracy)} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}