"use client";

import { motion } from 'framer-motion';
import { ExternalLink, Clock, Brain, Download, RefreshCw, ShoppingCart, Info } 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', image: '💻' },
  { id: 2, title: 'NVIDIA RTX 3080 Founders Edition', price: '$320.00', estValue: '$450.00', site: 'HiBid', time: '1h 12m', verdict: 'GOOD_DEAL', image: '🎮' },
  { 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', image: '📱' },
  { id: 4, title: 'Sony A7IV Mirrorless Camera Body', price: '$1500.00', estValue: '$1900.00', site: 'eBay UK', time: '5m 10s', verdict: 'URGENT', image: '📸' },
];

const containerVariants = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2
    }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 30, scale: 0.95 },
  show: { opacity: 1, y: 0, scale: 1, transition: { type: "spring" as const, stiffness: 300, damping: 24 } }
};

export default function ListingsPage() {
  return (
    <div className="container mx-auto px-6 py-12 relative">
      <div className="absolute top-[-20%] right-[-10%] w-[40%] h-[40%] bg-primary/10 rounded-full blur-[120px] pointer-events-none -z-10" />
      
      <motion.div 
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4"
      >
        <div>
          <h1 className="text-5xl font-black tracking-tight mb-2 flex items-center gap-4 drop-shadow-sm">
            Active Deals <motion.div whileHover={{ rotate: 15 }}><ShoppingCart className="w-10 h-10 text-primary drop-shadow-md" /></motion.div>
          </h1>
          <p className="text-muted-foreground text-xl font-medium">Live opportunities filtered by your AI agents.</p>
        </div>
        <div className="flex gap-3">
          <motion.button 
            whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}
            className="flex items-center gap-2 px-6 py-3 bg-secondary/80 backdrop-blur-md hover:bg-secondary border border-border/50 rounded-full font-bold transition-all shadow-sm"
          >
            <Download className="w-4 h-4" /> Export
          </motion.button>
          <motion.button 
            whileHover={{ scale: 1.05, boxShadow: "0 0 20px rgba(139, 92, 246, 0.4)" }} whileTap={{ scale: 0.95 }}
            className="flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-full font-bold shadow-lg transition-all relative overflow-hidden group"
          >
            <span className="absolute inset-0 bg-white/20 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-500" />
            <RefreshCw className="w-4 h-4 group-hover:rotate-180 transition-transform duration-500" /> Refresh
          </motion.button>
        </div>
      </motion.div>

      <motion.div 
        variants={containerVariants}
        initial="hidden"
        animate="show"
        className="grid gap-6"
      >
        {mockListings.map((lot) => (
          <motion.div 
            key={lot.id}
            variants={itemVariants}
            whileHover={{ y: -5, scale: 1.01 }}
            className="flex flex-col md:flex-row gap-6 p-6 bg-card/80 backdrop-blur-xl border border-white/5 hover:border-primary/40 transition-colors rounded-3xl group shadow-lg hover:shadow-2xl relative overflow-hidden"
          >
            <div className="absolute top-0 left-0 w-2 h-full bg-gradient-to-b from-primary to-accent opacity-0 group-hover:opacity-100 transition-opacity" />
            <div className="w-full md:w-64 h-48 bg-secondary/40 rounded-2xl flex flex-col items-center justify-center overflow-hidden relative border border-white/5 shadow-inner">
               <motion.span 
                 animate={{ y: [0, -10, 0] }}
                 transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
                 className="text-7xl group-hover:scale-110 transition-transform duration-500 drop-shadow-xl"
               >
                 {lot.image}
               </motion.span>
               <div className="absolute inset-0 bg-gradient-to-t from-primary/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            </div>
            <div className="flex-1 flex flex-col justify-between py-2">
              <div>
                <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-2">
                  <h3 className="font-black text-3xl leading-tight group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-primary group-hover:to-accent transition-all">{lot.title}</h3>
                  <div className={`px-5 py-2 text-sm font-black rounded-full whitespace-nowrap shadow-inner border ${lot.verdict === 'URGENT' ? 'bg-red-500/10 border-red-500/20 text-red-500' : lot.verdict === 'RESELLER_DREAM' ? 'bg-purple-500/10 border-purple-500/20 text-purple-500' : 'bg-green-500/10 border-green-500/20 text-green-500'}`}>
                    {lot.verdict.replace('_', ' ')}
                  </div>
                </div>
                <div className="flex flex-wrap items-center gap-4 text-sm font-bold text-muted-foreground mb-4">
                  <span className="flex items-center gap-2 bg-secondary/60 px-4 py-1.5 rounded-xl border border-white/5"><ExternalLink className="w-4 h-4" /> {lot.site}</span>
                  <span className="flex items-center gap-2 bg-amber-500/10 text-amber-500 px-4 py-1.5 rounded-xl border border-amber-500/20"><Clock className="w-4 h-4" /> Ends in {lot.time}</span>
                  <span className="flex items-center gap-2 bg-blue-500/10 text-blue-500 px-4 py-1.5 rounded-xl border border-blue-500/20"><Brain className="w-4 h-4" /> AI Verified</span>
                </div>
              </div>
              <div className="flex flex-col sm:flex-row justify-between items-end gap-4 mt-4">
                <div className="flex items-baseline gap-4">
                  <div className="text-5xl font-black text-foreground drop-shadow-md">{lot.price}</div>
                  <div className="text-sm font-black text-muted-foreground mb-1">
                    Est: <span className="line-through decoration-red-500 decoration-2">{lot.estValue}</span>
                  </div>
                </div>
                <motion.button 
                  whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}
                  className="w-full sm:w-auto px-8 py-4 bg-secondary/80 hover:bg-primary hover:text-primary-foreground rounded-2xl font-black text-lg transition-all shadow-md group-hover:shadow-xl flex items-center justify-center gap-3 border border-white/5 group-hover:border-primary/50"
                >
                  <Info className="w-5 h-5" /> Analyze Lot
                </motion.button>
              </div>
            </div>
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
}