'use client';
import { Button } from '@/components/ui/button';
import React, { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/navigation';
import Loader from '@/components/common/loader';
import AuthLayout from '@/components/layout/layout';
import { Icons } from '@/components/icons';
import burger from '@/assets/images/category.png';
import {
  ChevronRight,
  CircleX,
  Cross,
  Pencil,
  Plus,
  Search,
  Trash2,
  Upload,
  GripVertical,
  UtensilsCrossed
} from 'lucide-react';
import { Avatar } from '@radix-ui/react-avatar';
import { AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Input } from '@/components/ui/input';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import authBanner from '@/assets/images/AuthImages/menu.png';
import apis from '@/utils/apis';
import AddCategory from './addCategory';
import { useGlobalContext } from '@/context/Provider';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import toast from 'react-hot-toast';
import * as Tooltip from '@radix-ui/react-tooltip';
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';

function MenuCard({
  data,
  handleRedirect,
  handleUpdate,
  handleDelete
}: {
  data: any;
  handleRedirect: any;
  handleUpdate: any;
  handleDelete: any;
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: data._id || data.id });

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

  const [isOpen, setIsOpen] = useState(false);
  const [image, setImage] = useState(data?.category_image);
  const [name, setName] = useState(data?.category_name);

  const addCategory = async () => {
    try {
      let payload = {
        category_name: name,
        category_image: image
      };
      handleUpdate(data?._id, payload, data?.category_name);
    } catch (error) {
    } finally {
      setIsOpen(false);
    }
  };
  const handleDirection = (item: any) => {
    handleRedirect(item);
  };
  const handleDeleteCat = async () => {
    handleDelete(data?._id, data?.category_name);
  };
  return (
    <div ref={setNodeRef} style={style}>
      <div
        style={{
          borderEndEndRadius: '3000px',
          borderTopRightRadius: '3000px',
          backgroundColor: isDragging ? '#FED7AA' : '#E6E6E6'
        }}
        className="flex w-full items-center justify-between rounded-s-full pe-2 group"
      >
        <div
          {...attributes}
          {...listeners}
          className="p-2 cursor-grab active:cursor-grabbing text-gray-500 hover:text-gray-800 shrink-0 flex items-center justify-center"
          title="Drag to reorder"
          onClick={(e) => e.stopPropagation()}
        >
          <GripVertical size={18} />
        </div>

        <div
          className="flex w-[80%] items-center gap-2 cursor-pointer"
          onClick={() => handleDirection(data)}
        >
          <Avatar>
            <AvatarImage
              className="menu-avatar rounded-full"
              src={
                data?.category_image && data.category_image !== 'category.png'
                  ? (data.category_image.startsWith('http') ? data.category_image : `${apis.BUCKET_ROOT}${data.category_image}`)
                  : burger.src
              }
              alt="@shadcn"
            />
            <AvatarFallback>{data.category_name}</AvatarFallback>
          </Avatar>
          <div>
            <span className="font-semibold text-gray-900">{data.category_name}</span>
            {((data?.total_item_add ?? data?.total_food_add ?? 0) > 0) && (
              <span className="ml-1 text-xs text-gray-500">({data?.total_item_add ?? data?.total_food_add} items)</span>
            )}
          </div>
        </div>
        <div
          className="flex w-[15%] flex-row items-center justify-end gap-2 "
          onClick={(e) => e.stopPropagation()}
        >
          {(data?.vendor_id || !data?._id) && (
            <Tooltip.Provider delayDuration={300}>
              <Tooltip.Root>
                <Tooltip.Trigger asChild>
                  <div>
                    <Pencil
                      size={18}
                      color={"#212121"}
                      className={'cursor-pointer'}
                      onClick={() => {
                        setIsOpen(true);
                      }}
                    />
                  </div>
                </Tooltip.Trigger>
                <Tooltip.Content
                  className="rounded bg-black px-3 py-1 text-xs text-white shadow-sm"
                  side="top"
                >
                  Edit Category
                </Tooltip.Content>
              </Tooltip.Root>
            </Tooltip.Provider>
          )}

          {data?.vendor_id && (
            <Trash2
              strokeWidth={1}
              size={20}
              color="red"
              className="cursor-pointer"
              onClick={handleDeleteCat}
            />
          )}

          <ChevronRight className="cursor-pointer" onClick={() => handleDirection(data)} />
        </div>
      </div>
      <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();
            }}
          >
            <AddCategory
              setImage={setImage}
              setName={setName}
              cat_name={name}
              image={image}
            />
          </div>
          <Button
            className="h-11 w-full"
            variant={'theme'}
            onClick={addCategory}
          >
            Save
          </Button>
        </DialogContent>
      </Dialog>
    </div>
  );
}
const addCategorySchema = z.object({
  name: z.string().min(1, 'name is required'),
  image: z.string().min(2, 'Imnage is Requied')
});

type category = z.infer<typeof addCategorySchema>;
const Login = (props: any) => {
  const { Toast, userInfo, getProfile } = useGlobalContext();
  const [loading, setLoading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [filesd, setFiles] = useState<File[]>([]);
  const [categoryList, setCategoryList] = useState<any>([]);
  const [image, setImage] = useState('');
  const [name, setName] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const [isOpen1, setIsOpen1] = useState(false);
  const [blobFile, setBlobFile] = useState<File | null>(null);
  const [showUploadButton, setShowUploadButton] = useState(false);

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

  const form = useForm<category>({
    resolver: zodResolver(addCategorySchema),
    defaultValues: {
      name: undefined,
      image: undefined
    }
  });

  const router = useRouter();

  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();
      }
    }
  };

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

  useEffect(() => {
    getCategory();
    //   const cameFromAddItem = sessionStorage.getItem('cameFromAddItem');
    //   const navEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;

    //   if ((navEntry?.type === 'navigate' || navEntry?.type === 'reload') && !cameFromAddItem) {
    //     setIsOpen1(true);
    //   }
    //   return () => {
    //     localStorage.clear();
    // }
  }, []);

  useEffect(() => {
    let token: any = sessionStorage.getItem('token');
    if (!token) {
      router.replace(`/auth/login`);
    }
  }, []);

  const getCategory = async () => {
    const foodItems: any = JSON.parse(
      localStorage.getItem('category_list') || '[]'
    );

    try {
      let urlSearchParam = new URLSearchParams();
      urlSearchParam.set('catering_services', 'false');
      const apiRes = await apis.category.get(urlSearchParam.toString());
      const apiData = apiRes?.data || [];

      const normalize = (name: string) => name?.trim().toLowerCase();

      const filteredFoodItems = foodItems.filter(
        (foodItem: any) =>
          !apiData.some(
            (apiItem: any) =>
              normalize(apiItem.category_name) ===
              normalize(foodItem.category_name)
          )
      );

      const mergedList = [...apiData].map((apiItem) => {
        const local = foodItems.find(
          (item: any) =>
            normalize(item.category_name) === normalize(apiItem.category_name)
        );
        return {
          ...apiItem,
          foods: local?.foods || [],
          total_food_add: local?.foods?.length || apiItem.total_item_add || apiItem.total_food_add || 0,
          total_item_add: local?.foods?.length || apiItem.total_item_add || apiItem.total_food_add || 0
        };
      });

      // setCategoryList([...mergedList, ...filteredFoodItems]);

      const finalList = [...mergedList, ...filteredFoodItems];
      setCategoryList(finalList);

      const allAreRestaurant =
        finalList.length > 0 &&
        finalList.every((item: any) => item.restaurant_type === 'restaurant');

      setShowUploadButton(allAreRestaurant);
    } catch (error) {
      Toast.error(error);
    }
  };

  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 (!name) {
      Toast.error('Enter valid name!');
      return;
    }
    if (!image) {
      Toast.error('Upload image!');
      return;
    }
    setLoading(true);
    try {
      let payload = {
        category_name: name,
        category_image: image,
        type: userInfo?.restaurant_id?.type
      };
      const apiRes = await apis.category.add(payload);
      if (apiRes.data) {
        setName('');
        setImage('');
        setTimeout(() => {
          getCategory();
        }, 300);
      }
    } catch (error) {
      Toast.error(error);
    } finally {
      setLoading(false);
      setIsOpen(false);
    }
  };

  const handleFileSelect = () => {
    if (fileInputRef?.current) {
      fileInputRef.current.click();
    }
  };
  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || files.length === 0) return;
    setBlobFile(files[0]);
    setFiles(Array.from(files));
  };

  const handleMenuUpload = async () => {
    setLoading(true);
    const fileArray: File[] = Array.from(filesd);
    const categories = 'Burger, Pizza, Pasta';
    const items = await getItemsFromImages(fileArray, categories);
    setLoading(false);
    const updatedCategories = categoryList.map((category: any) => {
      const normalizedCategoryName = category.category_name
        ?.trim()
        .toLowerCase();
      const matchedFoods = items?.filter(
        (item: any) =>
          item.category?.trim().toLowerCase() === normalizedCategoryName
      );

      return {
        ...category,
        total_food_add: matchedFoods.length,
        foods: matchedFoods
      };
    });
    const existingNames = updatedCategories.map((c: any) =>
      c.category_name.trim().toLowerCase()
    );

    const unmatchedMap = new Map<string, any[]>();
    items.forEach((item: any) => {
      const name = item.category?.trim().toLowerCase();
      if (!existingNames.includes(name)) {
        if (!unmatchedMap.has(name)) {
          unmatchedMap.set(name, []);
        }
        unmatchedMap.get(name)?.push(item);
      }
    });

    const newCategories = Array.from(unmatchedMap.entries()).map(
      ([normalizedName, foods]) => {
        return {
          _id: '',
          category_name: foods[0].category,
          category_image: 'category.png',
          created_at: Date.now(),
          updated_at: null,
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
          __v: 0,
          total_food_add: foods.length,
          foods
        };
      }
    );

    const finalCategoryList = [...updatedCategories, ...newCategories];
    localStorage.setItem('category_list', JSON.stringify(finalCategoryList));

    setCategoryList([...updatedCategories, ...newCategories]);
    setIsOpen1(false);
    setBlobFile(null);
    setFiles([]);
  };

  const getBase64 = (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const result = reader.result?.toString().split(',')[1];
        if (result) resolve(result);
        else reject('Error converting to base64');
      };
      reader.onerror = (error) => reject(error);
    });
  };

  const GEMINI_API_KEY = process.env.NEXT_PUBLIC_GEMINI_API_KEY;
  const GEMINI_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${GEMINI_API_KEY}`;

  const getItemsFromImages = async (
    images: File[],
    availableCategories: any = null
  ) => {
    const parts: any[] = [];

    for (const image of images) {
      const base64 = await getBase64(image);
      parts.push({
        inline_data: {
          mime_type: image.type || 'image/jpeg',
          data: base64
        }
      });
    }

    const prompt = `
      read the uploaded images and return a list of items in data key
  Notes: 
  1. Every item must contain the following keys
    a. title in title key
    b. description in description key (if available, and if not available then use generate short description of 5-6 words, make sure the description is not missing and should be informative)
    c. price in price key (if available (don't add currency symbol),always include this key if multiple price available then keep smallest price option in this key)
    d. category in category key (if available, if not available then generate taking reference from title)
    ${availableCategories?.isEmpty
        ? ''
        : 'f. if any food category matches with any of the these $availableCategories then use this category in category key'
      } 
    g. food_type in food_type key (veg or non_veg or egg)
    h. always make sure the description is not missing.. if not able to find from image then generate 5-6 words description taking ref from title
    h. if there are multiple size/pricing available the add a key price_options which will be like this [{"size_name":"half,"size_price":"30"},{"size_name":"full,"size_price":"60"}]

  2. in response the parts list must directly contain the json list of items in data key (only json type not string)
  ""`;

    parts.push({ text: prompt });

    const payload = {
      contents: [
        {
          parts: parts
        }
      ]
    };

    try {
      const res = await fetch(GEMINI_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
      });

      const data = await res.json();

      const rawText = data?.candidates?.[0]?.content?.parts?.[0]?.text || '';

      const cleanedText = rawText
        .replace(/```json\s*/, '')
        .replace(/```$/, '')
        .trim();

      const parsed = JSON.parse(cleanedText);

      return parsed?.data ? parsed?.data : parsed;
    } catch (error) {
      Toast.error(error);
      return [];
    }
  };

  const handleRedirect = (item: any) => {
    const categoryId = item?._id;
    const categoryName = encodeURIComponent(item?.category_name);
    const restaurantType = encodeURIComponent(item?.restaurant_type || '');

    // router.push(
    //   `/auth/menu/add-item?category=${categoryId}&category_name=${categoryName}&restaurant_type=${restaurantType}`
    // );
    router.push(
      `/auth/menu/add-item?category=${categoryId}&category_name=${categoryName}&restaurant_type=${restaurantType}`
    );

    localStorage.setItem('category_foods', JSON.stringify(item?.foods));
    localStorage.setItem('category_list', JSON.stringify(categoryList));
  };

  const handleUpdate = async (id: any, payload: any, oldName?: string) => {
    setLoading(true);
    try {
      const storedCategories = JSON.parse(
        localStorage.getItem('category_list') || '[]'
      );
      if (id) {
        const apiRes = await apis.category.update(id, payload);
        if (apiRes) {
          if (oldName && oldName !== payload.category_name) {
            const updatedCategories = storedCategories.map((cat: any) =>
              cat.category_name === oldName
                ? { ...cat, category_name: payload.category_name }
                : cat
            );
            localStorage.setItem(
              'category_list',
              JSON.stringify(updatedCategories)
            );
          }
          setTimeout(() => {
            getCategory();
          }, 300);
        }
      } else {
        const apiRes = await apis.category.add(payload);
        if (apiRes) {
          if (oldName && oldName !== payload.category_name) {
            const updatedCategories = storedCategories.map((cat: any) =>
              cat.category_name === oldName
                ? { ...cat, category_name: payload.category_name }
                : cat
            );
            localStorage.setItem(
              'category_list',
              JSON.stringify(updatedCategories)
            );
          }
          setTimeout(() => {
            getCategory();
          }, 300);
        }
      }
    } catch (error) {
      Toast.error(error);
    } finally {
      setLoading(false);
    }
  };
  const handleDelete = async (id: any, categoryName?: string) => {
    try {
      const storedCategories = JSON.parse(
        localStorage.getItem('category_list') || '[]'
      );
      if (id) {
        const apiRes = await apis.category.delete(id);
        if (apiRes) {
          Toast.success('Category Deleted Successfully');
        }
        const updatedCategories = storedCategories.filter(
          (cat: any) => cat._id !== id
        );
        localStorage.setItem(
          'category_list',
          JSON.stringify(updatedCategories)
        );
      } else if (categoryName) {
        const updatedCategories = storedCategories.filter(
          (cat: any) => cat.category_name !== categoryName
        );
        localStorage.setItem(
          'category_list',
          JSON.stringify(updatedCategories)
        );
        Toast.success('Local Category Deleted Successfully');
      }
      setTimeout(() => {
        getCategory();
      }, 300);
    } catch (error) {
      Toast.error(error);
    }
  };
  const handleSubmit = () => {
    let resId: any = sessionStorage.getItem('resId');
    const items = categoryList.flatMap((category: any) => {
      if (!category.foods || category.foods.length === 0) return [];

      return category.foods.map((food: any) => {
        const baseItem = {
          name: food.title,
          food_type: food.food_type,
          price: parseFloat(food.price) || 0,
          description: food.description
        };

        // Add category_id if exists, else category_name
        if (category._id) {
          return { ...baseItem, category_name: category.category_name };
        } else {
          return { ...baseItem, category_name: category.category_name };
        }
      });
    });

    const payLoad = {
      items
    };
    try {
      const apiRes = apis.FoodList.addFoods(resId, payLoad);
      if (apiRes) {
        localStorage.clear();
        sessionStorage.setItem('food', 'complete');
        if (userInfo?.restaurant_id?.catering_services) {
          router.push('/auth/menu/add-catering');
        } else {
          router.push('/auth/complete-profile');
        }
        // router.push(`/auth/complete-profile`);
      }
    } catch (error) {
      toast.error('Failed to add menu.');
    }
  };
  return (
    <>
      <section className="w-full space-y-4">
        <div className="mb-3 inline-flex items-center gap-1.5 rounded-full bg-orange-100 px-3 py-1 text-xs font-semibold text-orange-700">
          <UtensilsCrossed className="h-3.5 w-3.5 text-orange-600" />
          <span>Food Delivery Menu</span>
        </div>
        <div className="flex w-full flex-row items-center justify-between gap-3">
          <div className="relative flex-1 items-center bg-white">
            <Search stroke="var(--primary-brand)" className="absolute left-3 top-1/2 -translate-y-1/2 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-4 text-sm font-medium"
            />
          </div>

          <Button
            className="h-9 shrink-0 text-white"
            variant={'theme'}
            onClick={() => setIsOpen(true)}
          >
            Add
            <Plus className="ml-1 h-4 w-4" />
          </Button>
        </div>
        {isFoodCategory && showUploadButton && (
          <div className="mb-2">
            <Button
              className="h-11 w-full"
              variant={'theme'}
              onClick={() => setIsOpen1(true)}
            >
              Upload menu
              <Upload />
            </Button>
          </div>
        )}

        <div className="space-y-3">
          {categoryList?.length > 0 && (
            <DndContext
              id="restaurant-menu-dnd-context"
              sensors={sensors}
              collisionDetection={closestCenter}
              onDragEnd={handleDragEnd}
            >
              <SortableContext
                items={categoryList.map((item: any) => item._id || item.id)}
                strategy={verticalListSortingStrategy}
              >
                <div className="flex flex-col gap-3">
                  {categoryList.map((item: any) => (
                    <MenuCard
                      key={item._id || item.id}
                      data={item}
                      handleRedirect={handleRedirect}
                      handleUpdate={handleUpdate}
                      handleDelete={handleDelete}
                    />
                  ))}
                </div>
              </SortableContext>
            </DndContext>
          )}
        </div>
        {/* <div
            className="mb-5 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}
          >
            <Loader loading={loading} />
            Save
          </Button> */}
        <Button
          className="h-11 w-full mt-2"
          variant={'theme'}
          onClick={handleSubmit}
        >
          Submit
        </Button>
      </section>
      <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="h-11 w-full"
            variant={'theme'}
            onClick={addCategory}
          >
            <Loader loading={loading} />
            Save
          </Button>
        </DialogContent>
      </Dialog>
      <Dialog open={isOpen1} onOpenChange={() => setIsOpen1(false)}>
        <DialogContent className="h-[300px]  border-none bg-white">
          <div className="flex w-full flex-row items-center justify-between">
            <span className="text-[20px] font-[600]">Upload Menu</span>
            <CircleX
              className="cursor-pointer"
              onClick={() => {
                setIsOpen1(false);
                setBlobFile(null);
              }}
            />
          </div>
          <div
            className="w-full"
            onClick={(e) => {
              e.stopPropagation();
              // setOpen(true);
            }}
          >
            {blobFile ? (
              <div className="flex h-[100px] items-center justify-center rounded-md border-2 border-dashed border-gray-400">
                <img
                  src={URL.createObjectURL(blobFile)}
                  alt="Preview"
                  className="h-16 w-16 rounded-lg object-cover"
                />
                <CircleX
                  className="cursor-pointer"
                  onClick={() => setBlobFile(null)}
                />
              </div>
            ) : (
              <div
                className="w-full"
                onClick={(e) => {
                  e.stopPropagation();
                  // setOpen(true);
                }}
              >
                <div
                  className="flex h-[100px] w-full cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-gray-400 text-gray-400"
                  onClick={handleFileSelect}
                >
                  Upload Menu
                  <Upload />
                </div>
                <Input
                  type="file"
                  accept=".jpg,.jpeg,.png,.webp"
                  hidden
                  ref={fileInputRef}
                  onChange={handleFileChange}
                  className="hidden"
                />
              </div>
            )}
          </div>
          <Button
            className="h-11 w-full"
            variant={'theme'}
            onClick={handleMenuUpload}
            disabled={loading || !filesd?.length}
          >
            <Loader loading={loading} />
            Save
          </Button>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default function LoginPage(props: any) {
  return (
    <AuthLayout
      title={'Add Food Delivery Menu'}
      des={'Create and manage your food delivery categories and dishes for your store.'}
      image={authBanner.src}
    >
      <Login {...props} />
    </AuthLayout>
  );
}