"use client";

import { motion } from 'framer-motion';
import { ShieldCheck, ShieldAlert, Cpu, Network, PauseCircle, PlayCircle, Plus } from 'lucide-react';

const mockSites = [
  { id: 1, name: 'eBay US', url: 'ebay.com', status: 'healthy', lag: '240ms', lastScrape: '2s ago' },
  { id: 2, name: 'eBay UK', url: 'ebay.co.uk', status: 'healthy', lag: '310ms', lastScrape: '5s ago' },
  { id: 3, name: 'HiBid', url: 'hibid.com', status: 'warning', lag: '1200ms', lastScrape: '1m ago' },
  { id: 4, name: 'ShopGoodwill', url: 'shopgoodwill.com', status: 'healthy', lag: '450ms', lastScrape: '12s ago' },
];

export default function SitesPage() {
  return (
    <div className="container mx-auto px-6 py-12">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4">
        <div>
          <h1 className="text-4xl font-extrabold tracking-tight mb-2 flex items-center gap-3">
            Network Nodes <span className="text-primary"><Network className="w-8 h-8" /></span>
          </h1>
          <p className="text-muted-foreground text-lg">Manage and monitor the auction platforms your agents are scraping.</p>
        </div>
        <button className="flex items-center gap-2 px-6 py-3 bg-secondary hover:bg-secondary/80 border-2 border-border/50 text-foreground transition-all rounded-full font-bold shadow-sm hover:shadow-md hover:-translate-y-0.5">
          <Plus className="w-5 h-5" /> Add New Site
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {mockSites.map((site, i) => (
          <motion.div 
            key={site.id}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.1, type: "spring" }}
            className={`p-6 rounded-3xl border-2 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 ${site.status === 'healthy' ? 'bg-card border-border/50' : 'bg-amber-500/5 border-amber-500/30'}`}
          >
            <div className="flex justify-between items-start mb-6">
              <div>
                <h3 className="font-bold text-xl mb-1">{site.name}</h3>
                <div className="text-sm font-medium text-muted-foreground bg-secondary/50 px-2 py-0.5 rounded-md inline-block">{site.url}</div>
              </div>
              <div className={`p-2 rounded-xl ${site.status === 'healthy' ? 'bg-green-500/10' : 'bg-amber-500/10'}`}>
                {site.status === 'healthy' ? (
                  <ShieldCheck className="w-6 h-6 text-green-500" />
                ) : (
                  <ShieldAlert className="w-6 h-6 text-amber-500 animate-pulse" />
                )}
              </div>
            </div>
            
            <div className="space-y-4 font-medium text-sm">
              <div className="flex justify-between items-center p-3 bg-secondary/30 rounded-xl">
                <span className="text-muted-foreground">Latency</span>
                <span className={`font-bold ${site.status === 'healthy' ? 'text-foreground' : 'text-amber-500'}`}>{site.lag}</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-secondary/30 rounded-xl">
                <span className="text-muted-foreground">Last Ping</span>
                <span className="font-bold">{site.lastScrape}</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-secondary/30 rounded-xl">
                <span className="text-muted-foreground">Selectors</span>
                <span className="font-bold text-green-500">Verified</span>
              </div>
            </div>

            <div className="mt-6 flex gap-3">
               <button className="flex-1 py-2.5 bg-secondary hover:bg-primary hover:text-primary-foreground rounded-xl text-sm font-bold transition-colors flex items-center justify-center gap-2">
                 <Cpu className="w-4 h-4" /> Inspect
               </button>
               <button className="p-2.5 bg-secondary hover:bg-amber-500/10 text-muted-foreground hover:text-amber-500 rounded-xl transition-colors flex items-center justify-center">
                 <PauseCircle className="w-5 h-5" />
               </button>
            </div>
          </motion.div>
        ))}
      </div>

      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.4 }}
        className="mt-12 p-8 bg-gradient-to-br from-primary/10 to-accent/5 border-2 border-primary/20 rounded-3xl"
      >
        <div className="flex items-center gap-3 mb-4">
          <div className="p-3 bg-primary/20 rounded-2xl">
            <Cpu className="w-6 h-6 text-primary" />
          </div>
          <h3 className="text-2xl font-bold">Auto-Adaptation Engine</h3>
        </div>
        <p className="text-lg text-muted-foreground max-w-3xl mb-6 font-medium">
          The engine can autonomously learn new site structures. Provide a target URL, and the Scout Agent will attempt to generate valid selectors for listings, prices, and countdown timers.
        </p>
        <div className="flex flex-col sm:flex-row gap-4">
          <input 
            type="text" 
            placeholder="https://example-auction.com" 
            className="flex-1 bg-background/80 backdrop-blur-sm border-2 border-border/50 rounded-2xl px-6 py-4 text-lg focus:outline-none focus:border-primary transition-colors shadow-inner" 
          />
          <button className="px-8 py-4 bg-primary text-primary-foreground font-bold text-lg rounded-2xl hover:bg-primary/90 transition-all shadow-lg hover:shadow-primary/30 flex items-center justify-center gap-2 hover:-translate-y-0.5 active:translate-y-0">
            <PlayCircle className="w-6 h-6" />
            Initiate Scan
          </button>
        </div>
      </motion.div>
    </div>
  );
}