"use client";

import React, { useState } from "react";
import SearchIcon from "@mui/icons-material/Search";
import Link from "next/link";

import useApi from "@/src/server_api/hooks/use-api";
import { apiEndpoints } from "@/src/server_api/config/api.endpoints";
import ImageFallback from "../image-fallback";
import { routes } from "@/src/config/routes";

interface SearchModalProps {
    searchOpen: boolean;
    setSearchOpen: (value: boolean) => void;
}

interface Category {
    _id?: string;
    id?: string;
    categoryTitle?: string;
}

interface Product {
    _id?: string;
    id?: string;
    slug?: string;
    productTitle?: string;
    productImageUrl?: string;
    price?: string | number;

    categoryId?: any;
    category?: any;
    categories?: any;
    productCategory?: any;
}

export default function SearchModal({
    searchOpen,
    setSearchOpen,
}: SearchModalProps) {
    const [searchValue, setSearchValue] = useState("");
    const [searchCategory, setSearchCategory] = useState("");

    const { data: categories } = useApi({
        apiEndpoint: apiEndpoints.products.categories,
        enableFetchApi: true,
    });

    const categoryList: Category[] = Array.isArray(categories)
        ? categories
        : categories?.categories || [];

    const { data: searchResults, isLoading: searchLoading } =
        useApi({
            apiEndpoint:
                apiEndpoints.products.searchProducts,

            enableFetchApi: Boolean(
                searchValue.trim() || searchCategory
            ),

            searchParams: {
                query: searchValue.trim(),
                isrelation: 1,
                getcategory: 1,
                categories: searchCategory || "",
                category: searchCategory || "",
            },
        });

    const selectedCategoryObj = categoryList?.find(
        (category: Category) =>
            String(category?._id || category?.id || category?.categoryTitle) ===
            String(searchCategory)
    );

    const selectedCategoryTitle =
        selectedCategoryObj?.categoryTitle;

    const rawProducts: Product[] = Array.isArray(
        searchResults
    )
        ? searchResults
        : searchResults?.products || [];

    const getCategoryIds = (field: any): string[] => {
        if (!field) {
            return [];
        }
        const extractFromObj = (obj: any): string[] => {
            if (!obj) return [];
            if (typeof obj === "string" || typeof obj === "number") {
                return [String(obj)];
            }
            if (typeof obj === "object") {
                return [
                    obj._id,
                    obj.id,
                    obj.slug,
                    obj.category?._id,
                    obj.category?.id,
                    obj.category?.slug,
                ]
                    .filter(Boolean)
                    .map(String);
            }
            return [];
        };

        if (Array.isArray(field)) {
            return field.flatMap((item) => extractFromObj(item));
        }

        return extractFromObj(field);
    };

    const filteredProducts = rawProducts.filter(
        (product: Product) => {

            const searchMatches =
                !searchValue.trim() ||
                product?.productTitle
                    ?.toLowerCase()
                    .includes(
                        searchValue
                            .trim()
                            .toLowerCase()
                    );
            let categoryMatches = true;

            if (searchCategory) {
                const productCategoryIds = [
                    ...getCategoryIds(
                        product?.categoryId
                    ),
                    ...getCategoryIds(
                        product?.category
                    ),
                    ...getCategoryIds(
                        product?.categories
                    ),
                    ...getCategoryIds(
                        product?.productCategory
                    ),
                    ...getCategoryIds(
                        (product as any)?.productDetails?.productCategory
                    ),
                    ...getCategoryIds(
                        (product as any)?.productDetails?.category
                    ),
                ];

                categoryMatches =
                    productCategoryIds.length === 0 ||
                    productCategoryIds.some(
                        (categoryId) =>
                            String(categoryId).toLowerCase() ===
                            String(searchCategory).toLowerCase()
                    );
            }
            return (
                searchMatches &&
                categoryMatches
            );
        }
    );

    const isSearching =
        Boolean(searchValue.trim()) ||
        Boolean(searchCategory);
    const handleClose = () => {
        setSearchOpen(false);
    };

    if (!searchOpen) {
        return null;
    }

    return (
        <div
            className="
                fixed
                inset-0
                z-[100]
                flex
                items-start
                justify-center
                bg-black/50
                sm:items-center
            "
            onClick={handleClose}
        >
            <div
                className="
                    flex
                    h-screen
                    w-full
                    flex-col
                    bg-white
                    p-4
                    shadow-2xl
                    sm:h-[90vh]
                    sm:w-[95%]
                    sm:rounded-xl
                    sm:p-6
                    md:max-w-3xl
                    lg:max-w-5xl
                "
                onClick={(e) =>
                    e.stopPropagation()
                }
            >

                <div
                    className="
                        mb-4
                        flex
                        items-center
                        justify-between
                        sm:hidden
                    "
                >
                    <h2 className="text-lg font-semibold text-primary">
                        Search Products
                    </h2>

                    <button
                        type="button"
                        onClick={handleClose}
                        className="
                            text-2xl
                            text-gray-500
                            hover:text-black
                        "
                    >
                        ×
                    </button>
                </div>

                {/* Search Controls */}

                <div
                    className="
                        flex
                        flex-col
                        items-stretch
                        gap-3
                        border-b
                        pb-4
                        sm:flex-row
                        sm:items-center
                    "
                >


                    <div
                        className="
                            flex
                            flex-1
                            items-center
                            gap-2
                            rounded-lg
                            border
                            px-3
                            py-2
                        "
                    >
                        <SearchIcon
                            className="text-primary"
                            fontSize="small"
                        />

                        <input
                            autoFocus
                            type="text"
                            value={searchValue}
                            onChange={(e) =>
                                setSearchValue(
                                    e.target.value
                                )
                            }
                            placeholder="Search products..."
                            className="
                                flex-1
                                text-sm
                                text-primary
                                outline-none
                                sm:text-base
                            "
                        />
                    </div>


                    <select
                        value={searchCategory}
                        onChange={(e) =>
                            setSearchCategory(
                                e.target.value
                            )
                        }
                        className="
                            w-full
                            rounded-lg
                            border
                            px-3
                            py-2
                            text-sm
                            text-primary
                            outline-none
                            sm:w-auto
                        "
                    >
                        <option value="">
                            All Categories
                        </option>

                        {categoryList?.map(
                            (
                                category: Category
                            ) => {
                                const id =
                                    category?._id ||
                                    category?.id ||
                                    category?.categoryTitle;

                                return (
                                    <option
                                        key={id}
                                        value={id}
                                    >
                                        {
                                            category?.categoryTitle
                                        }
                                    </option>
                                );
                            }
                        )}
                    </select>

                    {/* Desktop Close */}

                    <button
                        type="button"
                        onClick={handleClose}
                        className="
                            hidden
                            text-2xl
                            text-gray-500
                            hover:text-black
                            sm:block
                        "
                    >
                        ×
                    </button>
                </div>
                <div
                    className="
                        mt-5
                        flex-1
                        overflow-hidden
                    "
                >
                    {isSearching && (
                        <>
                            <p
                                className="
                                    mb-4
                                    text-sm
                                    text-gray-500
                                "
                            >
                                {searchValue.trim() &&
                                    searchCategory ? (
                                    <>
                                        Search results
                                        for{" "}
                                        <span className="ml-1 font-semibold text-primary">
                                            "{searchValue}"
                                        </span>{" "}
                                        in{" "}
                                        <span className="ml-1 font-semibold text-primary">
                                            "
                                            {selectedCategoryTitle ||
                                                "Category"}
                                            "
                                        </span>
                                    </>
                                ) : searchValue.trim() ? (
                                    <>
                                        Search results
                                        for{" "}
                                        <span className="ml-1 font-semibold text-primary">
                                            "{searchValue}"
                                        </span>
                                    </>
                                ) : (
                                    <>
                                        Products in{" "}
                                        <span className="ml-1 font-semibold text-primary">
                                            "
                                            {selectedCategoryTitle ||
                                                "Category"}
                                            "
                                        </span>
                                    </>
                                )}
                            </p>
                            <div
                                className="
                                    h-full
                                    overflow-y-auto
                                    pr-1
                                    sm:pr-2
                                "
                            >
                                {searchLoading ? (
                                    <p className="text-sm text-gray-500">
                                        Searching...
                                    </p>
                                ) : filteredProducts.length >
                                    0 ? (
                                    filteredProducts.map(
                                        (
                                            product,
                                            index
                                        ) => (
                                            <Link
                                                key={
                                                    product?._id ||
                                                    product?.id ||
                                                    product?.slug ||
                                                    index
                                                }
                                                href={routes.productDetails(
                                                    product?.slug || product?.productTitle || ""
                                                )}
                                                onClick={
                                                    handleClose
                                                }
                                            >
                                                <div
                                                    className="
                                                        mb-3
                                                        flex
                                                        flex-col
                                                        gap-4
                                                        rounded-xl
                                                        border
                                                        border-gray-200
                                                        p-3
                                                        transition
                                                        hover:shadow-lg
                                                        sm:flex-row
                                                        sm:p-4
                                                    "
                                                >
                                                    {/* Image */}

                                                    <div
                                                        className="
                                                            relative
                                                            h-40
                                                            w-full
                                                            flex-shrink-0
                                                            sm:h-24
                                                            sm:w-24
                                                        "
                                                    >
                                                        <ImageFallback
                                                            src={
                                                                product?.productImageUrl
                                                            }
                                                            alt={
                                                                product?.productTitle ||
                                                                "Product"
                                                            }
                                                            fill
                                                            className="
                                                                rounded-lg
                                                                object-cover
                                                            "
                                                        />
                                                    </div>
                                                    <div
                                                        className="
                                                            flex
                                                            flex-col
                                                            justify-center
                                                        "
                                                    >
                                                        <h3
                                                            className="
                                                                text-sm
                                                                font-semibold
                                                                text-primary
                                                                sm:text-base
                                                            "
                                                        >
                                                            {
                                                                product?.productTitle
                                                            }
                                                        </h3>

                                                        <p
                                                            className="
                                                                mt-2
                                                                text-sm
                                                                font-medium
                                                                text-pink-600
                                                            "
                                                        >
                                                            {
                                                                product?.price
                                                            }
                                                        </p>
                                                    </div>
                                                </div>
                                            </Link>
                                        )
                                    )
                                ) : (
                                    <p className="text-sm text-gray-500">
                                        No products found.
                                    </p>
                                )}
                            </div>
                        </>
                    )}
                </div>
            </div>
        </div>
    );
}