import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import AppLink from "~/components/shared/AppLink";
import { vehicleApi } from "~/api";
import { RealVehicleApi, ApiModel } from "~/api/real/vehicle.api";

interface IModel {
    id: number;
    vehicle_brandID: number;
    imageUrl: string;
    brand_name: string;
    name: string;
}

export default function ModelPage() {
    const router = useRouter();
    const { brand_id, name } = router.query;
    const [models, setModels] = useState<IModel[]>([]);
    const [loading, setLoading] = useState(true);
    const measureRootRef = useRef<HTMLDivElement | null>(null);

    const syncToolbarToCardsLayout = useCallback(() => {
        const root = measureRootRef.current;
        if (!root) return;

        const cards = root.querySelectorAll(".models-card-wrap");
        if (!cards.length) {
            root.style.setProperty("--models-toolbar-ml", "0px");
            root.style.setProperty("--models-toolbar-w", "100%");
            return;
        }

        // Si hay menos de 3 cards, el toolbar debe ocupar todo el ancho.
        if (cards.length < 3) {
            root.style.setProperty("--models-toolbar-ml", "0px");
            root.style.setProperty("--models-toolbar-w", "100%");
            return;
        }

        const rootRect = root.getBoundingClientRect();
        let minLeft = Infinity;
        let maxRight = -Infinity;
        cards.forEach((node) => {
            const r = (node as HTMLElement).getBoundingClientRect();
            minLeft = Math.min(minLeft, r.left);
            maxRight = Math.max(maxRight, r.right);
        });

        const ml = Math.max(0, Math.round(minLeft - rootRect.left));
        const w = Math.max(0, Math.round(maxRight - minLeft));

        root.style.setProperty("--models-toolbar-ml", `${ml}px`);
        root.style.setProperty("--models-toolbar-w", `${w}px`);
    }, []);

    useLayoutEffect(() => {
        if (loading || models.length === 0) {
            const root = measureRootRef.current;
            if (root) {
                root.style.setProperty("--models-toolbar-ml", "0px");
                root.style.setProperty("--models-toolbar-w", "100%");
            }
            return;
        }

        syncToolbarToCardsLayout();

        const root = measureRootRef.current;
        if (!root) return;

        const ro = new ResizeObserver(() => {
            syncToolbarToCardsLayout();
        });
        ro.observe(root);

        const imgs = root.querySelectorAll("img");
        const onImg = () => syncToolbarToCardsLayout();
        imgs.forEach((img) => img.addEventListener("load", onImg));

        window.addEventListener("resize", syncToolbarToCardsLayout);

        const t = window.setTimeout(syncToolbarToCardsLayout, 0);

        return () => {
            window.clearTimeout(t);
            ro.disconnect();
            imgs.forEach((img) => img.removeEventListener("load", onImg));
            window.removeEventListener("resize", syncToolbarToCardsLayout);
        };
    }, [loading, models, syncToolbarToCardsLayout]);

    // Al entrar a la página de modelos (desde marcas/ inicio), asegurar que
    // la página comience arriba para poder bajar por la lista (evita que
    // se mantenga la posición de scroll de la página anterior.
    useLayoutEffect(() => {
        window.scrollTo({ top: 0, left: 0, behavior: "auto" });
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
    }, [brand_id]);

    const getModels = async (id: string | string[]) => {
        try {
            setLoading(true);
            // Usar getModelsFull para obtener los objetos completos con id, imageUrl, etc.
            const realApi = vehicleApi as RealVehicleApi;
            const res = await realApi.getModelsFull(parseInt(id.toString()));
            setModels(
                res.map((model: ApiModel) => {
                    const rawImage = model.imageUrl || (model as any).image || "";

                    // Ajustar solo cuando la URL de la imagen es local (empieza por http://localhost)
                    let fixedImage = rawImage;
                    if (fixedImage.startsWith("http://localhost/")) {
                        // De http://localhost/api/uploads/modelos/... a http://localhost/api-monticars/api/uploads/modelos/...
                        fixedImage = fixedImage.replace(
                            "http://localhost/api/",
                            "http://localhost/api-monticars/api/",
                        );
                    }

                    return {
                        id: model.id,
                        vehicle_brandID: model.vehicle_brandID,
                        name: model.name,
                        imageUrl: fixedImage,
                        brand_name: (name as string) || "",
                    };
                }),
            );
        } catch (error) {
            console.error("Error cargando modelos", error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (brand_id) {
            getModels(brand_id);
        }
    }, [brand_id]);

    return (
        <main className="pb-5 bg-light">
            <div className="container px-4 bg-white">
                <div ref={measureRootRef} className="models-page-measure-root">
                    {brand_id && (
                        <div className="mb-4 models-page-toolbar d-flex justify-content-between align-items-center flex-wrap">
                            <small className="models-page-toolbar__text text-break pl-3">
                                Mostrando modelos para la marca: <strong>{name}</strong>
                            </small>

                            <button
                                type="button"
                                className="btn btn-sm custom-btn-back d-flex align-items-center flex-shrink-0 mt-2 mt-sm-0 mr-2"
                                onClick={() => router.back()}
                            >
                                <svg
                                    className="mr-2"
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="16"
                                    height="16"
                                    fill="currentColor"
                                    viewBox="0 0 16 16"
                                    aria-hidden="true"
                                >
                                    <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>
                        </div>
                    )}

                    {loading ? (
                        <div className="text-center py-5">
                            <div className="spinner-border text-primary" role="status"></div>
                        </div>
                    ) : models.length > 0 ? (
                    <div className="row row-cols-1 row-cols-md-2 row-cols-lg-5 gy-5 gx-3 justify-content-center models-cards-container">
                        {models.map((item, index) => {
                            const query = new URLSearchParams({
                                filter_marca: item.vehicle_brandID.toString(),
                                filter_modelo: item.id.toString(),
                            }).toString();

                            const catalogUrl = `/catalog?${query}`;

                            return (
                                <div
                                    className="col d-flex flex-column mb-5 mx-2 models-card-wrap"
                                    key={item.id}
                                >
                                    {/* CARD */}
                                    <div className="product-card product-card--layout--grid shadow-sm custom-model-card">
                                        <div className="product-card__image overflow-hidden">
                                            <div className="image image--type--product">
                                                <AppLink href={catalogUrl} className="image__body">
                                                    <img
                                                        className="image__tag model-zoom-image"
                                                        src={item.imageUrl || "/images/no-image.png"}
                                                        alt={item.name}
                                                    />
                                                </AppLink>
                                            </div>
                                        </div>
                                    </div>

                                    {/* NOMBRE FUERA DE LA CARD */}
                                    <AppLink href={catalogUrl} className="text-decoration-none model-name mx-4 mt-4">
                                        <div className="text-center mt-2 model-name-below">
                                            {item.name}
                                        </div>
                                    </AppLink>
                                </div>
                            );
                        })}
                    </div>
                    ) : (
                    <div className="text-center py-5 shadow-sm bg-white rounded-3">
                        <div className="mb-3">
                            <i className="fas fa-car-side fa-3x text-muted opacity-50"></i>
                        </div>
                        <h4 className="text-muted">No hay modelos disponibles</h4>
                        <p className="text-secondary">
                            Lo sentimos, actualmente no contamos con modelos registrados para la marca {name}.
                        </p>
                        <button
                            className="btn custom-btn-back px-4 mt-3"
                            onClick={() => router.push("/")}
                        >
                            Ver otras marcas
                        </button>
                    </div>
                    )}
                </div>
            </div>

            <style jsx global>{`
                .models-page-measure-root {
                    --models-toolbar-ml: 0px;
                    --models-toolbar-w: 100%;
                    width: 100%;
                    max-width: 100%;
                }

                .models-page-toolbar {
                    margin-left: var(--models-toolbar-ml);
                    width: var(--models-toolbar-w);
                    max-width: 100%;
                    box-sizing: border-box;
                    gap: 12px;
                }

                .models-page-toolbar__text {
                    font-size: 20px;
                    line-height: 1.4;
                    flex: 1 1 auto;
                    min-width: 0;
                }

                .models-card-wrap {
                    /* animation on container */
                }

                .models-cards-container {
                    animation: models-slide-up 0.5s ease-out both;
                }

                @keyframes models-slide-up {
                    from {
                        opacity: 0;
                        transform: translateY(40px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }

                .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;
                    display: inline-block !important;
                    cursor: pointer !important;
                    user-select: none !important;
                    position: relative !important;
                    z-index: 10 !important;
                }

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

                .mr-2 {
                    margin-right: 8px;
                }

                .custom-model-card {
                    display: flex;
                    flex-direction: column;
                    background: #fff;
                    overflow: hidden;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
                    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
                    cursor: pointer;
                }

                .custom-model-card:hover {
                    transform: scale(1.1) !important;
                    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
                }

                .product-card__image {
                    position: relative;
                    overflow: hidden;
                    border: 3px solid rgba(11, 75, 153, 0.5);
                    border-radius: 5px;
                }

                .model-zoom-image {
                    object-fit: contain;
                    width: 100%;
                    height: 100%;
                }

                /* En móvil: imagen llenando todo el contenedor */
                @media (max-width: 768px) {
                    .product-card__image {
                        width: 100%;
                        aspect-ratio: 1 / 1;
                        height: auto;
                    }

                    .model-zoom-image {
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                    }

                    .model-name {
                        width: 100%;
                    }
                }

                .model-name {
                    width: 80%;
                    background: #0b4b99;
                    border-radius: 5px;
                }

                .model-name:hover {
                    background: rgb(12, 54, 106);
                }

                .model-name-below {
                    color: #FFF;
                    font-size: .9rem;
                    transition: color 0.3s ease;
                }

                .model-name-below:hover {
                    color: #FFF;
                }
            `}</style>
        </main>
    );
}