"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Terminal, Users, Database, Activity, RefreshCw } from "lucide-react"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts'

const data = [
  { name: 'Mon', accuracy: 88, tokens: 1.2 },
  { name: 'Tue', accuracy: 90, tokens: 1.5 },
  { name: 'Wed', accuracy: 89, tokens: 1.8 },
  { name: 'Thu', accuracy: 92, tokens: 2.1 },
  { name: 'Fri', accuracy: 95, tokens: 2.4 },
  { name: 'Sat', accuracy: 94, tokens: 2.2 },
  { name: 'Sun', accuracy: 96, tokens: 2.8 },
];

export default function AdminDashboard() {
  return (
    <div className="p-8 max-w-7xl mx-auto space-y-8 animate-in fade-in duration-500">
      <header className="flex items-center justify-between border-b border-border pb-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tighter text-foreground">Command Center</h1>
          <p className="text-muted-foreground mt-1 font-medium">Real-time system monitoring and agent status.</p>
        </div>
        <Button variant="outline" className="gap-2 border-[var(--cyan-ai-10)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] hover:bg-[var(--cyan-ai-10)] hover:text-[var(--cyan-ai)] rounded-xl font-medium shadow-[0_0_15px_-5px_var(--cyan-ai)]">
          <RefreshCw size={16} /> Refresh Data
        </Button>
      </header>

      {/* KPI Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <Card className="bg-secondary/10 border-border/50 rounded-2xl">
          <CardHeader className="pb-2 flex flex-row items-center justify-between">
            <CardTitle className="text-sm font-medium text-muted-foreground">Total Revenue</CardTitle>
            <div className="p-2 bg-primary/20 text-primary rounded-lg"><Activity size={16}/></div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">₹12.4M</div>
            <p className="text-xs text-primary mt-1 font-medium">+14.2% from last month</p>
          </CardContent>
        </Card>
        <Card className="bg-secondary/10 border-border/50 rounded-2xl">
          <CardHeader className="pb-2 flex flex-row items-center justify-between">
            <CardTitle className="text-sm font-medium text-muted-foreground">Active Students</CardTitle>
            <div className="p-2 bg-secondary text-foreground rounded-lg"><Users size={16}/></div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">45,231</div>
            <p className="text-xs text-muted-foreground mt-1 font-medium">+2,401 this week</p>
          </CardContent>
        </Card>
        <Card className="bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-30)] shadow-[0_0_20px_-10px_var(--cyan-ai)] rounded-2xl">
          <CardHeader className="pb-2 flex flex-row items-center justify-between">
            <CardTitle className="text-sm font-medium text-muted-foreground">AI Agent Accuracy</CardTitle>
            <div className="p-2 bg-[var(--cyan-ai-20)] text-[var(--cyan-ai)] rounded-lg"><Terminal size={16}/></div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-[var(--cyan-ai)]">96.4%</div>
            <p className="text-xs text-[var(--cyan-ai-80)] mt-1 font-medium">Based on 1.2M interactions</p>
          </CardContent>
        </Card>
        <Card className="bg-secondary/10 border-border/50 rounded-2xl">
          <CardHeader className="pb-2 flex flex-row items-center justify-between">
            <CardTitle className="text-sm font-medium text-muted-foreground">Question Bank</CardTitle>
            <div className="p-2 bg-secondary text-foreground rounded-lg"><Database size={16}/></div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">142k</div>
            <p className="text-xs text-muted-foreground mt-1 font-medium">1.2k added today</p>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Charts */}
        <Card className="lg:col-span-2 bg-background border-border rounded-3xl">
          <CardHeader>
            <CardTitle>AI Token Usage vs Accuracy</CardTitle>
          </CardHeader>
          <CardContent className="h-[300px] w-full">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                <defs>
                  <linearGradient id="colorTokens" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="var(--cyan-ai)" stopOpacity={0.3}/>
                    <stop offset="95%" stopColor="var(--cyan-ai)" stopOpacity={0}/>
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" stroke="#262626" vertical={false} />
                <XAxis dataKey="name" stroke="#737373" fontSize={12} tickLine={false} axisLine={false} />
                <YAxis stroke="#737373" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => `${value}M`} />
                <Tooltip 
                  contentStyle={{ backgroundColor: '#0a0a0a', borderColor: '#262626', borderRadius: '12px' }}
                  itemStyle={{ color: 'var(--cyan-ai)', fontWeight: 'bold' }}
                />
                <Area type="monotone" dataKey="tokens" stroke="var(--cyan-ai)" strokeWidth={3} fillOpacity={1} fill="url(#colorTokens)" />
              </AreaChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* Live Agent Status */}
        <Card className="bg-background border-border flex flex-col rounded-3xl">
          <CardHeader>
            <CardTitle>Live Agent Status</CardTitle>
          </CardHeader>
          <CardContent className="flex-1 overflow-y-auto pr-2 space-y-4">
            <div className="flex items-center justify-between p-4 rounded-2xl border border-border bg-secondary/10">
              <div className="flex items-center gap-4">
                <div className="relative flex h-3 w-3">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
                </div>
                <div>
                  <h4 className="text-sm font-bold">DPP Generator</h4>
                  <p className="text-xs text-muted-foreground font-mono mt-1">Latency: 142ms</p>
                </div>
              </div>
              <Badge variant="outline" className="text-emerald-500 border-emerald-500/30 bg-emerald-500/10 font-bold">Healthy</Badge>
            </div>

            <div className="flex items-center justify-between p-4 rounded-2xl border border-border bg-secondary/10">
              <div className="flex items-center gap-4">
                <div className="relative flex h-3 w-3">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
                </div>
                <div>
                  <h4 className="text-sm font-bold">Tutor Agent</h4>
                  <p className="text-xs text-muted-foreground font-mono mt-1">Latency: 840ms</p>
                </div>
              </div>
              <Badge variant="outline" className="text-emerald-500 border-emerald-500/30 bg-emerald-500/10 font-bold">Healthy</Badge>
            </div>

            <div className="flex items-center justify-between p-4 rounded-2xl border border-amber-500/30 bg-amber-500/5">
              <div className="flex items-center gap-4">
                <div className="relative flex h-3 w-3">
                  <span className="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
                </div>
                <div>
                  <h4 className="text-sm font-bold text-amber-500">Evaluator Node</h4>
                  <p className="text-xs text-amber-500/70 font-mono mt-1">Latency: 2100ms</p>
                </div>
              </div>
              <Badge variant="outline" className="text-amber-500 border-amber-500/30 bg-amber-500/10 font-bold">Degraded</Badge>
            </div>
          </CardContent>
        </Card>
      </div>
      
      {/* Question Bank Manager Preview */}
      <Card className="bg-background border-border rounded-3xl">
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>Recent Question Uploads</CardTitle>
            </div>
            <Button size="sm" className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-bold rounded-xl h-10 px-4">Add Question</Button>
          </CardHeader>
          <CardContent>
             <div className="rounded-2xl border border-border overflow-hidden">
                <table className="w-full text-sm text-left">
                  <thead className="bg-secondary/50 text-muted-foreground font-medium border-b border-border">
                    <tr>
                      <th className="px-5 py-4">ID</th>
                      <th className="px-5 py-4">Subject</th>
                      <th className="px-5 py-4">Topic</th>
                      <th className="px-5 py-4">Preview</th>
                      <th className="px-5 py-4 text-right">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    <tr className="hover:bg-secondary/20 transition-colors">
                      <td className="px-5 py-4 font-mono text-muted-foreground font-medium">#Q-8942</td>
                      <td className="px-5 py-4"><Badge variant="outline" className="bg-background">Physics</Badge></td>
                      <td className="px-5 py-4 font-medium">Thermodynamics</td>
                      <td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">An ideal gas undergoes an isothermal expansion...</td>
                      <td className="px-5 py-4 text-right">
                        <Button variant="ghost" size="sm" className="text-[var(--cyan-ai)] hover:text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-10)] font-bold rounded-lg">Edit</Button>
                      </td>
                    </tr>
                    <tr className="hover:bg-secondary/20 transition-colors">
                      <td className="px-5 py-4 font-mono text-muted-foreground font-medium">#Q-8941</td>
                      <td className="px-5 py-4"><Badge variant="outline" className="bg-background">Math</Badge></td>
                      <td className="px-5 py-4 font-medium">Calculus</td>
                      <td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">Evaluate the integral of e^x sin(x) dx...</td>
                      <td className="px-5 py-4 text-right">
                        <Button variant="ghost" size="sm" className="text-[var(--cyan-ai)] hover:text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-10)] font-bold rounded-lg">Edit</Button>
                      </td>
                    </tr>
                  </tbody>
                </table>
             </div>
          </CardContent>
      </Card>
    </div>
  )
}