import React, { useState, useCallback } from "react";
import { FormattedMessage } from "react-intl";
import { useRouter } from "next/router";
import VehicleSelect from "~/components/shared/VehicleSelect";
import { IVehicle } from "~/interfaces/vehicle";

export type IBlockFeaturesLayout = "top-strip" | "bottom-strip";

interface Props {
    layout: IBlockFeaturesLayout;
}

function BlockFeatures(props: Props) {
    const router = useRouter();
    const [vehicle, setVehicle] = useState<IVehicle | null>(null);
    const [selectedValues, setSelectedValues] = useState<{ marca?: string; modelo?: string }>({});
    const handleVehicleChange = useCallback((v: IVehicle | null) => {
        setVehicle(v);
    }, []);

    const buildQueryParams = (
        marca?: string,
        modelo?: string,
        v?: IVehicle | null,
    ): Record<string, string> => {
        const queryParams: Record<string, string> = {};
        if (marca) queryParams.filter_marca = marca;
        if (modelo) queryParams.filter_modelo = modelo;
        if (v) {
            if (v.year) queryParams.filter_year = v.year.toString();
            if (v.engine) queryParams.filter_motor = v.engine;
        }
        return queryParams;
    };

    const navigateToCatalog = useCallback(
        (values: { marca?: string; modelo?: string }, v: IVehicle | null) => {
            const { marca, modelo } = values;
            if (!marca || !modelo) return;

            router.push({ pathname: "/catalog", query: buildQueryParams(marca, modelo, v) });
        },
        [router]
    );

    const handleValuesChange = useCallback(
        (values: { marca?: string; modelo?: string }) => {
            setSelectedValues(values);
            // Búsqueda automática al seleccionar el modelo
            navigateToCatalog(values, vehicle);
        },
        [navigateToCatalog, vehicle]
    );

    const onSubmit = (event: React.FormEvent) => {
        event.preventDefault();
        const { marca, modelo } = selectedValues;

        if (!marca || !modelo) {
            if (vehicle) {
                router.push({
                    pathname: "/catalog",
                    query: buildQueryParams(vehicle.make, vehicle.model, vehicle),
                });
            }
            return;
        }

        router.push({ pathname: "/catalog", query: buildQueryParams(marca, modelo, vehicle) });
    };

    return (
        <>
            <form className="block-finder__form custom-finder-container" onSubmit={onSubmit}>
                <VehicleSelect
                    className="block-finder__select custom-finder-select"
                    onVehicleChange={handleVehicleChange}
                    onValuesChange={handleValuesChange}
                />
                {/* Indicador de búsqueda (solo visual, sin botón) */}
                <div className="custom-search-label">
                    <FormattedMessage id="BUTTON_BLOCK_FINDER_SEARCH" />
                    <svg
                        className="ml-2"
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        fill="currentColor"
                        viewBox="0 0 16 16"
                    >
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                    </svg>
                </div>
            </form>

            <style jsx>{`
                :global(.custom-finder-container),
                :global(.block-finder__form.custom-finder-container) {
                    border-radius: 40px !important;
                    padding: 6px !important;
                    display: flex !important;
                    align-items: center !important;
                    gap: 20px !important;
                    background-color: #6c0202 !important;
                    border: 1.5px solid #8c8c8c !important;
                    box-shadow:
                        -25px 20px 35px rgba(0, 0, 0, 0.55),
                        12px 16px 28px rgba(0, 0, 0, 0.4),
                        -12px 8px 15px rgba(0, 0, 0, 0.3) !important;
                    width: auto !important;
                    max-width: 100% !important;
                    margin: 0 auto !important;
                    justify-content: center !important;
                    pointer-events: auto !important;
                    position: relative !important;
                    z-index: 1 !important;
                }
                :global(.custom-search-label) {
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    gap: 8px !important;
                    font-weight: bold !important;
                    text-transform: uppercase !important;
                    color: #fff !important;
                    white-space: nowrap !important;
                    flex-shrink: 0 !important;
                    padding: 0 16px 0 10px !important;
                }
                .ml-2 {
                    margin-left: 8px;
                }
                @media (max-width: 767px) {
                    :global(.custom-finder-container),
                    :global(.block-finder__form.custom-finder-container) {
                        flex-direction: column !important;
                        border-radius: 0px !important;
                        padding: 15px !important;
                        gap: 10px !important;
                        width: 100% !important;
                        max-width: 100% !important;
                    }
                    :global(.custom-search-label) {
                        justify-content: center !important;
                        padding: 5px 0 !important;
                    }
                }
                :global(.custom-finder-select) {
                    flex: 1 1 auto !important;
                    min-width: 0 !important;
                }
                @media (min-width: 768px) {
                    :global(.custom-finder-container),
                    :global(.block-finder__form.custom-finder-container) {
                        max-width: 800px !important;
                        width: 100% !important;
                        margin-top: 40px !important;
                    }
                }
            `}</style>
        </>
    );
}

export default React.memo(BlockFeatures);