'use client';
import DashboardLayout from '@/app/dashboard/layout';
import { cn, currency, formatDateStringToUTC, getEffectiveDiscountedPrice } from '@/lib/utils';
import { ChevronRight, CircleX, Pencil, Search, Trash2, UtensilsCrossed, Plus, FolderOpen, GripVertical } from 'lucide-react';
import { useEffect, useState, useCallback, useRef } from 'react';
import RadioCheck from '../../assets/images/radioCheck.png';
import EditItem, { EditItemRef } 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';
import { Icons } from '@/components/icons';
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
} from '@dnd-kit/core';
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
  useSortable,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

interface SortableCategoryItemProps {
  category: any;
  isSelected: boolean;
  onSelect: (category: any) => void;
  onEdit: (category: any) => void;
  onDelete: (id: any) => void;
}

const SortableCategoryItem = ({
  category,
  isSelected,
  onSelect,
  onEdit,
  onDelete,
}: SortableCategoryItemProps) => {
  const itemCount = Number(category?.total_item_add ?? category?.total_food_add ?? 0);
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: category._id || category.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.6 : 1,
    zIndex: isDragging ? 20 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={cn(
        'flex min-h-[56px] py-2 pl-2 pr-3 items-center justify-between rounded-full transition-colors duration-200 group relative',
        isSelected ? 'bg-[var(--orange-100)]' : 'bg-[#fffcf3] hover:bg-[var(--orange-100)]',
        isDragging && 'shadow-lg border-2 border-orange-400 bg-[var(--orange-100)]'
      )}
    >
      <div
        {...attributes}
        {...listeners}
        className="p-1 cursor-grab active:cursor-grabbing text-gray-400 hover:text-gray-700 shrink-0 flex items-center justify-center rounded"
        title="Drag to reorder category"
        onClick={(e) => e.stopPropagation()}
      >
        <GripVertical size={16} />
      </div>

      <div
        className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer"
        onClick={() => onSelect(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>
          {itemCount > 0 && (
            <span className="text-[11px] text-gray-500 font-medium truncate">
              {itemCount} Food item{itemCount > 1 ? 's' : ''} 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={() => onEdit(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={() => onDelete(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={() => onSelect(category)}
          className="p-1 hover:bg-black/5 rounded-full transition-colors"
        >
          <ChevronRight size={18} className="text-gray-400" />
        </button>
      </div>
    </div>
  );
};

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 editItemRef = useRef<EditItemRef>(null);
  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 sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 5,
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  const handleDragEnd = async (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;

    const oldIndex = categoryList.findIndex((cat: any) => (cat._id || cat.id) === active.id);
    const newIndex = categoryList.findIndex((cat: any) => (cat._id || cat.id) === over.id);

    if (oldIndex !== -1 && newIndex !== -1) {
      const updatedList = arrayMove(categoryList, oldIndex, newIndex);
      setCategoryList(updatedList);

      try {
        const payload = {
          categories: updatedList.map((cat: any, index: number) => ({
            id: cat._id || cat.id,
            sort_order: index,
          })),
        };
        const apiRes = await apis.category.reorder(payload);
        if (apiRes?.success || apiRes?.message) {
          Toast.success(apiRes?.message || 'Category order updated');
        }
      } catch (error: any) {
        Toast.error(error?.message || error || 'Failed to reorder categories');
        getCategory();
      }
    }
  };

  const restaurantId = typeof userInfo?.restaurant_id === 'object'
    ? userInfo?.restaurant_id?._id
    : userInfo?.restaurant_id;

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

  const getCategory = useCallback(async () => {
    try {
      const apiRes: any = await apis.category.get('catering_services=false');
      const categories = apiRes?.data || [];
      setCategoryList(categories);

      if (categories.length > 0) {
        setSelectedItem((prevSelected: any) => {
          if (cat_Id) {
            const matched = categories.find((c: any) => c._id === cat_Id);
            if (matched) return matched;
          }
          if (prevSelected) {
            const exists = categories.find((c: any) => c._id === prevSelected._id);
            if (exists) return exists;
          }
          return categories[0];
        });
      } else {
        setSelectedItem(null);
        setMenuList([]);
      }
    } catch (error) {
      Toast.error(error);
    }
  }, [cat_Id, Toast]);

  const getFoodList = useCallback(async (category: any) => {
    if (!category?._id) return;
    setShowAdd(false);
    setSelectedItem(category);
    try {
      const currentRestaurantId = typeof userInfo?.restaurant_id === 'object'
        ? userInfo?.restaurant_id?._id
        : userInfo?.restaurant_id;

      const params = new URLSearchParams();
      if (currentRestaurantId) {
        params.append('restaurant_id', currentRestaurantId);
      }
      params.append('category_id', category._id);
      params.append('page', '1');
      params.append('limit', '100');

      const apiRes = await apis.FoodList.get(params.toString());
      setMenuList(apiRes?.data || []);
    } catch (error) {
      Toast.error(error);
    }
  }, [userInfo?.restaurant_id, Toast]);

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

  useEffect(() => {
    if (selectedItem?._id) {
      getFoodList(selectedItem);
    }
  }, [selectedItem?._id, restaurantId, getFoodList]);
  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 (editItemRef.current) {
      const isValid = await editItemRef.current.validate();
      if (!isValid) return;
    } else {
      if (isFoodCategory && !foodData.food_type) {
        Toast.error('Please select a sub category (Veg / Non Veg / Egg)');
        return;
      }
      if (!foodData.name || foodData.name.trim().length < 2) {
        Toast.error('Item name must be at least 2 characters');
        return;
      }
      if (!foodData.price || Number(foodData.price) <= 0) {
        Toast.error('Price must be positive');
        return;
      }
      if (!foodData.description || foodData.description.trim().length < 10) {
        Toast.error('Description must be at least 10 characters');
        return;
      }
      if (!foodData.image || foodData.image.length < 3) {
        Toast.error('At least 3 images are required');
        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,
        discounted_price: foodData.is_discount_active ? foodData.discounted_price : null,
        discount_type: foodData.is_discount_active ? foodData.discount_type : null,
        discount_value: foodData.is_discount_active ? foodData.discount_value : null,
        discount_start_date: foodData.is_discount_active && foodData.discount_start_date ? formatDateStringToUTC(foodData.discount_start_date, false) : null,
        discount_end_date: foodData.is_discount_active && foodData.discount_end_date ? formatDateStringToUTC(foodData.discount_end_date, true) : null,
        is_discount_active: foodData.is_discount_active,
        is_available: (foodData.availability_status || 'in_stock') === 'in_stock',
        availability_status: foodData.availability_status || 'in_stock',
        is_hidden: foodData.availability_status === 'hidden',
        food_type: foodData.food_type,
        add_ons:
          foodData?.add_ons?.map((addOn: any) => ({
            title: addOn.name || addOn.title,
            additional_price: Number(addOn.price ?? addOn.additional_price ?? 0),
            min_selection: Number(addOn.min_selection ?? 0),
            max_selection: Number(addOn.max_selection ?? 1),
            customer_selection:
              addOn.isCompulsory || addOn?.customer_selection === 'compulsory'
                ? 'compulsory'
                : 'optional'
          })) || [],
        toppings:
          foodData?.toppings?.map((topping: any) => ({
            title: topping.name || topping.title,
            additional_price: Number(topping.price ?? topping.additional_price ?? 0),
            min_selection: Number(topping.min_selection ?? 0),
            max_selection: Number(topping.max_selection ?? 1),
            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 || [],
        is_recommend: Boolean(foodData.is_recommend)
      };


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

      if (response || apiRes?.success) {
        Toast.success(apiRes?.message || 'Item updated successfully');
        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);
      } else {
        Toast.error(apiRes?.message || apiRes?.error || 'Failed to update item');
      }
    } catch (error: any) {
      Toast.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const onSearch = async (value: any) => {
    try {
      setSearchQuery(value);
      let urlSearchParam = new URLSearchParams();
      urlSearchParam.set('catering_services', 'false');
      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 ? (
                <DndContext
                  id="category-dnd-context"
                  sensors={sensors}
                  collisionDetection={closestCenter}
                  onDragEnd={handleDragEnd}
                >
                  <SortableContext
                    items={categoryList.map((c: any) => c._id || c.id)}
                    strategy={verticalListSortingStrategy}
                  >
                    <div className="flex flex-col gap-2.5">
                      {categoryList.map((category: any) => (
                        <SortableCategoryItem
                          key={category._id || category.id}
                          category={category}
                          isSelected={category._id === selectedItem?._id}
                          onSelect={getFoodList}
                          onEdit={handleUpdate}
                          onDelete={handleDeleteCat}
                        />
                      ))}
                    </div>
                  </SortableContext>
                </DndContext>
              ) : (
                <div className="flex flex-col items-center justify-center py-12 text-center text-gray-400">
                  <FolderOpen size={36} className="mb-2 stroke-[1.5] text-gray-300" />
                  <span className="text-sm font-medium text-gray-500">No Categories Found</span>
                </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 flex flex-col">
                {menuList?.length > 0 ? (
                  menuList.map((item: any) => (
                    <div
                      key={item._id || 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 && (
                                <Icons.FoodTypeIcon type={item.food_type} className="h-4 w-4 shrink-0" />
                              )}
                              <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">
                            {(() => {
                              const effectiveDiscountedPrice = getEffectiveDiscountedPrice(item);
                              return effectiveDiscountedPrice !== null ? (
                                <div className="flex items-baseline gap-2">
                                  <span className="text-[18px] font-[600] text-[#006857]">
                                    {currency}{effectiveDiscountedPrice}
                                  </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-2">
                          <span className="text-[13px] font-medium text-gray-700">
                            Availability{' '}
                            <span className="text-gray-400 font-normal">
                              (
                              {item?.availability_status === 'hidden' || item?.is_hidden === true || item?.is_hidden === 'true'
                                ? 'Hidden'
                                : item.is_available
                                  ? 'In stock'
                                  : 'Out of stock'}
                              )
                            </span>
                          </span>
                          <div
                            className={cn(
                              'relative h-5 w-10 cursor-pointer rounded-full transition-colors duration-200',
                              item.is_available ? 'bg-emerald-500' : 'bg-red-400'
                            )}
                            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 className="flex-1 flex flex-col items-center justify-center min-h-[320px] text-center p-8 border-2 border-dashed border-gray-200 rounded-2xl bg-gray-50/50 my-auto">
                    <div className="w-16 h-16 rounded-full bg-orange-100/70 flex items-center justify-center mb-4 text-[var(--primary-brand)] shadow-sm">
                      <UtensilsCrossed size={30} className="stroke-[1.75]" />
                    </div>
                    <h3 className="text-lg font-bold text-gray-800 mb-1">
                      No Food Items Available
                    </h3>
                    <p className="text-sm text-gray-500 max-w-xs mb-6 leading-relaxed">
                      {selectedItem
                        ? `There are currently no items added in "${selectedItem.category_name}".`
                        : 'Select a category from the list to view its items or add a new category.'}
                    </p>
                    {selectedItem && (
                      <Button
                        onClick={() => setShowAdd(true)}
                        variant="theme"
                        className="h-10 px-5 text-sm font-semibold shadow-sm hover:shadow transition-all"
                      >
                        <Plus className="w-4 h-4 mr-1.5 stroke-[2.5]" />
                        Add First Item
                      </Button>
                    )}
                  </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">
                      <Icons.FoodTypeIcon type={foodData?.food_type} className="h-4 w-4 shrink-0" />
                      <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 ref={editItemRef} 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>
  );
}