
import React, { useState, useEffect } from 'react';
import { Product, SiteSettings } from '../types';
import { ArrowRight } from 'lucide-react';
import { getDisplayName } from '../lib/displayName';

interface ProductFeatureSliderProps {
  products: Product[];
  onSelect: (product: Product) => void;
  settings?: SiteSettings;
}

const ProductFeatureSlider: React.FC<ProductFeatureSliderProps> = ({ products, onSelect, settings }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  // Filter products that are marked as featured
  const displayProducts = products.filter(p => p.isFeatured).slice(0, 5);

  // Fallback if no products are marked as featured
  const finalProducts = displayProducts.length > 0 ? displayProducts : products.slice(0, 3);

  useEffect(() => {
    if (finalProducts.length <= 1) return;
    const interval = setInterval(() => {
      setActiveIndex((prev) => (prev + 1) % finalProducts.length);
    }, 4000);

    return () => clearInterval(interval);
  }, [finalProducts.length]);

  if (finalProducts.length === 0) return null;

  return (
    <section className="py-12 bg-white dark:bg-slate-900 overflow-hidden relative">
      {/* Decorative background removed per request */}

      <div className="container mx-auto px-4 relative z-10">
        <div className="mb-8 flex items-end justify-between">
          <div>
            <span className="text-red-600 font-black uppercase tracking-[0.2em] text-xs font-bangla mb-2 block">
              সেরা সংগ্রহ
            </span>
            <h2 className="text-3xl md:text-5xl font-black font-bangla text-black dark:text-white">
              আমাদের <span className="text-red-600">সেরা</span> পণ্যসমূহ
            </h2>
          </div>
          <div className="hidden md:flex gap-2">
            {finalProducts.map((_, i) => (
              <div 
                key={i} 
                className={`h-1.5 transition-all duration-300 rounded-full ${i === activeIndex ? 'w-12 bg-red-600' : 'w-3 bg-slate-200 dark:bg-slate-700'}`}
              />
            ))}
          </div>
        </div>

        <div className="relative h-[400px] md:h-[600px] rounded-[40px] overflow-hidden shadow-2xl border-4 border-slate-50 dark:border-slate-800">
          <div 
            className="flex h-full transition-transform duration-700 ease-in-out" 
            style={{ transform: `translateX(-${activeIndex * 100}%)` }}
          >
            {finalProducts.map((product) => (
              <div 
                key={product.id} 
                className="min-w-full h-full relative group cursor-pointer"
                onClick={() => onSelect(product)}
              >
                {/* Product Image */}
                <img 
                  src={product.image} 
                  alt={product.name} 
                  className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" 
                />
                
                {/* Gradient Overlay */}
                <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/20 to-transparent" />

                {/* Content Overlay */}
                <div className="absolute inset-0 flex items-center p-8 md:p-20">
                  <div className="max-w-xl animate-fade-in-up">
                    <span className="bg-red-600 text-white text-[10px] md:text-xs font-black px-4 py-2 rounded-full uppercase tracking-widest mb-6 inline-block shadow-lg">
                      {product.category} Collection
                    </span>
                                        <h2 className="text-4xl md:text-7xl font-black font-bangla text-white mb-6 leading-none">
                      {getDisplayName(product.nameBangla, product.name)}
                    </h2>
                    <p className="text-lg md:text-2xl text-slate-300 mb-10 font-bangla font-medium line-clamp-2 italic">
                      "{product.highlight}"
                    </p>
                    
                    <div className="flex items-center gap-6">
                      <div className="flex flex-col">
                        <span className="text-slate-400 text-xs font-bold uppercase tracking-widest">দাম শুরু</span>
                        <span className="text-3xl md:text-5xl font-black text-white">৳{product.price}</span>
                      </div>
                      <button 
                        className="px-8 py-4 bg-white text-black rounded-2xl font-black flex items-center gap-3 hover:bg-red-600 hover:text-white transition-all transform active:scale-95 shadow-xl"
                      >
                        বিস্তারিত দেখুন <ArrowRight size={20} />
                      </button>
                    </div>
                  </div>
                </div>

                {/* Large decorative text in background */}
                <div className="absolute -bottom-10 -right-10 opacity-10 pointer-events-none select-none">
                  <span className="text-[200px] font-black text-white whitespace-nowrap">
                    {(product.nameBangla || product.name).split(' ')[0]}
                  </span>
                </div>
              </div>
            ))}
          </div>

          {/* Progress bar at the very bottom */}
          <div className="absolute bottom-0 left-0 h-1 bg-red-600/30 w-full">
             <div 
               className="h-full bg-red-600 transition-all duration-700 ease-out"
               style={{ width: `${((activeIndex + 1) / finalProducts.length) * 100}%` }}
             />
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProductFeatureSlider;
