"use client";
import React, { useEffect, useState } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import RestroBanner from "@/components/restroBanner/page";
import Banner from "@/components/Banner/page";
import RestroCat from "@/components/RestroCat/page";
import RestroItems from "@/components/RestroItems/page";
import apis, { BUCKET_ROOT } from "@/utils/apis";
import RestroFilter from "@/components/RestroFilters/page";
import { useGlobalContext } from "@/context/Provider";
import { Clock, AlertCircle } from "lucide-react";
import { getTodayClosingTime, isWithinOperatingHours } from "@/lib/utils";
import { useSelector } from "react-redux";
import { RootState } from "@/store/store";
import QuickServiceCards from "@/components/QuickServiceCards/page";

type ScheduleDay = {
  day_id: string;
  is_24_hrs: boolean;
  timing: {
    start_time: string;
    end_time: string;
  }[];
};

const RestaurantClosedCard = ({ status, restaurantStatus }: { status: ScheduleDay[]; restaurantStatus?: string }) => {
  const day = getTodayClosingTime(status);
  const isOpenNow = isWithinOperatingHours(day) && restaurantStatus !== "offline";

  if (isOpenNow) return null;

  return (
    <div className="pt-4">
      <div className="px-4 py-3 bg-gradient-to-r from-primary/5 to-yellow-50 border-l-4 border-orange-600 shadow-md rounded-lg mb-4 max-w-full sm:max-w-lg md:max-w-xl lg:max-w-4xl mx-auto">
        <div className="flex items-start gap-3">
          <div className="flex-shrink-0 mt-1">
            <div className="w-10 h-10 bg-brand-100 rounded-full flex items-center justify-center">
              <AlertCircle className="w-6 h-6 text-primary" />
            </div>
          </div>
          <div className="flex-1">
            <h3 className="text-lg font-bold text-primary mb-1">
              Vendor/Store Currently Closed
            </h3>
            <p className="text-sm text-gray-700 mb-2">
              This vendor/store is not accepting orders at the moment.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};


const Restaurant = () => {
  const searchParams = useSearchParams();
  const { userInfo } = useGlobalContext();
  const id = searchParams.get("id");
  const veg = searchParams.get("veg");
  const nonVeg = searchParams.get("nonVeg");
  const rating = searchParams.get("rating");

  const [restaurantDetail, setRestaurantDetail] = useState(null) as any;
  const [distance, setDistance] = useState(0);
  const [selectedCat, setSelectedCat] = useState("all") as any;
  const [menu, setMenu] = useState(null) as any;
  const [allMenu, setAllMenu] = useState(null) as any;
  const [searchValue, setSearchValue] = useState("") as any;
  const [restaurantData, setRestaurantData] = useState<any>(null);
  const [location, setLocation] = useState<{ lat: number; long: number } | null>(null);
  const [modules, setModules] = useState<{ isDineOut?: boolean; catering_services?: boolean } | null>(null);

  // Get selected address from Redux
  const selectedAddress = useSelector(
    (state: RootState) => state.user.profile.selectedAddress
  );

  // Initialize location on component mount
  useEffect(() => {
    if (!selectedAddress?.lat) {
      navigator.geolocation.getCurrentPosition(
        ({ coords }) => {
          setLocation({ lat: coords.latitude, long: coords.longitude });
        },
        (error) => {
          console.error("Geolocation error:", error);
        }
      );
    }
  }, [selectedAddress]);

  useEffect(() => {
    if (!id) return;
    const fetchModules = async () => {
      try {
        const res = await apis.restaurant.getModules(id);
        if (res) {
          setModules({
            isDineOut: res.isDineOut,
            catering_services: res.catering_services,
          });
        }
      } catch (error) {
        console.error("GetModules error:", error);
      }
    };
    fetchModules();
  }, [id]);

  const getRestaurant = async (id: any, lat: number, long: number) => {
    try {
      let urlSearchParam = new URLSearchParams();
      urlSearchParam.set("lat", lat.toString());
      urlSearchParam.set("long", long.toString());

      const apiRes = await apis.restaurant.detail(
        id,
        urlSearchParam.toString()
      );

      setRestaurantDetail(apiRes?.data);
      setDistance(apiRes?.distance);
      getMenu(apiRes?.data?._id, lat, long);
    } catch (error) {
      console.error("GetRestaurant error:", error);
    }
  };

  const getMenu = async (id: any, lat: number, long: number) => {
    try {
      let urlSearchParam = new URLSearchParams();
      urlSearchParam.set("lat", lat.toString());
      urlSearchParam.set("long", long.toString());

      if (veg) {
        urlSearchParam.set("veg", `true`);
      }
      if (nonVeg) {
        urlSearchParam.set("non_veg", `true`);
      }
      if (rating) {
        urlSearchParam.set("rating_4_plus", `true`);
      }
      if (userInfo?._id) {
        urlSearchParam.set("customer_id", userInfo._id);
      }

      urlSearchParam.set("catering_services", "false");


      const apiRes = await apis.restaurant.getOrders(
        id,
        urlSearchParam.toString()
      );

      setRestaurantData(apiRes?.restaurant || null);
      setMenu(apiRes?.data);
      setAllMenu(apiRes?.data);
    } catch (error) {
      console.error("GetMenu error:", error);
    }
  };

  // Fetch restaurant data when id and location are available
  useEffect(() => {
    if (!id) return;

    const fetchRestaurantData = (lat: number, long: number) => {
      getRestaurant(id, lat, long);
    };

    if (selectedAddress?.lat && selectedAddress?.long) {
      fetchRestaurantData(
        parseFloat(selectedAddress.lat),
        parseFloat(selectedAddress.long)
      );
    } else if (location) {
      fetchRestaurantData(location.lat, location.long);
    }
  }, [id, location, selectedAddress]);

  // Refetch menu when filters change
  useEffect(() => {
    if (!restaurantDetail) return;

    const fetchMenu = (lat: number, long: number) => {
      getMenu(restaurantDetail._id, lat, long);
    };

    if (selectedAddress?.lat && selectedAddress?.long) {
      fetchMenu(
        parseFloat(selectedAddress.lat),
        parseFloat(selectedAddress.long)
      );
    } else if (location) {
      fetchMenu(location.lat, location.long);
    }
  }, [veg, nonVeg, rating, selectedAddress, location]);

  useEffect(() => {
    if (selectedCat === "all") {
      setMenu(allMenu);
    } else {
      const filtered = allMenu.filter(
        (item: any) => item.category_name === selectedCat?.category_name
      );
      setMenu(filtered);
    }
  }, [selectedCat, allMenu]);

  useEffect(() => {
    const query = searchValue.toLowerCase();

    const filtered =
      allMenu?.length > 0 &&
      allMenu
        ?.map((category: any) => {
          const matchedItems = category.food_items.filter((item: any) =>
            item.name.toLowerCase().includes(query)
          );
          if (matchedItems.length > 0) {
            return { ...category, food_items: matchedItems };
          }
          return null;
        })
        .filter(Boolean);
    setMenu(filtered);
  }, [searchValue, allMenu]);

  const status: ScheduleDay[] = restaurantDetail?.working_day;

  return (
    <div className="w-full h-auto flex flex-col bg-white">
      <RestroBanner data={restaurantDetail} distance={distance} />
      <RestaurantClosedCard status={status} restaurantStatus={restaurantDetail?.status} />

      {/* Quick Service Cards (Dineout & Catering) */}
      <div className="w-full bg-white">
        <QuickServiceCards
          restaurantId={id ?? undefined}
          isDineOut={modules?.isDineOut}
          cateringServices={modules?.catering_services}
        />
      </div>

      {/* Vendor Banners */}
      {id && <Banner restaurant_id={id} />}

      <div className="w-full flex flex-wrap justify-between items-center px-4 py-4 sticky top-0 bg-white z-30 shadow-sm border-b border-gray-100 gap-4">
        <RestroFilter search={searchValue} setSearch={setSearchValue} restaurantData={restaurantData} />
        <RestroCat
          category={allMenu}
          setSelectedCat={setSelectedCat}
          selectedCat={selectedCat}
        />
      </div>
      <RestroItems
        menu={menu}
        id={id}
        distance={restaurantDetail?.address}
        status={status}
        restaurantData={restaurantData}
        restaurantStatus={restaurantDetail?.status}
      />
    </div>
  );
};

export default function JobAutomationPage() {
  return (
    <DashboardLayout>
      <Restaurant />
    </DashboardLayout>
  );
}