"use client";

import React, { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { Card, CardContent } from "@/components/ui/card";
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import Loader from "@/components/common/loader";
import { useGlobalContext } from "@/context/Provider";
import apis, { BUCKET_ROOT } from "@/utils/apis";
import { currency } from "@/lib/utils";

interface Plate {
  _id: string;
  name: string;
  discription: string;
  price: number;
  kid_price?: number;
  plan_details: {
    category_id: {
      _id: string;
      category_name: string;
      category_image?: string;
    };
    count: number;
  }[];
}

interface FoodItem {
  id: string;
  name: string;
  category_id: string;
  image?: string[];
}

interface Category {
  _id: string;
  category_name: string;
  category_image?: string;
  food: FoodItem[];
}

const CateringSelection = () => {
  const [plates, setPlates] = useState<Plate[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [selectedPlate, setSelectedPlate] = useState<string | null>(null);
  const [selectedItems, setSelectedItems] = useState<{ [key: string]: string[] }>({});
  const [loading, setLoading] = useState(true);
  const [categoryLoading, setCategoryLoading] = useState(true);

  const { Toast } = useGlobalContext();
  const params = useParams();
  const router = useRouter();
  const restaurantId = params?.cateringId as string;

  // ✅ Fetch Plates
  const fetchPlates = async (resId: string) => {
    try {
      setLoading(true);
      const planRes = await apis.Catering.getCateringServiceList(resId);
      if (planRes?.plans) {
        setPlates(planRes.plans);

        // ✅ Automatically select the first plate by default
        if (planRes.plans.length > 0) {
          setSelectedPlate(planRes.plans[0]._id);
        }
      }
    } catch (error: any) {
      Toast.error(error.message || "Failed to fetch plates");
    } finally {
      setLoading(false);
    }
  };


  // ✅ Fetch Categories
  const fetchCategories = async (resId: string) => {
    try {
      setCategoryLoading(true);
      const categoryRes = await apis.Catering.getCategoryList(resId);
      if (categoryRes?.data) setCategories(categoryRes.data);
    } catch (error: any) {
      Toast.error(error.message || "Failed to fetch categories");
    } finally {
      setCategoryLoading(false);
    }
  };

  // ✅ Fetch Restaurant Details to get location
  const fetchRestaurantDetails = async (resId: string) => {
    try {
      // Get current location for the API call
      let lat = 0, lng = 0;
      if (navigator.geolocation) {
        const position = await new Promise<GeolocationPosition>((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject);
        });
        lat = position.coords.latitude;
        lng = position.coords.longitude;
      }

      const urlSearchParam = new URLSearchParams();
      urlSearchParam.set("lat", lat.toString());
      urlSearchParam.set("long", lng.toString());

      const res = await apis.restaurant.detail(resId, urlSearchParam.toString());
      if (res?.data?.address) {
        // Store restaurant location in localStorage for distance calculation
        localStorage.setItem("distance", JSON.stringify(res.data.address));
      }
    } catch (error: any) {
      console.error("Failed to fetch restaurant details:", error);
      // Don't show error to user as this is not critical for catering selection
    }
  };

  useEffect(() => {
    if (restaurantId) {
      fetchRestaurantDetails(restaurantId);
      fetchPlates(restaurantId);
      fetchCategories(restaurantId);
    }
  }, [restaurantId]);

  // ✅ Get category limit from selected plate
  const getCategoryLimit = (categoryId: string) => {
    const plate = plates.find((p) => p._id === selectedPlate);
    const planDetail = plate?.plan_details.find(
      (pd) => pd.category_id?._id === categoryId
    );
    return planDetail?.count ?? 0;
  };

  // ✅ Handle food item selection with limit check
  const handleItemToggle = (categoryId: string, itemId: string) => {
    setSelectedItems((prev) => {
      const current = prev[categoryId] || [];
      const limit = getCategoryLimit(categoryId);

      // If already selected → unselect it
      if (current.includes(itemId)) {
        return { ...prev, [categoryId]: current.filter((id) => id !== itemId) };
      }

      // Limit reached check
      if (limit > 0 && current.length >= limit) {
        Toast.error(`You can select up to ${limit} items in this category.`);
        return prev;
      }

      return { ...prev, [categoryId]: [...current, itemId] };
    });
  };

  // ✅ Handle plate selection
  const handlePlateSelect = (plateId: string) => {
    setSelectedPlate((prev) => {
      const newSelection = prev === plateId ? null : plateId;
      // Reset selected items if user changes plate
      if (newSelection !== prev) setSelectedItems({});
      return newSelection;
    });
  };

  // ✅ Next button
  const handleNext = () => {
    if (!selectedPlate) {
      Toast.error("Please select a plate before continuing.");
      return;
    }

    const selectedPlan = plates.find((p) => p._id === selectedPlate);
    if (!selectedPlan) {
      Toast.error("Selected plan not found!");
      return;
    }

    // ✅ Filter out categories where no food items are selected
    const menu = Object.entries(selectedItems)
      .filter(([_, food_ids]) => food_ids.length > 0)
      .map(([category_id, food_ids]) => {
        const category = categories.find((cat) => cat._id === category_id);
        const foodItems = food_ids.map((foodId) => {
          const foodItem = category?.food.find((f) => f.id === foodId);
          return { id: foodId, name: foodItem?.name || foodId };
        });

        return {
          category_id,
          category_name: category?.category_name || category_id,
          food_items: foodItems,
        };
      });

    if (menu.length === 0) {
      Toast.error("Please select at least one food item before continuing.");
      return;
    }

    const payload = {
      restaurant_id: restaurantId,
      catering_plan_id: selectedPlan._id,
      catering_plan_name: selectedPlan.name,
      adult_price: selectedPlan.price,
      kid_price: selectedPlan.kid_price,
      description: selectedPlan.discription,
      menu,
    };

    localStorage.setItem("cateringSelection", JSON.stringify(payload));
    router.push("/catering/checkout");
  };

  if (loading || categoryLoading) {
    return (
      <div className="flex justify-center items-center h-[70vh]">
        <Loader loading={true} />
      </div>
    );
  }

  return (
    <div className="max-w-5xl mx-auto p-4 space-y-6">
      {/* ✅ Plates Section */}
      <div>
        <div className="flex justify-between items-center mb-2">
          <h2 className="text-lg font-semibold">Plates</h2>
        </div>

        {plates.length === 0 ? (
          <p className="text-gray-500 text-sm">No plates found.</p>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            {plates.map((plate) => (
              <Card
                key={plate._id}
                className={`cursor-pointer border-2 transition-all duration-200 ${selectedPlate === plate._id
                  ? "border-primary shadow-md bg-brand-50"
                  : "border-gray-200 hover:border-primary/30"
                  }`}
                onClick={() => handlePlateSelect(plate._id)}
              >
                <CardContent className="p-4">
                  <h3 className="font-semibold text-base">{plate.name}</h3>
                  <p className="text-gray-500 text-sm mt-1 line-clamp-2">
                    {plate.discription || "No description available"}
                  </p>
                  <div className="flex gap-3 mt-2 text-sm font-medium">
                    <span className="text-red-500">
                      {currency}{plate.price}{" "}
                      <span className="text-gray-500">Per Person</span>
                    </span>
                    {plate.kid_price && (
                      <span className="text-red-500">
                        {currency}{plate.kid_price}{" "}
                        <span className="text-gray-500">Under 12 yrs</span>
                      </span>
                    )}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </div>

      <div>
        <h2 className="text-lg font-semibold mb-3">Categories</h2>
        {categories.length === 0 ? (
          <p className="text-gray-500 text-sm">No categories found.</p>
        ) : (
          // 🔹 Filter out categories with count = 0
          <Accordion type="single" collapsible className="space-y-3">
            {categories
              .filter((cat) => {
                const limit = getCategoryLimit(cat._id);
                return limit > 0; // ✅ show only categories with count > 0
              })
              .map((cat) => {
                const selectedCount = selectedItems[cat._id]?.length || 0;
                const limit = getCategoryLimit(cat._id);
                const labelText = limit > 0 ? `Only ${limit} items select` : "Select items";

                return (
                  <AccordionItem key={cat._id} value={cat._id}>
                    <AccordionTrigger className="font-medium flex justify-between items-center">
                      <div className="flex items-center gap-2">
                        {cat.category_image && (
                          <img
                            src={BUCKET_ROOT + cat.category_image}
                            alt={cat.category_name}
                            width={35}
                            height={35}
                            className="rounded-md object-cover w-[35px] h-[35px]"
                          />
                        )}
                        <span>{cat.category_name}</span>
                      </div>
                      <span className="text-gray-500 text-sm">{labelText}</span>
                    </AccordionTrigger>

                    <AccordionContent className="grid grid-cols-1 sm:grid-cols-2 gap-3 p-2">
                      {cat.food?.map((item) => {
                        const isDisabled =
                          limit > 0 &&
                          selectedCount >= limit &&
                          !selectedItems[cat._id]?.includes(item.id);

                        return (
                          <Card
                            key={item.id}
                            className={`flex items-center gap-3 p-2 border rounded-lg ${isDisabled ? "opacity-50 pointer-events-none" : ""
                              }`}
                          >
                            <img
                              src={
                                item.image?.length
                                  ? BUCKET_ROOT + item.image[0]
                                  : "/images/placeholder.png"
                              }
                              alt={item.name}
                              width={60}
                              height={60}
                              className="rounded-md object-cover w-[60px] h-[60px]"
                            />

                            <div className="flex-1">
                              <p className="font-medium text-sm">{item.name}</p>
                              <p className="text-xs text-gray-500">
                                {cat.category_name}
                              </p>
                            </div>

                            <Checkbox
                              checked={selectedItems[cat._id]?.includes(item.id)}
                              onCheckedChange={() =>
                                handleItemToggle(cat._id, item.id)
                              }
                            />
                          </Card>
                        );
                      })}
                    </AccordionContent>
                  </AccordionItem>
                );
              })}
          </Accordion>
        )}
      </div>


      {/* ✅ Next Button */}
      <div className="flex justify-end mt-8">
        <Button
          size="lg"
          className="bg-primary hover:bg-primary text-white px-6"
          disabled={!selectedPlate}
          onClick={handleNext}
        >
          Next
        </Button>
      </div>
    </div>
  );
};

export default function CateringPage() {
  return (
    <DashboardLayout>
      <CateringSelection />
    </DashboardLayout>
  );
}