// react
import React, { useCallback, useState, useEffect, useLayoutEffect, useRef } from "react";
// third-party
import classNames from "classnames";
import { useRouter } from "next/router";
import { format as formatUrl } from "url";
// application
import { INavigationEvent } from "~/components/shared/Navigation";
import CatalogProductCard from "~/components/shared/CatalogProductCard";
import CatalogProductsTable from "~/components/shared/CatalogProductsTable";
import { normalizeLinkHref } from "~/components/shared/AppLink";
import { IShopPageGridLayout, IShopPageLayout, IShopPageOffCanvasSidebar } from "~/interfaces/pages";
import { Cross9LightSvg, Search20Svg } from "~/svg";
import {
    useShop,
    useShopOptions,
    useShopProductsList,
    useShopProductsListIsLoading,
    useSetOption,
} from "~/store/shop/shopHooks";
import { shopApi } from "~/api";
import url from "~/services/url";
import { IProduct } from "~/interfaces/product";

interface Props {
    layout: IShopPageLayout;
    gridLayout: IShopPageGridLayout;
    offCanvasSidebar: IShopPageOffCanvasSidebar;
}

const VIEW_MODE_STORAGE_KEY = "catalog-view-mode";
const SEARCH_CACHE_KEY = "catalog_search_cache";
const SEARCH_CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutos
const SEARCH_DEBOUNCE_MS = 300; // ms antes de ejecutar búsqueda

// Cache persistente de búsquedas (localStorage)
interface ISearchCacheEntry {
    timestamp: number;
    results: IProduct[];
}

function getPersistentSearchCache(): Map<string, IProduct[]> {
    if (typeof window === "undefined") return new Map();
    try {
        const raw = window.localStorage.getItem(SEARCH_CACHE_KEY);
        if (!raw) return new Map();
        const parsed: Record<string, ISearchCacheEntry> = JSON.parse(raw);
        const cache = new Map<string, IProduct[]>();
        const now = Date.now();
        for (const [key, entry] of Object.entries(parsed)) {
            if (now - entry.timestamp < SEARCH_CACHE_TTL_MS) {
                cache.set(key, entry.results);
            }
        }
        return cache;
    } catch {
        return new Map();
    }
}

function savePersistentSearchCache(cache: Map<string, IProduct[]>): void {
    if (typeof window === "undefined") return;
    try {
        const obj: Record<string, ISearchCacheEntry> = {};
        let count = 0;
        for (const [key, results] of cache) {
            if (count >= 50) break; // Máximo 50 búsquedas cacheadas
            obj[key] = { timestamp: Date.now(), results };
            count++;
        }
        window.localStorage.setItem(SEARCH_CACHE_KEY, JSON.stringify(obj));
    } catch {
        // localStorage puede estar bloqueado; ignorar.
    }
}

function getStoredViewMode(): "complete" | "list" | "canvas" {
    if (typeof window === "undefined") {
        return "canvas";
    }
    try {
        const stored = window.localStorage.getItem(VIEW_MODE_STORAGE_KEY);
        return stored === "list" || stored === "canvas" || stored === "complete" ? stored : "canvas";
    } catch {
        return "canvas";
    }
}

export default function ProductsView(props: Props) {
    const router = useRouter();
    const isLoadingStore = useShopProductsListIsLoading();
    const shop = useShop();
    const productsListStore = useShopProductsList();
    const options = useShopOptions();

    const [searchTerm, setSearchTerm] = useState("");
    const [catalogProducts, setCatalogProducts] = useState<IProduct[]>([]);
    const [searchResults, setSearchResults] = useState<IProduct[]>([]);
    const [isSearching, setIsSearching] = useState(false);
    // Modo búsqueda activo (cuando hay texto en el input)
    const [isSearchMode, setIsSearchMode] = useState(false);
    const [isLoadingMore, setIsLoadingMore] = useState(false);
    const [hasMore, setHasMore] = useState(true);
    const loaderRef = useRef(null);
    
    // Cache de búsquedas (memoria + localStorage para persistencia entre sesiones)

    const displayProducts = isSearchMode ? searchResults : catalogProducts;
        // Inicializamos con un valor constante ("canvas") tanto en SSR como en el
    // primer render del cliente para evitar un hydration mismatch (en el
    // servidor no se puede leer localStorage). Luego, en useLayoutEffect,
    // aplicamos el valor persistido antes de que el navegador pinte, de modo
    // que el botón de vista activa siempre refleje la vista real y no se
    // "pegue" en canvas al volver a navegar.
    const [viewMode, setViewModeState] = useState<"complete" | "list" | "canvas">("canvas");

    useLayoutEffect(() => {
        setViewModeState(getStoredViewMode());
    }, []);

    // Persistir la vista seleccionada (se recuerda al navegar o volver).
    const setViewMode = useCallback(
        (mode: "complete" | "list" | "canvas") => {
            setViewModeState(mode);
            try {
                window.localStorage.setItem(VIEW_MODE_STORAGE_KEY, mode);
            } catch {
                // localStorage puede estar bloqueado; ignorar.
            }
        },
        [],
    );

    const searchTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
    const searchAbortControllerRef = React.useRef<AbortController | null>(null);
    const previousSearchTermRef = React.useRef<string>("");
    // Cache de resultados por (marca|modelo|termino) - persistido en localStorage
    const searchCacheRef = React.useRef<Map<string, IProduct[]>>(getPersistentSearchCache());

    // Reiniciar la búsqueda al cambiar de categoría o filtros de vehículo.
    const resetSearch = useCallback(() => {
        setSearchTerm("");
        setIsSearchMode(false);
        setSearchResults([]);
        setIsSearching(false);
        if (searchTimeoutRef.current) {
            clearTimeout(searchTimeoutRef.current);
            searchTimeoutRef.current = null;
        }
        if (searchAbortControllerRef.current) {
            searchAbortControllerRef.current.abort();
            searchAbortControllerRef.current = null;
        }
    }, []);

    // Guardar cache de búsquedas en localStorage cuando cambie
    useEffect(() => {
        savePersistentSearchCache(searchCacheRef.current);
    }, [searchResults]);

    // Dependencias estables: solo los valores primitivos que realmente usa la búsqueda.
    const catalogFilterModelo = shop.filters?.modelo ?? router.query.filter_modelo;
    const catalogFilterMarca = shop.filters?.marca ?? router.query.filter_marca;

    const computeHasMore = useCallback(() => {
        const nav = productsListStore?.navigation as { type: string; has_next?: boolean; page?: number; pages?: number } | null;
        if (nav && nav.type === "page") {
            if (nav.has_next !== undefined) return nav.has_next;
            return (nav.page ?? 0) < (nav.pages ?? 0);
        }
        return false;
    }, [productsListStore?.navigation]);

    // Resetear cuando cambian los filtros o la categoría
    useEffect(() => {
        resetSearch();
        setCatalogProducts([]);
    }, [shop.filters, shop.categorySlug, options.sort, options.limit, resetSearch]);

    const scrollPositionRef = useRef(0);

    useEffect(() => {
        if (!productsListStore?.items) {
            return;
        }

        // Restaurar posición del scroll solo al cargar más productos (página > 1)
        if ((options.page || 1) > 1 && scrollPositionRef.current > 0) {
            requestAnimationFrame(() => {
                window.scrollTo(0, scrollPositionRef.current);
                scrollPositionRef.current = 0; // limpiar después de restaurar
            });
        }

        setCatalogProducts((prev) => {
            // Caso inicial: primera carga de página 1 y lista vacía
            if ((options.page === 1 || !options.page) && prev.length === 0) {
                return productsListStore.items;
            }
            if (options.page === 1) {
                return productsListStore.items;
            }

            // Para cualquier otra página, ir concatenando evitando duplicados
            const existingIds = new Set(prev.map((p) => p.id));
            const newProducts = productsListStore.items.filter((p) => !existingIds.has(p.id));

            return [...prev, ...newProducts];
        });

        const navigation = productsListStore.navigation;
        if (navigation) {
            // Usar has_next si está disponible, si no calcular basado en page < pages
            const hasNext = (navigation as any).has_next;
            if (hasNext !== undefined) {
                setHasMore(hasNext);
            } else {
                setHasMore(navigation.page < navigation.pages);
            }
        } else {
            setHasMore(false);
        }

        setIsLoadingMore(false);
    }, [productsListStore, options.page]);

    const handlePageChange = useSetOption("page", parseFloat);

    const executeSearch = useCallback(async (query: string, immediate: boolean = false) => {
        // Cancelar búsqueda anterior si existe
        if (searchAbortControllerRef.current) {
            searchAbortControllerRef.current.abort();
        }

        const trimmed = query.trim();
        if (!trimmed) {
            if (searchTimeoutRef.current) {
                clearTimeout(searchTimeoutRef.current);
                searchTimeoutRef.current = null;
            }
            if (searchAbortControllerRef.current) {
                searchAbortControllerRef.current.abort();
                searchAbortControllerRef.current = null;
            }
            setSearchResults([]);
            setIsSearching(false);
            setIsSearchMode(false);
            return;
        }

        // Entramos en modo búsqueda manual
        setIsSearchMode(true);

        // Limpiar timeout anterior
        if (searchTimeoutRef.current) {
            clearTimeout(searchTimeoutRef.current);
        }

        // Ejecutar búsqueda con debounce a menos que sea inmediata (Enter/botón)
        const performSearch = async () => {
            // Cache: si ya buscamos este término en este catálogo, mostrar al instante
            const cacheKey = `${catalogFilterMarca ?? "-"}|${catalogFilterModelo ?? "-"}|${trimmed.toLowerCase()}`;
            const cached = searchCacheRef.current.get(cacheKey);
            if (cached && cached.length >= 0) {
                setSearchResults(cached);
                setIsSearching(false);
                return;
            }

            setIsSearching(true);

            // Crear nuevo AbortController para esta búsqueda
            const abortController = new AbortController();
            searchAbortControllerRef.current = abortController;

            try {
                // Determinar filtros de marca/modelo disponibles en la URL o store.
                const marcId = catalogFilterMarca != null ? String(catalogFilterMarca) : undefined;
                const modelIdNum = catalogFilterModelo != null ? Number(catalogFilterModelo) : undefined;

                const hasVehicleFilters =
                    router.pathname.startsWith("/catalog") &&
                    (catalogFilterMarca != null || catalogFilterModelo != null);

                // Usar la función search unificada (solo una llamada API)
                const response = await shopApi.search(trimmed, marcId, modelIdNum);

                // Verificar si la búsqueda fue cancelada
                if (abortController.signal.aborted) {
                    return;
                }

                // Guardar en cache para próximas búsquedas
                searchCacheRef.current.set(cacheKey, response);
                setSearchResults(response);
            } catch (error: any) {
                // Ignorar errores de cancelación
                if (error.name === "AbortError") {
                    return;
                }
                console.error("Error en la búsqueda:", error);
                setSearchResults([]);
            } finally {
                if (!abortController.signal.aborted) {
                    setIsSearching(false);
                }
            }
        };

        if (immediate) {
            performSearch();
        } else {
            // Debounce: evita disparar una petición por cada tecla.
            searchTimeoutRef.current = setTimeout(performSearch, SEARCH_DEBOUNCE_MS);
        }
    }, [router.pathname, catalogFilterModelo, catalogFilterMarca]);

    // Limpiar timeout y abort controller al desmontar
    useEffect(() => {
        return () => {
            if (searchTimeoutRef.current) {
                clearTimeout(searchTimeoutRef.current);
            }
            if (searchAbortControllerRef.current) {
                searchAbortControllerRef.current.abort();
            }
        };
    }, []);

    // --- MANEJADORES ---
    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === "Escape") {
            // Limpiar búsqueda y volver al estado original del catálogo
            resetSearch();
            return;
        }
        if (e.key === "Enter") {
            // Enter: ejecutar búsqueda inmediata
            executeSearch(searchTerm, true);
        }
    };

    // Búsqueda LIVE: al escribir, se ejecuta la búsqueda automáticamente.
    // Si se borra todo, vuelve de inmediato al estado original del catálogo.
    useEffect(() => {
        const query = searchTerm.trim();

        if (query) {
            executeSearch(searchTerm, false);
        } else {
            setIsSearchMode(false);
            setSearchResults([]);
            if (searchTimeoutRef.current) {
                clearTimeout(searchTimeoutRef.current);
            }
            if (searchAbortControllerRef.current) {
                searchAbortControllerRef.current.abort();
            }
            setIsSearching(false);
        }
        previousSearchTermRef.current = searchTerm;
    }, [searchTerm, executeSearch]);

    const onNavigate = useCallback(
        (event: INavigationEvent) => {
            if (event.type === "page") handlePageChange(event.page);
        },
        [handlePageChange],
    );

    // Controlar visibilidad del footer en catálogo mientras haya más productos
    useEffect(() => {
        const shouldHideFooter = hasMore && !isSearchMode && displayProducts.length > 0;
        if (shouldHideFooter) {
            document.body.classList.add("catalog-hide-footer");
        } else {
            document.body.classList.remove("catalog-hide-footer");
        }
        return () => {
            document.body.classList.remove("catalog-hide-footer");
        };
    }, [hasMore, isSearchMode, displayProducts.length]);

    const loadNextPage = useCallback(() => {
        if (!isLoadingMore && !isLoadingStore && hasMore && !isSearchMode) {
            setIsLoadingMore(true);
            handlePageChange((options.page || 1) + 1);
        }
    }, [isLoadingMore, isLoadingStore, hasMore, isSearchMode, options.page, handlePageChange]);

    // Scroll infinito con IntersectionObserver (1000px de anticipación)
    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                if (entries[0]?.isIntersecting) {
                    loadNextPage();
                }
            },
            { rootMargin: "1000px 0px 1000px 0px" }
        );
        if (loaderRef.current) observer.observe(loaderRef.current);
        return () => observer.disconnect();
    }, [loadNextPage]);

    // Listener de scroll continuo para teléfonos
    useEffect(() => {
        let ticking = false;
        const handleScroll = () => {
            if (!ticking) {
                window.requestAnimationFrame(() => {
                    const scrollY = window.scrollY || window.pageYOffset;
                    const windowHeight = window.innerHeight;
                    const docHeight = document.documentElement.scrollHeight;
                    if (scrollY + windowHeight >= docHeight - 1200) {
                        loadNextPage();
                    }
                    ticking = false;
                });
                ticking = true;
            }
        };

        window.addEventListener("scroll", handleScroll, { passive: true });
        return () => window.removeEventListener("scroll", handleScroll);
    }, [loadNextPage]);

    // Fallback si la pantalla inicial no llena el scroll
    useEffect(() => {
        if (hasMore && !isLoadingMore && !isLoadingStore && !isSearchMode) {
            const timer = setTimeout(() => {
                if (document.documentElement.scrollHeight <= window.innerHeight + 300) {
                    loadNextPage();
                }
            }, 400);
            return () => clearTimeout(timer);
        }
    }, [hasMore, isLoadingMore, isLoadingStore, isSearchMode, loadNextPage]);


    // Diseño listo para mostrar incluso con overlay de carga de la pagina principal
    const rootClasses = classNames("products-view", {
        // El overlay opaco solo durante la carga inicial del catálogo
        "products-view--loading": isLoadingStore && catalogProducts.length === 0 && !isSearchMode,
    });

    if (!productsListStore || !productsListStore.navigation) return null;

    return (
        <div className={rootClasses}>
            <div className="products-view__body">
                <div className="products-view__loader" />

                {/* BARRA STICKY: volver + buscador + vistas (baja con el scroll y queda fija) */}
                <div className="catalog-sticky-bar">

                {/* BARRA DE BÚSQUEDA MANUAL */}
                <div className="search-bar-container mb-4">
                    <div className="catalog-toolbar px-md-5">
                        {/* OPCIONES DE VISUALIZACIÓN - toggle tipo Mercado Libre */}
                        <div className="d-flex align-items-center gap-2">
                            <div className="d-inline-flex view-toggle" role="group" aria-label="Cambiar vista">
                            <button
                                type="button"
                                title="Ver como teléfono (canvas)"
                                aria-label="Ver como teléfono (canvas)"
                                className={`view-toggle__btn view-toggle__btn--canvas ${viewMode === "canvas" ? "view-toggle__btn--active" : ""}`}
                                onClick={() => setViewMode("canvas")}
                            >
                                {/* Icono cuadrícula (cuadritos) */}
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="18"
                                    height="18"
                                    fill="currentColor"
                                    viewBox="0 0 16 16"
                                >
                                    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM8 2.5A1.5 1.5 0 0 1 9.5 1h3A1.5 1.5 0 0 1 14 2.5v3A1.5 1.5 0 0 1 12.5 7h-3A1.5 1.5 0 0 1 8 5.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zM8 10.5A1.5 1.5 0 0 1 9.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 8 13.5z" />
                                </svg>
                            </button>
                            <button
                                type="button"
                                title="Ver como cuadrícula"
                                aria-label="Ver como cuadrícula"
                                className={`view-toggle__btn view-toggle__btn--grid ${viewMode === "complete" ? "view-toggle__btn--active" : ""}`}
                                onClick={() => setViewMode("complete")}
                            >
                                {/* Icono de 2 líneas (=) */}
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="18"
                                    height="18"
                                    fill="currentColor"
                                    viewBox="0 0 16 16"
                                >
                                    <path fillRule="evenodd" d="M2 4.5A.5.5 0 0 1 2.5 4h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 4.5zm0 7A.5.5 0 0 1 2.5 11h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 11.5z" />
                                </svg>
                            </button>
                            <button
                                type="button"
                                title="Ver como lista"
                                aria-label="Ver como lista"
                                className={`view-toggle__btn view-toggle__btn--list ${viewMode === "list" ? "view-toggle__btn--active" : ""}`}
                                onClick={() => setViewMode("list")}
                            >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="18"
                                    height="18"
                                    fill="currentColor"
                                    viewBox="0 0 16 16"
                                >
                                    <path
                                        fillRule="evenodd"
                                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                                    />
                                </svg>
                            </button>
                        </div>
                        </div>

                        {/* BOTÓN VOLVER */}
                        <button
                            className="btn btn-sm custom-btn-back d-flex align-items-center ms-auto"
                            onClick={() => router.back()}
                        >
                            <svg
                                className="mr-1"
                                xmlns="http://www.w3.org/2000/svg"
                                width="14"
                                height="14"
                                fill="currentColor"
                                viewBox="0 0 16 16"
                            >
                                <path
                                    fillRule="evenodd"
                                    d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
                                />
                            </svg>
                            Volver
                        </button>

                        {/* Buscador unificado (input + botón en una sola píldora) */}
                        <div className="catalog-search-pill">
                            <input
                                type="text"
                                className="catalog-search-input"
                                placeholder="Buscar por nombre o marca..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                onKeyDown={handleKeyDown}
                                autoComplete="off"
                            />
                            {searchTerm.length > 0 && (
                                <button
                                    className="catalog-search-clear-btn"
                                    type="button"
                                    aria-label="Limpiar búsqueda"
                                    onClick={resetSearch}
                                >
                                    <Cross9LightSvg />
                                </button>
                            )}
                            <button
                                className="catalog-search-btn"
                                type="button"
                                aria-label="Buscar"
                                onClick={() => executeSearch(searchTerm, true)}
                            >
                                {isSearching ? (
                                    <div
                                        className="spinner-border spinner-border-sm text-white"
                                        role="status"
                                        style={{ width: "16px", height: "16px", borderWidth: "2px" }}
                                    />
                                ) : (
                                    <Search20Svg />
                                )}
                            </button>
                        </div>

                    </div>
                </div>
                </div>

                {isSearchMode && isSearching && searchResults.length === 0 ? (
                    <div className="products-view__empty">
                        <div
                            className="spinner-border text-primary mb-3"
                            role="status"
                            style={{ width: "2.75rem", height: "2.75rem", borderWidth: "3px" }}
                        >
                            <span className="sr-only">Buscando producto...</span>
                        </div>
                        <div className="products-view__empty-title">Buscando producto...</div>
                        <div className="products-view__empty-subtitle">
                            Consultando disponibilidad de &quot;{searchTerm}&quot;
                        </div>
                    </div>
                ) : displayProducts.length === 0 ? (
                    <div className="products-view__empty">
                        <div className="products-view__empty-title">
                            {isSearchMode ? "No disponible" : "No se encontraron productos"}
                        </div>
                        <div className="products-view__empty-subtitle">
                            {isSearchMode
                                ? `El producto "${searchTerm}" no se encuentra disponible.`
                                : "Intenta con otros filtros de vehículo o categoría."}
                        </div>
                        {isSearchMode && (
                            <button
                                type="button"
                                className="btn btn-secondary btn-sm mt-3"
                                onClick={resetSearch}
                            >
                                Ver todos los productos
                            </button>
                        )}
                    </div>
                ) : (
                    <React.Fragment>
                        {viewMode === "list" ? (
                            <CatalogProductsTable products={displayProducts} />
                        ) : (
                            <div className={`${viewMode === "canvas" ? "catalog-products-canvas" : "catalog-products-list"}`}>
                                {displayProducts.map((product) => {
                                    const productUrl = url.product(product);
                                    const handleCardClick = (e: React.MouseEvent) => {
                                        const target = e.target as HTMLElement;
                                        if (
                                            target.closest(".catalog-product-card__action") ||
                                            target.closest(".catalog-product-card__title") ||
                                            target.closest(".catalog-product-card__image-link")
                                        ) {
                                            return;
                                        }
                                        const normalized = normalizeLinkHref(productUrl);
                                        const finalUrl = formatUrl(normalized.as);
                                        router.push(finalUrl);
                                    };

                                    return (
                                        <div
                                            key={product.id}
                                            className={
                                                viewMode === "canvas"
                                                    ? "catalog-products-canvas__item"
                                                    : "catalog-products-list__item"
                                            }
                                            onClick={handleCardClick}
                                        >
                                            <CatalogProductCard product={product} canvas={viewMode === "canvas"} />
                                        </div>
                                    );
                                })}
                            </div>
                        )}

                        {/* DIV LOADER PARA SCROLL INFINITO */}
                        <div ref={loaderRef} style={{ height: '20px' }}></div>

                        {/* INDICADOR DE CARGA INFINITA */}
                        {!isSearchMode && isLoadingMore && (
                            <div className="text-center py-4">
                                <div className="spinner-border text-primary" role="status">
                                    <span className="sr-only">Cargando más productos...</span>
                                </div>
                                <p className="mt-2 text-muted">Cargando más productos...</p>
                            </div>
                        )}

                        {/* MENSAJE DE FIN */}
                        {!isSearchMode && !hasMore && displayProducts.length > 0 && (
                            <div className="text-center py-4">
                                <p className="text-muted">No hay más productos para mostrar</p>
                            </div>
                        )}
                    </React.Fragment>
                )}
            </div>

            <style jsx global>{`
                .product-card-container button {
                    position: relative;
                    z-index: 10;
                    pointer-events: auto;
                }

                .view-toggle-wrapper {
                    display: flex;
                    justify-content: flex-start;
                }

                                /* Fila única: toggle + buscador */
                .catalog-toolbar {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 12px;
                    /* Por encima del overlay .products-view__loader (z-index:4) */
                    position: relative;
                    z-index: 10;
                }

                /* BARRA STICKY del catálogo: bajar con la página y quedarse fija
                   debajo del header (75px en PC, ~56px en móvil) */
                .catalog-sticky-bar {
                    position: sticky;
                    top: 91px; /* pegado al borde inferior del menu superior fijo (91px en PC) */
                    z-index: 60;
                    background: #fff;
                    padding-bottom: 3px;
                    border-bottom: 1px solid #d9d9d9;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
                }

                /* PC: contenedor centrado, con ancho tope de 1100px */
                @media (min-width: 992px) {
                    .catalog-sticky-bar {
                        width: 100%;
                        max-width: 1100px;
                        margin-left: auto;
                        margin-right: auto;
                        margin-top: 14px;
                        padding-top: 12px;
                        border-radius: 12px;
                    }
                }

                @media (max-width: 991px) {
                    .catalog-sticky-bar {
                        top: 50px; /* pegado al borde inferior del menu superior fijo (50px en movil) */
                        padding-top: 8px;
                        /* full-bleed: anula el padding del .container para que la
                           barra blanca llegue hasta las paredes del telefono */
                        margin-left: -15px;
                        margin-right: -15px;
                        width: calc(100% + 30px);
                        padding-left: 15px;
                        padding-right: 15px;
                    }
                    /* Móvil: Volver arriba-derecha, buscador en su propia línea abajo */
                    .catalog-toolbar .custom-btn-back {
                        order: 1;
                    }
                    .catalog-toolbar .catalog-search-pill {
                        order: 2;
                        flex-basis: 100%;
                    }
                }

                /* Boton "Volver" del catalogo (rojo redondeado) */
                .custom-btn-back {
                    background-color: #eb3333 !important;
                    color: #fff !important;
                    border: none !important;
                    border-radius: 50px !important;
                    padding: 6px 20px !important;
                    font-weight: 600 !important;
                    transition: all 0.3s ease !important;
                    order: 2; /* PC: Volver al final, a la derecha del buscador */
                }

                .custom-btn-back:hover {
                    background-color: #c42828 !important;
                    transform: translateX(-3px) !important;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
                }

                .catalog-search-pill {
                    flex: 1;
                    order: 1; /* PC: buscador en medio, antes del Volver */
                }

                .catalog-toolbar .view-toggle {
                    flex-shrink: 0;
                }

                /* Buscador unificado: input y botón como una sola píldora.
                   Se estira para rellenar el espacio sobrante de la fila.
                   position: relative para anclar la lista de sugerencias;
                   SIN overflow:hidden para que la lista no se recorte. */
                .catalog-search-pill {
                    display: inline-flex;
                    align-items: stretch;
                    flex: 1 1 320px;
                    min-width: 260px;
                    background: #fff;
                    border: 1.5px solid #d8dbdf;
                    border-radius: 999px;
                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
                    transition: border-color 0.2s ease, box-shadow 0.2s ease;
                    position: relative;
                }

                .catalog-search-pill:focus-within {
                    border-color: #0b4b99;
                    box-shadow: 0 0 0 3px rgba(11, 75, 153, 0.12);
                }

                .catalog-search-input {
                    flex: 1 1 auto;
                    min-width: 200px;
                    border: none;
                    outline: none;
                    padding: 10px 18px;
                    font-size: 15px;
                    color: #222;
                    background: transparent;
                }

                .catalog-search-input::placeholder {
                    color: #9aa0a6;
                }

                .catalog-search-clear-btn {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    background: transparent;
                    border: none;
                    padding: 0 10px;
                    color: #888;
                    cursor: pointer;
                    transition: color 0.15s ease;
                }

                .catalog-search-clear-btn:hover {
                    color: #eb3333;
                }

                .catalog-search-btn {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 20px;
                    margin: 3px;
                    border: none;
                    border-radius: 999px;
                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                    color: #fff;
                    cursor: pointer;
                    transition: background-color 0.2s ease;
                    svg {
                        fill: #fff;
                    }
                }

                .catalog-search-btn:hover {
                    background: linear-gradient(135deg, #0062cc 0%, #004085 100%);
                }

                /* Lista de resultados del buscador (autocompletado tipo lista) */
                .catalog-search-suggestions {
                    position: absolute;
                    top: calc(100% + 8px);
                    left: 0;
                    right: 0;
                    background: #fff;
                    border: 1px solid #e5e7eb;
                    border-radius: 14px;
                    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
                    max-height: 340px;
                    overflow-y: auto;
                    z-index: 1400;
                    padding: 4px;
                }

                .catalog-search-suggestions__item {
                    display: block;
                    width: 100%;
                    text-align: left;
                    padding: 10px 14px;
                    background: none;
                    border: none;
                    border-radius: 9px;
                    cursor: pointer;
                    font-size: 14px;
                    color: #222;
                    transition: background-color 0.15s ease, color 0.15s ease;
                }

                .catalog-search-suggestions__item:hover {
                    background: #fdecec;
                    color: #eb3333;
                }

                .catalog-search-suggestions__name {
                    display: block;
                    line-height: 1.35;
                }

                .catalog-search-suggestions__status {
                    padding: 12px 14px;
                    color: #6b7280;
                    font-size: 14px;
                }

                .view-toggle {
                    display: inline-flex;
                    background: #ffffff;
                    border: 1px solid #d8dbdf;
                    border-radius: 50px;
                    padding: 4px;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
                }

                /* Contenedor de productos - margin-top para PC */
                .catalog-products-canvas,
                .catalog-products-list {
                    margin-top: 1rem !important;
                }

                @media (max-width: 767px) {
                    .catalog-products-canvas,
                    .catalog-products-list {
                        margin-top: 1rem !important;
                    }
                }

                .view-toggle__btn {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 38px;
                    height: 34px;
                    border: none;
                    border-radius: 50px;
                    background: transparent;
                    color: #6b7280;
                    cursor: pointer;
                    transition: background 0.2s ease, color 0.2s ease;
                }

                .view-toggle__btn:hover {
                    background: #f3f4f6;
                    color: #111827;
                }

                .view-toggle__btn--active {
                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
                    color: #fff !important;
                }

                /* VISTA TIPO TELÉFONO / CANVAS - grid de cards */
                .catalog-products-canvas {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 28px;
                    width: 100%;
                    padding: 0 15px;
                }

                .catalog-products-canvas__item {
                    width: 100%;
                    height: 560px;
                    cursor: pointer;
                    transition: transform 0.2s ease, box-shadow 0.2s ease;
                }

                .catalog-products-canvas__item:hover {
                    transform: translateY(-2px);
                }

                @media (min-width: 768px) {
                    .catalog-products-canvas {
                        grid-template-columns: repeat(3, minmax(0, 290px));
                        justify-content: center;
                    }
                }

                @media (min-width: 1200px) {
                    .catalog-products-canvas {
                        grid-template-columns: repeat(4, minmax(0, 310px));
                        justify-content: center;
                        gap: 32px;
                    }
                }

                /* Móvil: dos tarjetas lado a lado, imagen protagonista (78%) */
                @media (max-width: 767px) {
                    .catalog-products-canvas {
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                        gap: 14px;
                                                /* Centra simétricamente; cards casi a los bordes del móvil */
                        margin-left: -15px;
                        margin-right: -15px;
                        width: calc(100% + 30px);
                        padding: 0;
                        box-sizing: border-box;
                    }

                    .catalog-products-canvas__item {
                        width: 100%;
                        height: 540px;
                    }

                    /* Imagen: 55% de la card */
                    .catalog-products-canvas__item .catalog-product-card--canvas .catalog-product-card__image {
                        flex: 0 0 55%;
                    }

                    /* Nombre + precio con más espacio */
                    .catalog-products-canvas__item .catalog-product-card--canvas .catalog-product-card__body {
                        padding: 14px 16px;
                        gap: 8px;
                        flex: 1 1 auto;
                        display: flex;
                        flex-direction: column;
                    }

                    .catalog-products-canvas__item .catalog-product-card--canvas .catalog-product-card__prices {
                        margin-top: auto;
                        flex-shrink: 0;
                    }

                    .catalog-products-canvas__item .catalog-product-card--canvas .catalog-product-card__title {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        font-size: 18px;
                        line-height: 1.3;
                    }
                }

                /* Ocultar footer mientras haya productos por cargar en el catálogo */
                body.catalog-hide-footer .site__footer,
                body.catalog-hide-footer .block-space--layout--before-footer {
                    display: none !important;
                }
            `}</style>
        </div>
    );
}