"use client";

import { motion } from 'framer-motion';
import { Activity, Zap, ShieldAlert, Cpu } from 'lucide-react';

export default function DashboardPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex justify-between items-end mb-8">
        <div>
          <h1 className="text-3xl font-bold font-mono tracking-tight mb-2">SYSTEM_<span className="text-primary">OVERVIEW</span></h1>
          <p className="text-muted-foreground">Real-time status of all autonomous agents.</p>
        </div>
        <div className="flex items-center gap-2 px-3 py-1 bg-card border border-border rounded font-mono text-sm">
          Status: <span className="text-primary animate-pulse">RUNNING</span>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        {[
          { title: 'Lots Scanned', value: '142,893', icon: Activity, color: 'text-primary' },
          { title: 'Active Targets', value: '84', icon: Zap, color: 'text-accent' },
          { title: 'Alerts Fired', value: '1,204', icon: ShieldAlert, color: 'text-destructive' },
          { title: 'AI Decisions', value: '89,430', icon: Cpu, color: 'text-primary' },
        ].map((stat, i) => (
          <motion.div 
            key={i}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.1 }}
            className="p-6 bg-card border border-border rounded-lg"
          >
            <div className="flex justify-between items-start mb-4">
              <div className="text-muted-foreground font-mono text-sm">{stat.title}</div>
              <stat.icon className={`w-5 h-5 ${stat.color}`} />
            </div>
            <div className={`text-3xl font-bold font-mono ${stat.color}`}>{stat.value}</div>
          </motion.div>
        ))}
      </div>

      <div className="grid lg:grid-cols-3 gap-8">
        <div className="col-span-2">
          <motion.div 
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4 }}
            className="p-6 bg-card border border-border rounded-lg h-96 flex flex-col"
          >
            <h2 className="text-xl font-bold font-mono mb-4 border-b border-border pb-2">LIVE_ACTIVITY_LOG</h2>
            <div className="flex-1 overflow-auto font-mono text-sm space-y-3">
              <div className="flex gap-4 text-muted-foreground"><span className="text-primary">[10:42:01]</span> <span>Scout Agent detected new items on eBay_UK...</span></div>
              <div className="flex gap-4 text-muted-foreground"><span className="text-primary">[10:41:55]</span> <span>Analyst Agent processing 14 lots for "RTX 4090"...</span></div>
              <div className="flex gap-4 text-accent"><span className="text-primary">[10:41:30]</span> <span>MATCH FOUND: "RTX 4090 Box Only" - Rejected by AI (Reason: Scam)</span></div>
              <div className="flex gap-4 text-primary"><span className="text-primary">[10:40:12]</span> <span>HIGH VALUE MATCH: "ThinkPad T14 Gen 3" - $450 (Est: $800). Alert Sent.</span></div>
              <div className="flex gap-4 text-muted-foreground"><span className="text-primary">[10:39:45]</span> <span>Strategist Agent optimizing scrape timings for ShopGoodwill...</span></div>
            </div>
          </motion.div>
        </div>
        <div>
          <motion.div 
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }}
            className="p-6 bg-card border border-border rounded-lg h-96"
          >
            <h2 className="text-xl font-bold font-mono mb-4 border-b border-border pb-2">NODE_HEALTH</h2>
            <div className="space-y-4">
               <div>
                 <div className="flex justify-between text-sm mb-1 font-mono"><span>eBay US</span> <span className="text-primary">100%</span></div>
                 <div className="w-full bg-background rounded-full h-1.5"><div className="bg-primary h-1.5 rounded-full" style={{width: '100%'}}></div></div>
               </div>
               <div>
                 <div className="flex justify-between text-sm mb-1 font-mono"><span>eBay UK</span> <span className="text-primary">98%</span></div>
                 <div className="w-full bg-background rounded-full h-1.5"><div className="bg-primary h-1.5 rounded-full" style={{width: '98%'}}></div></div>
               </div>
               <div>
                 <div className="flex justify-between text-sm mb-1 font-mono"><span>HiBid</span> <span className="text-accent">85%</span></div>
                 <div className="w-full bg-background rounded-full h-1.5"><div className="bg-accent h-1.5 rounded-full" style={{width: '85%'}}></div></div>
               </div>
               <div>
                 <div className="flex justify-between text-sm mb-1 font-mono"><span>ShopGoodwill</span> <span className="text-primary">99%</span></div>
                 <div className="w-full bg-background rounded-full h-1.5"><div className="bg-primary h-1.5 rounded-full" style={{width: '99%'}}></div></div>
               </div>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}