/* eslint-disable @next/next/no-img-element */
import { Button } from '@/components/ui/button';
import { router } from '@inertiajs/react';
import { ChevronLeft, ChevronRight, Pencil, Plus, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';
import DeleteConfirmModal from '../../components/DeleteConfirmModal';
import PromotionFormModal, { ExistingBanner } from '../../components/PromotionFormModal';

declare const route: (...args: any[]) => string;

const FALLBACK_SLIDE = 'http://demo.localhost:3000/assets/hero-banner.jpg';
const FALLBACK_PROMO = 'http://demo.localhost:3000/assets/promo.jpg';
const PROMO_POSITION = 'home_top_right';

type ModalMode = 'add' | 'edit' | null;

interface OfferOption {
    value: string;
    label: string;
}

interface HeroBannerProps {
    offers?: OfferOption[];
    coupons?: OfferOption[];
    flashSales?: OfferOption[];
    banners?: Record<string, ExistingBanner>;
    sliderBanners?: ExistingBanner[];
    themeId?: number | null;
}

type SliderContext = {
    page: string;
    slider: boolean;
    position: string | null;
};

// ─── Overlay components ───────────────────────────────────────────────────────

const CarouselOverlay = ({ onAdd, onEdit, onDelete }: { onAdd: () => void; onEdit: () => void; onDelete: () => void }) => (
    <div className="absolute inset-0 flex items-center justify-center gap-3 bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
        <Button size="sm" onClick={(e) => { e.stopPropagation(); onAdd(); }} className="flex items-center gap-1.5 bg-white text-black hover:bg-white/90">
            <Plus className="h-3.5 w-3.5" /> Add
        </Button>
        <Button size="sm" onClick={(e) => { e.stopPropagation(); onEdit(); }} className="flex items-center gap-1.5 bg-white text-black hover:bg-white/90">
            <Pencil className="h-3.5 w-3.5" /> Edit
        </Button>
        <Button size="sm" onClick={(e) => { e.stopPropagation(); onDelete(); }} className="flex items-center gap-1.5 bg-red-500 text-white hover:bg-red-600">
            <Trash2 className="h-3.5 w-3.5" /> Delete
        </Button>
    </div>
);

export const CardOverlay = ({ onEdit }: { onEdit: () => void }) => (
    <div className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
        <Button size="sm" onClick={(e) => { e.stopPropagation(); onEdit(); }} className="flex items-center gap-1.5 bg-white text-black hover:bg-white/90">
            <Pencil className="h-3.5 w-3.5" /> Edit
        </Button>
    </div>
);

// ─── Main component ───────────────────────────────────────────────────────────

const HeroBanner = ({ offers = [], coupons = [], flashSales = [], banners = {}, sliderBanners = [], themeId = null }: HeroBannerProps) => {
    const [current, setCurrent] = useState(0);
    const [modalMode, setModalMode] = useState<ModalMode>(null);
    const [sliderContext, setSliderContext] = useState<SliderContext | null>(null);
    const [deletePosition, setDeletePosition] = useState<string | null>(null);
    const isPaused = useRef(false);

    // Build slides from DB slider banners; fallback to single placeholder
    const activeSliderBanners = sliderBanners.filter((b) => b.slider && b.status === 1);
    const slides =
        activeSliderBanners.length > 0
            ? activeSliderBanners.map((b) => ({ position: b.position, image: b.image_url ?? FALLBACK_SLIDE, banner: b }))
            : [{ position: 'home_top', image: FALLBACK_SLIDE, banner: null as ExistingBanner | null }];

    const slideCount = slides.length;
    const activeSlide = slides[Math.min(current, slideCount - 1)];

    const goPrev = useCallback(() => setCurrent((c) => (c - 1 + slideCount) % slideCount), [slideCount]);
    const goNext = useCallback(() => setCurrent((c) => (c + 1) % slideCount), [slideCount]);

    // Auto-advance every 4 s; pause while modal/delete is open or on hover
    useEffect(() => {
        if (slideCount <= 1) return;
        const timer = setInterval(() => {
            if (!isPaused.current && modalMode === null && deletePosition === null) goNext();
        }, 4000);
        return () => clearInterval(timer);
    }, [slideCount, goNext, modalMode, deletePosition]);

    const promoBanner = banners[PROMO_POSITION] ?? null;
    const promoImage = promoBanner?.image_url ?? FALLBACK_PROMO;

    // Add: position is null so backend generates a new unique slug → always INSERT
    const handleAdd = () => {
        setSliderContext({ page: 'home', slider: true, position: null });
        setModalMode('add');
    };

    const handleEdit = (position: string) => {
        setSliderContext({ page: 'home', slider: true, position });
        setModalMode('edit');
    };

    const handleEditPromo = () => {
        setSliderContext({ page: 'home', slider: false, position: PROMO_POSITION });
        setModalMode('edit');
    };

    const handleClose = () => {
        setModalMode(null);
        setSliderContext(null);
    };

    const handleDeleteConfirm = (position: string) => {
        router.delete(route('promotion.banner.destroy', { position }), {
            preserveScroll: true,
            onFinish: () => setDeletePosition(null),
        });
    };

    // For 'add' mode existing must always be null — never pre-populate from the current slide.
    // For 'edit' mode: slider uses the active slide's banner; cards use banners map by position.
    const existingBanner =
        modalMode === 'add'
            ? null
            : sliderContext?.slider
              ? (activeSlide.banner ?? null)
              : sliderContext?.position
                ? (banners[sliderContext.position] ?? null)
                : null;

    return (
        <section className="mb-6 flex w-full gap-3">
            {/* Image Carousel — 2/3 width, driven by DB slider banners */}
            <div
                className="group relative h-48 w-full overflow-hidden rounded-lg sm:h-56 md:h-72 lg:h-80 lg:w-2/3"
                onMouseEnter={() => { isPaused.current = true; }}
                onMouseLeave={() => { isPaused.current = false; }}
            >
                {slides.map((slide, i) => (
                    <img
                        key={i}
                        src={slide.image}
                        alt="Hero banner"
                        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${i === current ? 'opacity-100' : 'opacity-0'}`}
                    />
                ))}

                <CarouselOverlay
                    onAdd={() => handleAdd()}
                    onEdit={() => handleEdit(activeSlide.position)}
                    onDelete={() => setDeletePosition(activeSlide.position)}
                />

                {/* Left / Right arrows — only when multiple slides */}
                {slideCount > 1 && (
                    <>
                        <button
                            onClick={(e) => { e.stopPropagation(); goPrev(); }}
                            className="absolute left-3 top-1/2 -translate-y-1/2 cursor-pointer rounded-full bg-black/40 p-2.5 text-white backdrop-blur-sm transition hover:bg-black/60"
                        >
                            <ChevronLeft className="h-7 w-7" />
                        </button>
                        <button
                            onClick={(e) => { e.stopPropagation(); goNext(); }}
                            className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer rounded-full bg-black/40 p-2.5 text-white backdrop-blur-sm transition hover:bg-black/60"
                        >
                            <ChevronRight className="h-7 w-7" />
                        </button>

                        {/* Dots */}
                        <div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1.5">
                            {slides.map((_, i) => (
                                <button
                                    key={i}
                                    onClick={() => setCurrent(i)}
                                    className={`h-2 w-2 rounded-full transition-all ${i === current ? 'w-5 bg-white' : 'bg-white/50'}`}
                                />
                            ))}
                        </div>
                    </>
                )}
            </div>

            {/* Promo Banner — 1/3 width (Edit only) */}
            <div className="group relative hidden h-80 w-1/3 overflow-hidden rounded-lg lg:block">
                <img src={promoImage} alt="Promo banner" className="h-full w-full object-cover" />
                <CardOverlay onEdit={handleEditPromo} />
            </div>

            <PromotionFormModal
                open={modalMode !== null}
                onClose={handleClose}
                mode={modalMode}
                page={sliderContext?.page ?? null}
                slider={sliderContext?.slider ?? false}
                position={sliderContext?.position ?? null}
                existing={existingBanner}
                offers={offers}
                coupons={coupons}
                flashSales={flashSales}
                themeId={themeId}
            />

            <DeleteConfirmModal
                open={deletePosition !== null}
                onClose={() => setDeletePosition(null)}
                onConfirm={() => deletePosition && handleDeleteConfirm(deletePosition)}
                id={deletePosition}
            />
        </section>
    );
};

export default HeroBanner;