"use client";

import { motion } from 'framer-motion';
import { ExternalLink, Clock, Brain } from 'lucide-react';

const mockListings = [
  { id: 1, title: 'Lenovo ThinkPad T14 Gen 3 AMD Ryzen 7', price: '$450.00', estValue: '$800.00', site: 'eBay US', time: '14m 30s', verdict: 'HIGH_OPPORTUNITY' },
  { id: 2, title: 'NVIDIA RTX 3080 Founders Edition', price: '$320.00', estValue: '$450.00', site: 'HiBid', time: '1h 12m', verdict: 'GOOD_DEAL' },
  { id: 3, title: 'Lot of 10x iPhone 12 Pro 128GB Unlocked', price: '$1200.00', estValue: '$2500.00', site: 'ShopGoodwill', time: '4h 05m', verdict: 'RESELLER_DREAM' },
  { id: 4, title: 'Sony A7IV Mirrorless Camera Body', price: '$1500.00', estValue: '$1900.00', site: 'eBay UK', time: '5m 10s', verdict: 'URGENT' },
];

export default function ListingsPage() {
  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">ACTIVE_<span className="text-primary">LISTINGS</span></h1>
          <p className="text-muted-foreground">Filtered lots currently matching your target criteria.</p>
        </div>
        <div className="flex gap-2">
          <button className="px-4 py-2 bg-card border border-border rounded font-mono text-sm hover:border-primary transition-colors">Export CSV</button>
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded font-mono text-sm font-bold shadow-[0_0_10px_rgba(0,255,136,0.3)]">Force Refresh</button>
        </div>
      </div>

      <div className="grid gap-4">
        {mockListings.map((lot, i) => (
          <motion.div 
            key={lot.id}
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: i * 0.1 }}
            className="flex flex-col md:flex-row gap-4 p-4 bg-card border border-border hover:border-primary/50 transition-colors rounded-lg group"
          >
            <div className="w-full md:w-48 h-32 bg-background rounded border border-border flex items-center justify-center text-muted-foreground font-mono text-xs overflow-hidden relative">
               <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
               [IMAGE_DATA]
            </div>
            <div className="flex-1 flex flex-col justify-between">
              <div>
                <div className="flex justify-between items-start mb-2">
                  <h3 className="font-bold text-lg leading-tight group-hover:text-primary transition-colors">{lot.title}</h3>
                  <div className={`px-2 py-1 text-xs font-mono rounded ${lot.verdict === 'URGENT' ? 'bg-destructive/20 text-destructive border border-destructive/30' : 'bg-primary/10 text-primary border border-primary/30'}`}>
                    {lot.verdict}
                  </div>
                </div>
                <div className="flex items-center gap-4 text-sm font-mono text-muted-foreground mb-4">
                  <span className="flex items-center gap-1"><ExternalLink className="w-3 h-3" /> {lot.site}</span>
                  <span className="flex items-center gap-1 text-accent"><Clock className="w-3 h-3" /> {lot.time}</span>
                  <span className="flex items-center gap-1"><Brain className="w-3 h-3 text-primary" /> Verified</span>
                </div>
              </div>
              <div className="flex justify-between items-end">
                <div>
                  <div className="text-2xl font-bold font-mono">{lot.price}</div>
                  <div className="text-xs font-mono text-muted-foreground">Est. Value: <span className="line-through">{lot.estValue}</span></div>
                </div>
                <button className="px-6 py-2 bg-background border border-border hover:border-primary hover:text-primary rounded font-mono text-sm transition-all group-hover:shadow-[0_0_15px_rgba(0,255,136,0.1)]">
                  ANALYZE LOT
                </button>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  );
}