"use client";
import React, { useEffect, useState } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { useSearchParams } from "next/navigation";
import FilterSidebar from "@/components/FilterSidebar/page";
import Restros from "@/components/RestaurantList/page";
import DishList from "@/components/DishList/page";
import apis from "@/utils/apis";
import { logEvent } from "@/utils/analytics";


const Search = () => {
  const searchParams = useSearchParams();
  const search = searchParams.get("search");
  const veg = searchParams.get("veg");
  const nonVeg = searchParams.get("nonVeg");
  const rating = searchParams.get("rating");
  const sorting = searchParams.get("sort");
  const isDineOut = searchParams.get("isDineOut"); // 👈 Dine-out param

  const [filter, setFilter] = useState("dishes");
  const [restaurants, setRestaurants] = useState<any[]>([]);
  const [dishes, setDishes] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  const handleSearch = async (type: string, search: string) => {
    try {
      setLoading(true);
      logEvent("search", { search_term: search, search_type: type });
      const urlSearchParam = new URLSearchParams();
      urlSearchParam.set("search", search);
      urlSearchParam.set("type", type);

      if (veg) urlSearchParam.set("veg", "true");
      if (nonVeg) urlSearchParam.set("non_veg", "true");
      if (rating) urlSearchParam.set("rating_4plus", "true");
      if (sorting) urlSearchParam.set("sort_by", sorting);
      if (isDineOut === "true") urlSearchParam.set("isDineOut", "true");

      const apiRes = await apis.SearchList.detailed(urlSearchParam.toString());

      if (type === "restaurant") {
        const normalizedRestaurants = (apiRes?.data || []).map((item: any) => {
          if (item?.store) {
            return {
              ...item.store,
              items: item.items || [],
            };
          }
          return item;
        });

        // Deduplicate stores by ID
        const uniqueRestaurants: any[] = [];
        const seenIds = new Set();
        normalizedRestaurants.forEach((r: any) => {
          if (r?._id) {
            if (!seenIds.has(r._id)) {
              seenIds.add(r._id);
              uniqueRestaurants.push(r);
            }
          } else {
            uniqueRestaurants.push(r);
          }
        });

        setRestaurants(uniqueRestaurants);
      } else {
        const normalizedDishes = (apiRes?.data || []).map((item: any) => {
          if (item?.store) {
            return {
              ...item,
              ...item.store,
              foods: item.items || [],
            };
          }
          return item;
        });
        setDishes(normalizedDishes);
      }
    } catch (error) {
      console.error("Error in handleSearch:", error);
    } finally {
      setLoading(false);
    }
  };

  // Force restaurant mode if dine-out
  useEffect(() => {
    if (isDineOut === "true") {
      setFilter("restaurant");
    }
  }, [isDineOut]);

  // Fetch data whenever filter or search params change
  useEffect(() => {
    if (filter && search) {
      handleSearch(filter, search);
    } else {
      setLoading(false);
    }
  }, [filter, search, veg, nonVeg, rating, sorting, isDineOut]);

  return (
    <div className="w-full h-auto flex flex-col md:flex-row gap-4 md:gap-10 p-4">
      {/* Sidebar */}
      <div className="w-full md:w-[30%] max-w-[300px] mx-auto md:mx-0">
        <FilterSidebar />
      </div>

      {/* Main content */}
      <div className="flex flex-col w-full md:w-[70%]">
        {/* Tabs */}
        <div
          className={`flex ${isDineOut === "true" ? "justify-center" : "justify-between"
            } items-center w-full max-w-[300px] rounded-md bg-primary p-1 mb-4 mx-auto`}
        >
          {/* Restaurants tab */}
          <div
            className={`cursor-pointer px-2 py-2 rounded-md text-black text-center w-full ${filter === "restaurant" ? "bg-white" : "bg-primary"
              }`}
            onClick={() => setFilter("restaurant")}
          >
            Restaurants
          </div>

          {/* Dishes tab (hide in dine-out) */}
          {isDineOut !== "true" && (
            <div
              className={`cursor-pointer px-2 py-2 rounded-md text-black text-center w-full ${filter === "dishes" ? "bg-white" : "bg-primary"
                }`}
              onClick={() => setFilter("dishes")}
            >
              Items
            </div>
          )}
        </div>

        {/* Content */}
        {filter === "restaurant" ? (
          <Restros data={restaurants} loading={loading} />
        ) : (
          <DishList data={dishes} loading={loading} />
        )}
      </div>
    </div>
  );
};

export default function SearchPage() {
  return (
    <DashboardLayout>
      <Search />
    </DashboardLayout>
  );
}