'use client';
import DashboardLayout from '@/app/dashboard/layout';
import { cn, currency } from '@/lib/utils';
import { ChevronRight, CircleX, Pencil, Search, Trash2 } from 'lucide-react';
import { useEffect, useState, useCallback } from 'react';
import RadioCheck from '../../assets/images/radioCheck.png';
import EditItem from '@/components/editItems/page';
import DeleteDialog from '@/components/ui/deleteModal';
import apis, { BUCKET_ROOT } from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';
import { Input } from '@/components/ui/input';
import AddCategory from '../auth/menu/add/addCategory';
import { Button } from '@/components/ui/button';
import AddItem from '@/components/addItems/page';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { useRouter, useSearchParams } from 'next/navigation';
import ToolTip from '@/components/common/tooltip';
import RadioCheckNonVeg from '../../assets/images/radioCheckNonVeg.png';

const MenuList = () => {
  const { Toast, userInfo } = useGlobalContext();
  const router = useRouter();
  const searchParams = useSearchParams();
  const food_Id = searchParams.get('foodid');
  const cat_Id = searchParams.get('catid');
  const [selectedItem, setSelectedItem] = useState<any>(null);
  const [showEdit, setShowEdit] = useState(false);
  const [showAdd, setShowAdd] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [categoryList, setCategoryList] = useState([]);
  const [menuList, setMenuList] = useState([]);
  const [foodData, setFoodData] = useState<any>(null);
  const [image, setImage] = useState('');
  const [name, setName] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [foodId, setFoodId] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const [catId, setCatId] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSavingCategory, setIsSavingCategory] = useState(false);

  const isFoodCategory =
    userInfo?.restaurant_id?.type === 'food';

  const getCategory = async () => {
    try {
      const apiRes: any = await apis.category.get();
      setCategoryList(apiRes?.data);
    } catch (error) {
      Toast.error(error);
    }
  };

  useEffect(() => {
    getCategory();
  }, []);

  const getFoodList = async (category: any) => {
    setShowAdd(false);
    setSelectedItem(category);
    try {
      const params = new URLSearchParams({
        restaurant_id: userInfo?.restaurant_id?._id,
        category_id: category?._id,
        page: '1',
        limit: '100'
      });
      const apiRes = await apis.FoodList.get(params);
      setMenuList(apiRes?.data);
    } catch (error) {
      Toast.error(error);
    }
  };
  const getFoodDetail = async (food: any) => {
    setFoodData(null);
    setShowEdit(true);
    try {
      const params = new URLSearchParams({ food_id: food?._id });
      const apiRes = await apis.FoodList.detail(params);
      setFoodData(apiRes?.data?.[0]);
    } catch (error) {
      Toast.error(error);
    }
  };

  const handleFormUpdate = useCallback((updatedData: any) => {
    setFoodData(updatedData);
  }, []);

  const onSubmit = async () => {
    if (!foodData || isSubmitting) return;
    if (!food_Id) {
      return;
    }
    if (!cat_Id) {
      return;
    }

    setIsSubmitting(true);
    try {
      let payload = {
        category_id: cat_Id,
        image: foodData.image,
        name: foodData.name,
        price: foodData.price,
        food_type: foodData.food_type,
        add_ons:
          foodData?.add_ons?.map((addOn: any) => ({
            title: addOn.name || addOn.title,
            additional_price: addOn.price || addOn.additional_price,
            customer_selection:
              addOn.isCompulsory || addOn?.customer_selection === 'compulsory'
                ? 'compulsory'
                : 'optional'
          })) || [],
        toppings:
          foodData?.toppings?.map((topping: any) => ({
            title: topping.name || topping.title,
            additional_price: topping.price || topping.additional_price,
            customer_selection:
              topping.isCompulsory ||
                topping?.customer_selection === 'compulsory'
                ? 'compulsory'
                : 'optional'
          })) || [],
        pieces:
          foodData?.pieces?.map((piece: any) => ({
            title: piece.title || piece.name,
            add_price: piece.additionalPrice,
            final_price: piece.final_price
          })) || [],
        size:
          foodData?.size?.map((size: any) => ({
            title: size.title || size.name,
            add_price: size.additionalPrice,
            final_price: size.final_price
          })) || [],
        quantity:
          foodData?.quantity?.map((quant: any) => ({
            title: quant.title || quant.name,
            add_price: quant.additionalPrice,
            final_price: quant.final_price
          })) || [],
        description: foodData.description,
        availability_type: foodData.availability_type,
        item_timing: foodData.item_timing || [],
        other_add_ons: foodData.other_add_ons || []
      };


      const apiRes = await apis.Food.update(payload, food_Id);
      const response = apiRes?.data;

      if (response) {
        let category = {
          _id: payload?.category_id
        };
        getFoodList(category);
        const newParams = new URLSearchParams(searchParams.toString());
        newParams.delete('foodid');
        newParams.delete('catid');
        router.replace(`?${newParams.toString()}`);
        setShowEdit(false);
        setFoodData(null);
      }
    } catch (error) {
      Toast.error(error)
    } finally {
      setIsSubmitting(false);
    }
  };

  const onSearch = async (value: any) => {
    try {
      setSearchQuery(value);
      let urlSearchParam = new URLSearchParams();
      if (value.length > 0) {
        urlSearchParam.set('search', value);
      }
      const apiRes = await apis.category.get(urlSearchParam.toString());
      setCategoryList(apiRes?.data);
    } catch (error) {
      Toast.error(error);
    }
  };

  const addCategory = async () => {
    if (isSavingCategory) return;
    if (!name) {
      Toast.error('Enter valid name!');
      return;
    }
    if (!image) {
      Toast.error('Upload image!');
      return;
    }
    setIsSavingCategory(true);
    try {
      let payload = {
        category_name: name,
        category_image: image,
        type: userInfo?.restaurant_id?.type
      };
      const apiRes: any = catId
        ? await apis.category.update(catId, payload)
        : await apis.category.add(payload);
      if (apiRes) {
        setName('');
        setImage('');
        setIsOpen(false);
        setTimeout(() => {
          getCategory();
        }, 300);
      }
    } catch (error) {
      Toast.error(error)
    } finally {
      setIsSavingCategory(false);
    }
  };

  const handleDelete = async () => {
    try {
      const apiRes = await apis.Food.delete(foodId);
      if (apiRes) {
        Toast.success('Item deleted successfully');
        setShowModal(false);
        getCategory();
        getFoodList(selectedItem);
      }
    } catch (error) {
      Toast.error(error);
    }
  };
  const handleAvailability = async (item: any) => {
    try {
      const apiRes = await apis.Food.available(
        {},
        `${item?._id}?status=${!item.is_available}`
      );
      getFoodList(selectedItem);
    } catch (error) {
      Toast.error(error);
    }
  };
  const handleAddData = (data: boolean) => {
    if (data) {
      getCategory();
      getFoodList(selectedItem);
    }
  };

  const handleUpdate = async (data: any) => {
    setCatId(data?._id);
    setIsOpen(true);
    setName(data?.category_name);
    setImage(data?.category_image);
  };
  const handleDeleteCat = async (id: any) => {
    try {
      const apiRes = await apis.category.delete(id);
      if (apiRes) {
        Toast.success('Category Deleted Successfully');
        setTimeout(() => {
          getCategory();
        }, 300);
      }
    } catch (error) { }
  };

  const handleCancelEdit = () => {
    setShowEdit(false);
    setFoodData(null);
    const newParams = new URLSearchParams(searchParams.toString());
    newParams.delete('foodid');
    newParams.delete('catid');
    router.replace(`?${newParams.toString()}`);
  };

  return (
    <main className="flex-1 bg-gray-50 p-6 overflow-hidden flex flex-col min-h-0">
      {!showEdit && (
        <div className="flex gap-6 flex-1 min-h-0">
          {/* Categories */}
          <div className="no-scrollbar h-full w-[40%] overflow-y-auto rounded-2xl p-4 shadow-lg shadow-gray-500/50 bg-white pb-20">
            <div className="flex flex-col gap-4">
              <div className="flex flex-row gap-2 items-center mb-5">
                <div className="relative flex flex-1 items-center bg-white">
                  <Search
                    stroke="var(--primary-brand)"
                    className="absolute left-3 h-4 w-4"
                  />
                  <Input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => onSearch(e?.target?.value)}
                    placeholder="Search any Category"
                    className="h-9 w-full rounded-md border pl-9 pr-16 text-sm font-medium"
                  />
                </div>
                <Button
                  onClick={() => setIsOpen(true)}
                  className="w-16 h-9 font-medium"
                  variant={'theme'}
                >
                  Add+
                </Button>
              </div>

              {categoryList?.length > 0 ? (
                categoryList.map((category: any) => (
                  <div
                    key={category._id}
                    className={cn(
                      'flex min-h-[56px] py-2 pl-2 pr-3 cursor-pointer items-center justify-between rounded-full hover:bg-[var(--orange-100)] transition-colors duration-200',
                      category._id === selectedItem?._id
                        ? 'bg-[var(--orange-100)]'
                        : 'bg-[#fffcf3]'
                    )}
                  >
                    <div
                      className="flex items-center gap-3 flex-1 min-w-0"
                      onClick={() => getFoodList(category)}
                    >
                      <img
                        src={BUCKET_ROOT + category.category_image}
                        className="h-10 w-10 rounded-full object-cover shrink-0"
                        alt={category.category_name}
                      />
                      <div className="flex flex-col min-w-0">
                        <span className="text-[14px] font-[600] text-[#121212] truncate">
                          {category.category_name}
                        </span>
                        {category.total_food_add > 0 && (
                          <span className="text-[11px] text-gray-500 font-medium truncate">
                            {category.total_food_add} Food item added
                          </span>
                        )}
                      </div>
                    </div>
                    <div
                      className="flex items-center justify-end gap-1 shrink-0 ml-2"
                      onClick={(e) => e.stopPropagation()}
                    >
                      {(category?.vendor_id || !category?._id) && (
                        <button
                          onClick={() => handleUpdate(category)}
                          className="p-1 hover:bg-black/5 rounded-full transition-colors"
                          title="Edit Category"
                        >
                          <Pencil size={14} className="text-emerald-600" />
                        </button>
                      )}
                      {(category?.vendor_id || !category?._id) && (
                        <button
                          onClick={() => handleDeleteCat(category?._id)}
                          className="p-1 hover:bg-black/5 rounded-full transition-colors"
                          title="Delete Category"
                        >
                          <Trash2 size={16} strokeWidth={1.5} className="text-rose-500" />
                        </button>
                      )}
                      <button
                        onClick={() => getFoodList(category)}
                        className="p-1 hover:bg-black/5 rounded-full transition-colors"
                      >
                        <ChevronRight size={18} className="text-gray-400" />
                      </button>
                    </div>
                  </div>
                ))
              ) : (
                <div className="flex w-full items-center justify-center text-sm text-gray-400">
                  No data found !
                </div>
              )}
            </div>
          </div>

          {showAdd ? (
            <div className="flex-1 p-6 shadow-lg shadow-gray-500/50 bg-white rounded-2xl overflow-hidden flex flex-col h-full">
              <div className="flex w-full flex-row justify-between items-center shrink-0 mb-6 pb-4 border-b border-gray-100">
                <span className="text-[22px] font-[600] text-[#121212]">
                  Add Item to {selectedItem?.category_name}
                </span>
                <Button
                  onClick={() => setShowAdd(false)}
                  className="w-20 h-9 font-medium"
                  variant="outline"
                >
                  Cancel
                </Button>
              </div>
              <AddItem
                selectedItem={selectedItem}
                setShowAdd={setShowAdd}
                handleAddData={handleAddData}
              />
            </div>
          ) : (
            <div className="flex-1 p-6 shadow-lg shadow-gray-500/50 bg-white rounded-2xl overflow-hidden flex flex-col h-full">
              {selectedItem && (
                <div className="flex w-full flex-row justify-between items-center shrink-0 mb-6 pb-4 border-b border-gray-100">
                  <span className="text-[22px] font-[600] text-[#121212]">
                    {selectedItem?.category_name}
                  </span>
                  <Button
                    onClick={() => setShowAdd(true)}
                    className="w-16 h-9 font-medium"
                    variant={'theme'}
                  >
                    Add+
                  </Button>
                </div>
              )}

              <div className="no-scrollbar flex-1 space-y-4 overflow-y-auto pb-6">
                {menuList.map((item: any) => (
                  <div
                    key={item.id}
                    className="rounded-xl bg-white p-5 border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-200"
                  >
                    <div className="flex w-full flex-row items-start gap-4">
                      <img
                        src={BUCKET_ROOT + item.image?.[0]}
                        className="h-[120px] w-[120px] rounded-xl object-cover shrink-0"
                        alt={item.name}
                      />
                      <div className="flex-1 min-w-0 flex flex-col justify-between min-h-[120px]">
                        <div>
                          <div className="flex flex-row items-center gap-2 mb-1.5">
                            {isFoodCategory && (
                              <img
                                src={item.food_type === 'non_veg' ? RadioCheckNonVeg.src : RadioCheck.src}
                                className="h-4 w-4 shrink-0"
                                alt={item.food_type}
                              />
                            )}
                            <span className="text-[18px] font-[600] text-[#121212] truncate">
                              {item.name}
                            </span>
                          </div>
                          <ToolTip content={item.description}>
                            <span className="line-clamp-2 cursor-default text-[14px] font-[400] text-[#6b7280]">
                              {item.description}
                            </span>
                          </ToolTip>
                        </div>
                        <div className="mt-2">
                          {item.discounted_price ? (
                            <div className="flex items-baseline gap-2">
                              <span className="text-[18px] font-[600] text-[#006857]">
                                {currency}{item.discounted_price}
                              </span>
                              <span className="text-[14px] font-[400] text-gray-400 line-through">
                                {currency}{item.price}
                              </span>
                            </div>
                          ) : (
                            <span className="text-[18px] font-[600] text-[#006857]">
                              {currency}{item.price}
                            </span>
                          )}
                        </div>
                      </div>
                    </div>
                    
                    <div className="mt-4 pt-3 flex w-full items-center justify-between border-t border-gray-100">
                      <div className="flex gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          className="flex items-center gap-1.5 text-emerald-600 border-emerald-200 hover:bg-emerald-50 hover:text-emerald-700 transition-colors h-8"
                          onClick={() => {
                            setFoodId(item?._id);
                            getFoodDetail(item);

                            const query = new URLSearchParams();
                            query.set('foodid', item._id);
                            query.set('catid', item.category_id);

                            router.push(`?${query.toString()}`);
                          }}
                        >
                          <Pencil size={13} />
                          Edit
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          className="flex items-center gap-1.5 text-rose-600 border-rose-200 hover:bg-rose-50 hover:text-rose-700 transition-colors h-8"
                          onClick={() => {
                            setFoodId(item?._id);
                            setShowModal(true);
                          }}
                        >
                          <Trash2 size={13} strokeWidth={1.5} />
                          Delete
                        </Button>
                      </div>
                      <div className="flex items-center gap-3">
                        <span className="text-[13px] font-medium text-gray-500">
                          Availability
                        </span>
                        <div
                          className={cn(
                            'relative h-5 w-10 cursor-pointer rounded-full transition-colors duration-200',
                            item.is_available ? 'bg-green-500' : 'bg-gray-200'
                          )}
                          onClick={() => handleAvailability(item)}
                        >
                          <div
                            className={cn(
                              'absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-all duration-200',
                              item.is_available ? 'left-[22px]' : 'left-0.5'
                            )}
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
      {showEdit && (
        <div className="flex gap-6 flex-1 min-h-0">
          <div className="flex w-[40%] flex-col gap-6">
            <div className="rounded-2xl bg-white p-5 shadow-lg shadow-gray-500/50 border border-gray-100 flex flex-col gap-4">
              <div className="flex w-full flex-row items-start gap-4">
                <img
                  src={BUCKET_ROOT + foodData?.image?.[0]}
                  className="h-[120px] w-[120px] rounded-xl object-cover shrink-0"
                  alt={foodData?.name}
                />
                <div className="flex-1 min-w-0 flex flex-col justify-between min-h-[120px]">
                  <div>
                    <div className="flex flex-row items-center gap-2 mb-1.5">
                      <img src={RadioCheck.src} className="h-4 w-4 shrink-0" alt="Veg/NonVeg" />
                      <span className="text-[18px] font-[600] text-[#121212] truncate">
                        {foodData?.name}
                      </span>
                    </div>
                    <span className="line-clamp-2 text-[14px] font-[400] text-[#6b7280]">
                      {foodData?.description}
                    </span>
                  </div>
                  <div className="mt-2">
                    {foodData?.discounted_price ? (
                      <div className="flex items-baseline gap-2">
                        <span className="text-[18px] font-[600] text-[#006857]">
                          {currency}{foodData?.discounted_price}
                        </span>
                        <span className="text-[14px] font-[400] text-gray-400 line-through">
                          {currency}{foodData?.price}
                        </span>
                      </div>
                    ) : (
                      <span className="text-[18px] font-[600] text-[#006857]">
                        {currency}{foodData?.price}
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>
            
            <div className="flex gap-3">
              <Button
                onClick={handleCancelEdit}
                className="flex-1 h-11 font-semibold"
                variant="outline"
              >
                Cancel
              </Button>
              <Button
                onClick={onSubmit}
                className="flex-1 h-11 font-semibold"
                variant="theme"
                disabled={isSubmitting}
              >
                {isSubmitting ? 'Saving...' : 'Save'}
              </Button>
            </div>
          </div>
          <div className="no-scrollbar h-full w-[60%] overflow-y-auto rounded-2xl p-6 shadow-lg shadow-gray-500/50 bg-white flex flex-col">
            <div className="flex w-full flex-row justify-between items-center shrink-0 mb-6 pb-4 border-b border-gray-100">
              <span className="text-[22px] font-[600] text-[#121212]">
                Edit Details
              </span>
            </div>
            <div className="flex-1">
              {foodData ? (
                <EditItem data={foodData} onFormUpdate={handleFormUpdate} />
              ) : (
                <div className="flex h-full items-center justify-center py-20">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
      <DeleteDialog
        isOpen={showModal}
        onClose={() => setShowModal(false)}
        handleDelete={handleDelete}
        title="Delete Dish"
        description="Are you sure you want to delete this dish from your menu? This action cannot be undone."
      />
      <Dialog open={isOpen} onOpenChange={() => setIsOpen(false)}>
        <DialogContent className="h-[400px]  border-none bg-white">
          <div className="flex w-full flex-row items-center justify-between">
            <span className="text-[16px] font-[600]">Add Category</span>
            <CircleX
              className="cursor-pointer"
              onClick={() => setIsOpen(false)}
            />
          </div>
          <div
            className="w-full"
            onClick={(e) => {
              e.stopPropagation();
              // setOpen(true);
            }}
          >
            <AddCategory
              setImage={setImage}
              setName={setName}
              cat_name={name}
              image={image}
            />
          </div>
          <Button
            className="theme-background btn-text-color h-11 w-full text-white"
            variant={'default'}
            onClick={addCategory}
            disabled={isSavingCategory}
          >
            {isSavingCategory ? 'Saving...' : 'Save'}
          </Button>
        </DialogContent>
      </Dialog>
    </main>
  );
};
export default function JobAutomationPage() {
  return (
    <DashboardLayout>
      <MenuList />
    </DashboardLayout>
  );
}