import React, { useState, useEffect, useCallback } from 'react';
import { Link } from '@inertiajs/react';
import { Card } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { ChevronRight, ChevronLeft, Store, LayoutGrid } from "lucide-react";
import CategoryModal from '@/Components/CategoryModal';
import { useTranslation } from '@/hooks/useTranslation';

export default function HeroSection({ dbCategories, banners }) {
    const { t } = useTranslation();
    const [currentBanner, setCurrentBanner] = useState(0);
    const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
    const [selectedCategoryId, setSelectedCategoryId] = useState(null);

    const nextBanner = useCallback(() => {
        setCurrentBanner((prev) => (prev + 1) % banners.length);
    }, [banners.length]);

    const prevBanner = () => {
        setCurrentBanner((prev) => (prev - 1 + banners.length) % banners.length);
    };

    useEffect(() => {
        if (banners.length <= 1) return;
        const interval = setInterval(nextBanner, 5000); 
        return () => clearInterval(interval);
    }, [banners.length, nextBanner]);

    const openCategoryModal = (categoryId = null) => {
        setSelectedCategoryId(categoryId);
        setIsCategoryModalOpen(true);
    };

    return (
        <>
            <CategoryModal 
                isOpen={isCategoryModalOpen} 
                onClose={() => setIsCategoryModalOpen(false)} 
                categories={dbCategories}
                initialCategoryId={selectedCategoryId}
            />

            <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-8">
                
                {/* Categories Sidebar */}
                <Card className="hidden lg:block border-none shadow-sm h-[380px] overflow-hidden bg-card relative">
                    <div className="p-4 font-bold border-b bg-muted/10 text-foreground">
                        {t('Categories')}
                    </div>
                    
                    <div className="p-2 flex flex-col overflow-y-auto h-[320px] no-scrollbar pb-16">
                        {dbCategories.map((cat) => (
                            <button 
                                key={cat.id} 
                                onClick={() => openCategoryModal(cat.id)}
                                className="flex items-center justify-between w-full p-2.5 hover:bg-muted rounded-lg transition-colors text-sm text-left group outline-none"
                            >
                                <span className="flex items-center gap-3">
                                    <div className="p-1 w-8 h-8 rounded-md bg-muted/50 flex items-center justify-center overflow-hidden shrink-0">
                                        {cat.image_path ? (
                                            <img src={`/storage/${cat.image_path}`} className="w-5 h-5 object-contain grayscale opacity-80" alt={cat.name} />
                                        ) : (
                                            <LayoutGrid className="w-4 h-4 text-muted-foreground" />
                                        )}
                                    </div>
                                    <span className="font-semibold text-foreground/80 group-hover:text-foreground line-clamp-1">{cat.name}</span>
                                </span>
                                <ChevronRight className="w-4 h-4 shrink-0 text-muted-foreground opacity-50" />
                            </button>
                        ))}
                    </div>

                    <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-card via-card/90 to-transparent flex items-end justify-center pb-4 pointer-events-none">
                        <Button 
                            onClick={() => openCategoryModal()}
                            variant="outline" 
                            className="rounded-full shadow-lg bg-background text-foreground font-bold px-6 pointer-events-auto border-border/50 hover:bg-muted hover:text-primary transition-all"
                        >
                            {t('View all')} <ChevronRight className="w-4 h-4 ml-1" />
                        </Button>
                    </div>
                </Card>

                {/* Main Slider / Hero Area: h-[150px] mobile, h-[380px] desktop */}
                <div className="lg:col-span-3 rounded-2xl shadow-lg h-[150px] sm:h-[280px] lg:h-[380px] relative overflow-hidden bg-muted group">
                    {banners.length > 0 ? (
                        <>
                            {banners.map((banner, idx) => (
                                <div 
                                    key={banner.id}
                                    className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${idx === currentBanner ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}
                                >
                                    {banner.link ? (
                                        <a href={banner.link} className="block w-full h-full">
                                            <img src={`/storage/${banner.image_path}`} alt={banner.title} className="w-full h-full object-cover" />
                                        </a>
                                    ) : (
                                        <img src={`/storage/${banner.image_path}`} alt={banner.title} className="w-full h-full object-cover" />
                                    )}
                                </div>
                            ))}
                            
                            {/* Navigation Arrows */}
                            {banners.length > 1 && (
                                <>
                                    <button 
                                        onClick={prevBanner}
                                        className="absolute left-4 top-1/2 -translate-y-1/2 z-20 w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-black/20 hover:bg-black/50 text-white flex items-center justify-center backdrop-blur-sm transition-all opacity-0 group-hover:opacity-100 outline-none"
                                    >
                                        <ChevronLeft className="w-5 h-5" />
                                    </button>
                                    <button 
                                        onClick={nextBanner}
                                        className="absolute right-4 top-1/2 -translate-y-1/2 z-20 w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-black/20 hover:bg-black/50 text-white flex items-center justify-center backdrop-blur-sm transition-all opacity-0 group-hover:opacity-100 outline-none"
                                    >
                                        <ChevronRight className="w-5 h-5" />
                                    </button>
                                </>
                            )}
                        </>
                    ) : (
                        <div className="w-full h-full flex flex-col items-center justify-center bg-gradient-to-br from-primary via-primary/95 to-primary/80 text-primary-foreground p-4 sm:p-8 text-center relative overflow-hidden">
                            <h2 className="text-xl sm:text-3xl md:text-5xl font-extrabold mb-2 leading-tight relative z-10">
                                {t('Discover exceptional deals')}
                            </h2>
                            <p className="opacity-80 text-xs sm:text-sm md:text-lg max-w-lg relative z-10 font-medium">
                                {t('Shop our curated collections with global shipping.')}
                            </p>
                            <div className="mt-4 sm:mt-8 relative z-10">
                                <Button size="sm" sm="lg" variant="secondary" className="rounded-full px-6 font-bold" asChild>
                                    <Link href="/">{t('Start Shopping')}</Link>
                                </Button>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}