"use client";

import { motion } from "framer-motion";
import { ShoppingCart, Eye, Star, Zap } from "lucide-react";
import { useCartStore } from "@/store/cart";

export default function FeaturedMachines({ dict, dbProducts }: { dict: any, dbProducts?: any[] }) {
  const addItem = useCartStore((state) => state.addItem);

  const defaultMachines = [
    {
      id: "shredder-1",
      name: "SECUR-PRO 400 HS6",
      category: "High Security Shredder",
      specs: [
        { label: "Security Level", value: "P-7 / NSA" },
        { label: "Capacity", value: "18 sheets" },
        { label: "Speed", value: "0.1 m/sec" }
      ],
      price: 245000.00,
      image: "/uploads/products/prod1.png",
      isPopular: true,
      rating: 4.9,
      reviews: 124
    },
    {
      id: "shredder-2",
      name: "OFFICE COMPACT 200",
      category: "Office Shredder",
      specs: [
        { label: "Security Level", value: "P-4" },
        { label: "Capacity", value: "12 sheets" },
        { label: "Bin Size", value: "30 Liters" }
      ],
      price: 45000.00,
      image: "/uploads/products/prod2.png",
      isPopular: false,
      rating: 4.5,
      reviews: 56
    },
    {
      id: "shredder-3",
      name: "TITAN INDUSTRIAL 800",
      category: "Industrial Shredder",
      specs: [
        { label: "Security Level", value: "P-5" },
        { label: "Capacity", value: "300 kg/h" },
        { label: "Motor", value: "7.5 kW" }
      ],
      price: 890000.00,
      image: "/uploads/products/prod3.png",
      isPopular: true,
      rating: 4.7,
      reviews: 89
    },
    {
      id: "shredder-4",
      name: "DATA-DESTROYER HDD",
      category: "HDD / SSD Disintegrator",
      specs: [
        { label: "Application", value: "HDD/SSD" },
        { label: "Capacity", value: "500 HDD/h" },
        { label: "Security", value: "H-5" }
      ],
      price: 1250000.00,
      image: "/uploads/products/prod4.png",
      isPopular: false,
      rating: 5.0,
      reviews: 215
    },
    {
      id: "shredder-5",
      name: "MICRO-CUT X50",
      category: "Office Shredder",
      specs: [
        { label: "Security Level", value: "P-5" },
        { label: "Capacity", value: "8 sheets" },
        { label: "Bin Size", value: "20 Liters" }
      ],
      price: 28000.00,
      image: "/uploads/products/prod2.png",
      isPopular: true,
      rating: 4.6,
      reviews: 34
    },
    {
      id: "shredder-6",
      name: "SECURE-DEPT 600",
      category: "Department Shredder",
      specs: [
        { label: "Security Level", value: "P-4" },
        { label: "Capacity", value: "30 sheets" },
        { label: "Bin Size", value: "100 Liters" }
      ],
      price: 135000.00,
      image: "/uploads/products/prod1.png",
      isPopular: false,
      rating: 4.8,
      reviews: 92
    },
    {
      id: "shredder-7",
      name: "HEAVY-DUTY GIGA 1500",
      category: "Industrial Shredder",
      specs: [
        { label: "Security Level", value: "P-3" },
        { label: "Capacity", value: "800 kg/h" },
        { label: "Motor", value: "15 kW" }
      ],
      price: 2100000.00,
      image: "/uploads/products/prod3.png",
      isPopular: true,
      rating: 4.9,
      reviews: 145
    },
    {
      id: "shredder-8",
      name: "OPTICAL-CRUSH CD/DVD",
      category: "Media Destroyer",
      specs: [
        { label: "Application", value: "CD/DVD/USB" },
        { label: "Capacity", value: "1000 items/h" },
        { label: "Security", value: "O-5" }
      ],
      price: 450000.00,
      image: "/uploads/products/prod4.png",
      isPopular: false,
      rating: 4.7,
      reviews: 78
    }
  ];

  let machines = defaultMachines;
  if (dbProducts && dbProducts.length > 0) {
    machines = dbProducts.map(p => ({
      id: p.id,
      name: p.name,
      category: p.category,
      specs: [{ label: "Description", value: p.description.substring(0, 50) + "..." }],
      price: p.price || 0,
      image: p.image || "/uploads/products/prod1.png",
      isPopular: false,
      rating: 5.0,
      reviews: 0
    }));
  } else if (dict.machines) {
    machines = defaultMachines.map((m, i) => ({...m, name: dict.machines[i]?.name || m.name, category: dict.machines[i]?.category || m.category, specs: m.specs.map((s, j) => ({...s, label: dict.machines[i]?.specs[j]?.label || s.label, value: dict.machines[i]?.specs[j]?.value || s.value})) }));
  }

  const handleAddToCart = (machine: any) => {
    addItem({
      id: machine.id,
      name: machine.name,
      price: machine.price,
      quantity: 1,
      image: machine.image
    });
    // In a real app, maybe show a toast notification here
  };

  return (
    <section id="products" className="py-24 bg-muted/30">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
          <motion.div 
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="max-w-2xl"
          >
            <h2 className="text-3xl md:text-4xl font-black text-foreground">
              {dict.featured?.title || 'Produits'} <span className="text-brand-accent">{dict.featured?.titleAccent || 'Recommandés'}</span>
            </h2>
            <p className="text-gray-500 mt-2">{dict.featured?.subtitle || 'Découvrez nos destructeurs industriels les mieux notés.'}</p>
          </motion.div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {machines.map((machine, index) => (
            <motion.div
              key={machine.id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1, duration: 0.5 }}
              className="group bg-card border border-border/50 rounded-xl overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col relative"
            >
              {/* Product Image Area */}
              <div 
                className="relative h-56 bg-white p-6 flex items-center justify-center overflow-hidden cursor-pointer"
                onClick={() => {
                  handleAddToCart(machine);
                  window.location.href = "/checkout";
                }}
              >
                {machine.isPopular && (
                  <div className="absolute top-2 left-2 bg-orange-500 text-white text-[10px] font-bold px-2 py-1 rounded-sm z-10 flex items-center gap-1 uppercase">
                    <Zap className="w-3 h-3 fill-white" /> {dict.featured?.bestSeller || 'Meilleure Vente'}
                  </div>
                )}
                <img 
                  src={machine.image} 
                  alt={machine.name} 
                  className="max-h-full max-w-full object-contain mix-blend-multiply group-hover:scale-105 transition-transform duration-500"
                />
              </div>

              {/* Product Info */}
              <div className="p-5 flex flex-col flex-grow">
                <div className="text-xs text-brand-accent font-semibold mb-1">
                  {machine.category}
                </div>
                <h3 
                  className="text-lg font-bold text-foreground mb-1 line-clamp-2 hover:text-brand-accent cursor-pointer transition-colors"
                  onClick={() => {
                    handleAddToCart(machine);
                    window.location.href = "/checkout";
                  }}
                >
                  {machine.name}
                </h3>
                
                {/* Ratings */}
                <div className="flex items-center gap-1 mb-3">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className={`w-4 h-4 ${i < Math.floor(machine.rating) ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}`} />
                  ))}
                  <span className="text-xs text-blue-500 ml-1 hover:underline cursor-pointer">{machine.reviews}</span>
                </div>



                <div className="space-y-1 mb-6 flex-grow">
                  {machine.specs.map((spec, i) => (
                    <div key={i} className="flex items-center text-xs text-gray-500">
                      <span className="font-semibold text-gray-700 dark:text-gray-300 w-24">{spec.label}:</span>
                      <span>{spec.value}</span>
                    </div>
                  ))}
                </div>

                {/* Action Buttons */}
                <div className="flex flex-col gap-2 mt-auto">
                  <button 
                    onClick={() => handleAddToCart(machine)}
                    className="w-full bg-brand-accent hover:bg-red-700 text-white py-2.5 rounded-md font-bold text-sm flex justify-center items-center gap-2 transition-colors shadow-sm"
                  >
                    <ShoppingCart className="w-4 h-4" />
                    {dict.featured?.addToCart || 'Ajouter au panier'}
                  </button>
                  <button 
                    onClick={() => {
                      handleAddToCart(machine);
                      window.location.href = "/checkout";
                    }}
                    className="w-full bg-white hover:bg-gray-50 text-foreground border border-gray-300 py-2.5 rounded-md font-bold text-sm transition-colors shadow-sm"
                  >
                    {dict.featured?.buyNow || 'Acheter maintenant'}
                  </button>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

      </div>
    </section>
  );
}
