import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Activity, BrainCircuit, Zap, Server, ShieldCheck } from "lucide-react"

export default function AgentsPage() {
  const agents = [
    { name: "DPP Generator Node", status: "Healthy", latency: "140ms", tokens: "4.2M", successRate: "99.9%" },
    { name: "Tutor Agent (Physics)", status: "Healthy", latency: "320ms", tokens: "8.1M", successRate: "98.5%" },
    { name: "Tutor Agent (Chem/Bio)", status: "Healthy", latency: "290ms", tokens: "6.5M", successRate: "99.1%" },
    { name: "Evaluator Node", status: "Under Load", latency: "850ms", tokens: "12.4M", successRate: "97.2%" },
  ]

  return (
    <div className="p-8 space-y-8">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">AI Agents Monitor</h1>
        <p className="text-muted-foreground mt-1">Real-time telemetry for internal LLM orchestration nodes.</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="border-border bg-secondary/10">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Global API Status</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold flex items-center gap-3">
              <div className="size-3 rounded-full bg-[var(--cyan-ai)] animate-pulse"></div> Operational
            </div>
          </CardContent>
        </Card>
        <Card className="border-border bg-secondary/10">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Total Tokens Used (24h)</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-primary">31.2M</div>
          </CardContent>
        </Card>
        <Card className="border-border bg-secondary/10">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Avg Generation Latency</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">400ms</div>
          </CardContent>
        </Card>
      </div>

      <h2 className="text-xl font-bold pt-4 border-b border-border pb-2">Active Microservices</h2>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {agents.map((agent, i) => (
          <Card key={i} className={`border ${agent.status === 'Healthy' ? 'border-border' : 'border-yellow-500/50 shadow-[0_0_15px_-5px_rgba(234,179,8,0.3)]'} bg-background`}>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-lg font-bold flex items-center gap-2">
                <BrainCircuit className="text-[var(--cyan-ai)]" size={20} /> {agent.name}
              </CardTitle>
              <div className={`px-2.5 py-0.5 rounded-full text-xs font-bold ${agent.status === 'Healthy' ? 'bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)]' : 'bg-yellow-500/10 text-yellow-500 animate-pulse'}`}>
                {agent.status}
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-3 gap-4 mt-4">
                <div className="space-y-1">
                  <div className="text-xs text-muted-foreground flex items-center gap-1"><Zap size={12}/> Latency</div>
                  <div className="font-mono text-lg">{agent.latency}</div>
                </div>
                <div className="space-y-1">
                  <div className="text-xs text-muted-foreground flex items-center gap-1"><Server size={12}/> Tokens</div>
                  <div className="font-mono text-lg">{agent.tokens}</div>
                </div>
                <div className="space-y-1">
                  <div className="text-xs text-muted-foreground flex items-center gap-1"><ShieldCheck size={12}/> Success</div>
                  <div className="font-mono text-lg">{agent.successRate}</div>
                </div>
              </div>
              <div className="w-full bg-secondary h-1.5 rounded-full mt-6 overflow-hidden">
                <div 
                  className={`h-full ${agent.status === 'Healthy' ? 'bg-[var(--cyan-ai)]' : 'bg-yellow-500'}`} 
                  style={{ width: agent.successRate }}
                ></div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}