import React, { useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import { URL_API } from "~/constants";
import type { IHero } from "~/api";

const getHeroImageUrl = (hero: IHero): string => {
    if (hero.imageUrl && (hero.imageUrl.startsWith("http://") || hero.imageUrl.startsWith("https://"))) {
        return hero.imageUrl;
    }

    const fromImageField = hero.image?.trim();
    const fromImageUrl = !fromImageField && hero.imageUrl ? (hero.imageUrl.split("/").filter(Boolean).pop() ?? "") : "";

    const fileName = fromImageField || fromImageUrl;
    if (!fileName) return hero.imageUrl ?? "";

    return `${URL_API}uploads/hero/${fileName}`;
};

const getHeroMobileImageUrl = (hero: IHero): string => {
    if (
        hero.imageMobileUrl &&
        (hero.imageMobileUrl.startsWith("http://") || hero.imageMobileUrl.startsWith("https://"))
    ) {
        return hero.imageMobileUrl;
    }

    return getHeroImageUrl(hero);
};

function BlockFinder() {
    const [banners, setBanners] = useState<IHero[]>([]);

    const sliderHeight = "590px";

    useEffect(() => {
        const getBanners = async () => {
            try {
                const { heroApi } = await import("~/api");
                const res = await heroApi.getAllHeroes();
                setBanners(Array.isArray(res) ? res : []);
            } catch (error) {
                console.error("Error cargando banners:", error);
            }
        };
        getBanners();
    }, []);

    const handleRedirect = (url: string | null) => {
        if (!url || url.trim() === "") return;

        const finalUrl = url.startsWith("http") ? url : `https://${url}`;
        window.open(finalUrl, "_blank", "noopener,noreferrer");
    };

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

    return (
        <div className="block block-finder p-0">
            <Swiper
                modules={[Navigation, Pagination, Autoplay]}
                spaceBetween={0}
                slidesPerView={1}
                navigation={banners.length > 1}
                pagination={banners.length > 1 ? { clickable: true } : false}
                autoplay={{ delay: 6000, disableOnInteraction: false }}
                loop={banners.length > 1}
                speed={2000}
                style={{ height: "100%", width: "100%" }}
            >
                {banners.map((item, index) => {
                    const hasLink = !!item.redirectUrl;
                    const imageUrlDesktop = getHeroImageUrl(item);
                    const imageUrlMobile = getHeroMobileImageUrl(item);

                    return (
                        <SwiperSlide key={item.heroID ?? item.id ?? index}>
                            <div
                                className="block-finder__item"
                                style={{ cursor: hasLink ? "pointer" : "default" }}
                                onClick={() => handleRedirect(item.redirectUrl)}
                            >
                                {/* Imagen desktop (horizontal) */}
                                <div
                                    className="block-finder__image block-finder__image--desktop"
                                    style={{ backgroundImage: `url(${imageUrlDesktop})` }}
                                />

                                {/* Imagen mobile (vertical) */}
                                <div
                                    className="block-finder__image block-finder__image--mobile"
                                    style={{ backgroundImage: `url(${imageUrlMobile})` }}
                                />

                                {/* Contenido de texto */}
                                <div className="block-finder__body container container--max--xl">
                                    {item.title && (
                                        <div className="block-finder__title">{item.title}</div>
                                    )}
                                    {item.subtitle && (
                                        <div className="block-finder__subtitle">{item.subtitle}</div>
                                    )}
                                </div>
                            </div>
                        </SwiperSlide>
                    );
                })}
            </Swiper>

            <style jsx global>{`
                .block-finder {
                    height: ${sliderHeight} !important;
                    width: 100%;
                    overflow: hidden;
                    background-color: #1a1a1a;
                }
                /* Slide: contenedor de imagen + texto */
                .block-finder .block-finder__item {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                }
                /* Imagenes de fondo (desktop y mobile comparten base) */
                .block-finder .block-finder__image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-repeat: no-repeat;
                    z-index: 0;
                }
                .block-finder .block-finder__image--mobile {
                    background-position: center;
                }
                /* Contenido de texto sobre la imagen */
                .block-finder .block-finder__body {
                    z-index: 1;
                    position: relative;
                    width: 100%;
                    pointer-events: none;
                }
                .block-finder .block-finder__title {
                    color: #fff;
                    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
                    font-size: 2.5rem;
                    font-weight: bold;
                }
                .block-finder .block-finder__subtitle {
                    color: #fff;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
                    font-size: 1.2rem;
                }
                .block-finder .swiper,
                .block-finder .swiper-wrapper,
                .block-finder .swiper-slide {
                    height: 100% !important;
                }
                /* Línea vertical divisoria entre cada imagen del slider */
                .block-finder .swiper-slide {
                    border-right: 2px solid #000;
                    box-shadow: -6px 0 8px rgba(0, 0, 0, 0.6), 6px 0 8px rgba(0, 0, 0, 0.6);
                    box-sizing: border-box !important;
                }
                .block-finder .swiper-pagination {
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    gap: 8px !important;
                    position: absolute !important;
                    bottom: 20px !important;
                    left: 50% !important;
                    transform: translateX(-50%) !important;
                    z-index: 10 !important;
                }
                .block-finder .swiper-pagination-bullet {
                    background: rgba(255, 255, 255, 0.5) !important;
                    opacity: 1 !important;
                }
                .block-finder .swiper-pagination-bullet-active {
                    background: #fff !important;
                }
                .block-finder .swiper-button-next,
                .block-finder .swiper-button-prev {
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    color: #fff !important;
                    width: 72px !important;
                    height: 72px !important;
                    margin-top: 0 !important;
                    top: 50% !important;
                    transform: translateY(-50%) !important;
                    bottom: auto !important;
                    z-index: 10 !important;
                }
                .block-finder .swiper-button-prev {
                    left: 20px !important;
                    right: auto !important;
                }
                .block-finder .swiper-button-next {
                    right: 20px !important;
                    left: auto !important;
                }
                .block-finder .swiper-button-next::after,
                .block-finder .swiper-button-prev::after {
                    font-size: 60px !important;
                    font-weight: bold !important;
                    color: #fff !important;
                    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
                }
                .block-finder .swiper-button-next:hover,
                .block-finder .swiper-button-prev:hover {
                    color: #fff !important;
                    opacity: 0.8 !important;
                }
                /* Mostrar solo la imagen desktop en pantallas grandes */
                .block-finder__image--desktop {
                    display: block;
                }
                .block-finder__image--mobile {
                    display: none;
                }

                /* En mobile, usamos solo la imagen vertical */
                @media (max-width: 768px) {
                    .block-finder .swiper-button-next,
                    .block-finder .swiper-button-prev {
                        opacity: 0.3 !important;
                    }
                    .block-finder .swiper-button-next:hover,
                    .block-finder .swiper-button-prev:hover {
                        opacity: 0.6 !important;
                    }
                    .block-finder {
                        height: 380px !important;
                    }
                    .block-finder__image--desktop {
                        display: none;
                    }
                    .block-finder__image--mobile {
                        display: block;
                    }
                    .block-finder__title {
                        font-size: 1.6rem !important;
                    }
                    .block-finder__subtitle {
                        font-size: 1rem !important;
                    }
                }
            `}</style>
        </div>
    );
}

export default React.memo(BlockFinder);