'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
// import { FileInput } from '@/components/ui/file-input';
import { Pencil } from 'lucide-react';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import AuthLayout from '@/components/layout/layout';
import { MultiImages } from '@/components/common/MultipleDropzone';
import authBanner from '@/assets/images/AuthImages/restaurant.png';
import QuantityDialog from './variantsmodals/QuantityModal';
import { useEffect, useState } from 'react';
import SizeDialog from './variantsmodals/SizeModal';
import PiecesDialog from './variantsmodals/PiecesModal';
import AddonDialog from './customizatiomodal/Addon';
import ToppingsDialog from './customizatiomodal/Toppings';
import { Icons } from '@/components/icons';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useRouter, useSearchParams } from 'next/navigation';
import apis from '@/utils/apis';
import { cn } from "@/lib/utils";
import { useGlobalContext } from '@/context/Provider';

const menuItemSchema = z.object({
  food_type: z.enum(['veg', 'non_veg', 'egg'], {
    required_error: 'Please select a category'
  }),

  // Basic Details
  // category_id: z.string().min(2, ''),
  name: z.string().min(2, 'Item name must be at least 2 characters'),
  price: z.coerce.number().positive('Price must be positive'),
  itemDescription: z
    .string()
    .min(10, 'Description must be at least 10 characters'),
  image: z.array(z.record(z.any())).min(1, 'At least one image is required'),

  // Variants
  variants: z.object({
    quantity: z.array(z.record(z.any())).optional(),

    size: z.array(z.record(z.any())).optional(),

    pieces: z.array(z.record(z.any())).optional()
  }),

  // Customization
  customization: z.object({
    addons: z.array(z.record(z.any())).optional(),

    toppings: z.array(z.record(z.any())).optional(),

    custom: z.array(z.record(z.any())).optional()
  }),

  // Timing
  timing: z.array(z.record(z.any())).optional(),
  availability: z.enum(['all_time', 'same_time', 'different_time']).optional(),

});

const generateTimeSlots = () => {
  const slots = [];
  for (let hour = 0; hour < 24; hour++) {
    for (let minute = 0; minute < 60; minute += 30) {
      const time = `${hour.toString().padStart(2, '0')}:${minute
        .toString()
        .padStart(2, '0')}`;
      slots.push(time);
    }
  }
  return slots;
};

type MenuItemFormValues = z.infer<typeof menuItemSchema>;

function MenuForm() {
  const { Toast } = useGlobalContext();
  const timeSlots = generateTimeSlots();
  const router = useRouter();
  const searchParams = useSearchParams();
  const category = searchParams.get("category");
  const dish = searchParams.get("dish");
  const [recommanded, setRecommanded] = useState(false)
  const [slot, setSlot] = useState<{ start: string | undefined; end: string | undefined }>({
    start: undefined,
    end: undefined,
  });
  const [showModal, setShowModal] = useState({
    quantity: false,
    size: false,
    pieces: false,
    addon: false,
    toppings: false,
    addmore: false
  });

  const form = useForm<MenuItemFormValues>({
    resolver: zodResolver(menuItemSchema),
    defaultValues: {
      // category_id: "",
      food_type: undefined,
      name: '',
      image: [],
      price: undefined,
      itemDescription: '',
      variants: {
        quantity: [],
        size: [],
        pieces: []
      },
      customization: {
        addons: [],
        toppings: [],
        custom: []
      },
      availability: undefined,
      timing: []
    }
  });

  useEffect(() => {
    const storedCategory = sessionStorage.getItem("category");

    if (storedCategory) {
      const categories = JSON.parse(storedCategory);

      const validCategory = categories.find((cat: string) =>
        ["veg", "non_veg", "egg"].includes(cat)
      );

      if (validCategory) {
        form.setValue("food_type", validCategory);
      }
    }
  }, [form]);

  const onSubmit = async (data: MenuItemFormValues) => {
    let resId: any = sessionStorage.getItem('resId')
    try {
      let payload: any = {
        "category_id": category,
        "image": data?.image?.map(img => img.id) || [],
        "name": data?.name,
        "price": data?.price,
        "food_type": data?.food_type,
        "add_ons": data?.customization?.addons?.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),
        })) || [],
        "toppings": data?.customization?.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),
        })) || [],
        // "other_add_ons": data?.image,
        "pieces": data?.variants?.pieces?.map(piece => ({
          title: piece.name,
          add_price: piece.additionalPrice,
          final_price: piece.finalPrice
        })) || [],
        "size": data?.variants?.size?.map(size => ({
          title: size.name,
          add_price: size.additionalPrice,
          final_price: size.finalPrice
        })) || [],
        "quantity": data?.variants?.quantity?.map(quant => ({
          title: quant.name,
          add_price: quant.additionalPrice,
          final_price: quant.finalPrice
        })) || [],
        "description": data?.itemDescription,
        "availability_type": data?.availability,
        "is_recommend": recommanded
      }
      if (data?.availability === "same_time") {
        const daysOfWeek = [
          { day: "Monday", day_id: "1" },
          { day: "Tuesday", day_id: "2" },
          { day: "Wednesday", day_id: "3" },
          { day: "Thursday", day_id: "4" },
          { day: "Friday", day_id: "5" },
          { day: "Saturday", day_id: "6" },
          { day: "Sunday", day_id: "7" },
        ];

        payload.item_timing = daysOfWeek.map((day) => ({
          ...day,
          start_time: slot.start || "",
          end_time: slot.end || "",
        }));
      } else if (data?.availability === "all_time") {
        payload.item_timing = []
      }
      const apiRes: any = dish ? await apis.Food.update(payload, dish) : await apis.Food.add(payload, resId);
      const response = apiRes?.data;
      if (response || apiRes?.success) {
        Toast.success(apiRes?.message || `Item ${dish ? 'updated' : 'added'} successfully`);
        if (data?.availability === "different_time") {
          sessionStorage.setItem("foodId", response?._id || dish);
          router.push(`/auth/restaurant/itemtimings?category=${category}`);
        } else {
          sessionStorage.setItem('food', 'complete');
          sessionStorage.setItem("foodId", response?._id || dish);
          router.replace(`/auth/restaurant/itemList?category=${category}`);
        }
      } else {
        Toast.error(apiRes?.message || apiRes?.error || `Failed to ${dish ? 'update' : 'add'} item`);
      }
    } catch (error: any) {
      Toast.error(error);
    }
  };

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

  const getData = async (food_id: any) => {
    try {
      const params = new URLSearchParams({ food_id: food_id })
      const apiRes = await apis.FoodList.detail(params);
      // setFoodData(apiRes?.data?.[0]);
      const data: any = apiRes?.data?.[0]
      setRecommanded(data?.is_recommend)
      form.reset({
        food_type: data.food_type,
        name: data.name,
        image: data.image.map((image: any) => ({
          url: image,
          name: image,
          id: image,
        })) || [],
        price: data.price,
        itemDescription: data.description,
        variants: {
          quantity: data?.quantity?.map((item: any, index: number) => ({
            id: index + 1,
            name: item.title,
            itemPrice: Number(data.price || 0),
            additionalPrice: Number(item.add_price || 0),
            finalPrice: Number(item.final_price || 0),
            isDefault: index === 0,
          })) || [],
          size: data?.size?.map((item: any, index: number) => ({
            id: index + 1,
            name: item.title,
            itemPrice: Number(data.price || 0),
            additionalPrice: Number(item.add_price || 0),
            finalPrice: Number(item.final_price || 0),
            isDefault: index === 0,
          })) || [],
          pieces: data?.pieces?.map((item: any, index: number) => ({
            id: index + 1,
            name: item.title,
            itemPrice: Number(data.price || 0),
            additionalPrice: Number(item.add_price || 0),
            finalPrice: Number(item.final_price || 0),
            isDefault: index === 0,
          })) || [],
        },
        customization: {
          addons: data?.add_ons?.map((item: any, index: number) => ({
            id: index + 1,
            name: item.title || item.name,
            title: item.title || item.name,
            price: Number(item.additional_price ?? item.price ?? 0),
            additional_price: Number(item.additional_price ?? item.price ?? 0),
            min_selection: Number(item.min_selection ?? 0),
            max_selection: Number(item.max_selection ?? 1),
            isCompulsory: item.customer_selection === "compulsory",
          })) || [],
          toppings: data?.toppings?.map((item: any, index: number) => ({
            id: index + 1,
            name: item.title || item.name,
            title: item.title || item.name,
            price: Number(item.additional_price ?? item.price ?? 0),
            additional_price: Number(item.additional_price ?? item.price ?? 0),
            min_selection: Number(item.min_selection ?? 0),
            max_selection: Number(item.max_selection ?? 1),
            isCompulsory: item.customer_selection === "compulsory",
          })) || [],
        },
        availability: data.availability_type,
      });
    } catch (error) {
      // Toast.error(error);
    }
  }

  useEffect(() => {
    if (dish) {
      getData(dish);
    }
  }, [dish])


  const handleSection = (data: any) => {
    setShowModal({ ...showModal, addmore: false });

    const currentCustomization = form.getValues("customization");

    form.setValue("customization", {
      ...currentCustomization,
      [data.name]: [],
    });
  }

  const handleImages = (data: any) => {
    form.setValue("image", data);
  }

  const handleModalData = (data: any) => {
    form.setValue(`variants.${data?.type}` as keyof MenuItemFormValues, data?.option);
    setShowModal({ ...showModal, [data?.type]: false });
  }

  const handleCustomModalData = (data: any) => {
    form.setValue(`customization.${data?.type}` as keyof MenuItemFormValues, data?.option);
    setShowModal((prev) => ({
      ...prev,
      [data.name]: false,
    }));
  }

  const updateTimeSlot = (type: "start" | "end", data: string) => {
    setSlot((prevSlot) => ({
      ...prevSlot,
      [type]: data,
    }));
  };

  const handleRemove = (type: any) => {
    form.setValue(`${type}` as keyof MenuItemFormValues, []);
    form.trigger(`${type}` as keyof MenuItemFormValues)
  }

  const variants = {
    quantity: form.getValues("variants.quantity") || [],
    size: form.getValues("variants.size") || [],
    pieces: form.getValues("variants.pieces") || [],
  };

  // Find the first non-empty variant
  const activeVariant = Object.entries(variants).find(([_, value]) => Array.isArray(value) && value.length > 0);
  const activeVariantKey = activeVariant?.[0];
  const activeVariantData = activeVariant?.[1] || [];

  const variantDialogs = {
    quantity: QuantityDialog,
    size: SizeDialog,
    pieces: PiecesDialog,
  };

  const ActiveDialog = variantDialogs[activeVariantKey as keyof typeof variantDialogs];


  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 h-[78vh] overflow-y-auto no-scrollbar">
        {/* Category Selection */}
        <div className="flex gap-2">
          <FormField
            control={form.control}
            name="food_type"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Sub category</FormLabel>
                <FormControl>
                  <div className="flex gap-2">
                    <Button
                      type="button"
                      variant="outline"
                      className={`rounded-lg border ${field.value === 'veg'
                        ? 'border-green-500 bg-green-100'
                        : 'border-gray-200'
                        }`}
                      onClick={() => field.onChange('veg')}
                    >
                      <Icons.VegIcon />{' '}
                      <span style={{ color: '#248853' }}>Veg</span>
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      className={` rounded-lg border ${field.value === 'non_veg'
                        ? 'border-red-500 bg-red-100'
                        : 'border-gray-200'
                        }`}
                      onClick={() => field.onChange('non_veg')}
                    >
                      <Icons.NonVegIcon />{' '}
                      <span style={{ color: '#BF2A34' }}>Non Veg</span>
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      className={` rounded-lg border ${field.value === 'egg'
                        ? 'border-[var(--primary-brand)] bg-orange-100'
                        : 'border-gray-200'
                        }`}
                      onClick={() => field.onChange('egg')}
                    >
                      <Icons.EggIcon />{' '}
                      <span style={{ color: 'var(--primary-brand)' }}>Egg</span>
                    </Button>
                  </div>
                </FormControl>
              </FormItem>
            )}
          />
        </div>

        {/* Basic Details */}
        <div>
          <h2 className="mb-4 text-start text-lg font-medium">Basic Details</h2>

          <div className="space-y-4">
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Item Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter item name" {...field} maxLength={30} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="price"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Item Price</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter item price" {...field} maxLength={5} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="itemDescription"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Item Description</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="Enter item description...."
                      {...field}
                      maxLength={120}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
        </div>

        {/* Item Image */}
        <div>
          <FormField
            control={form.control}
            name="image"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Item Image</FormLabel>
                <FormControl>
                  <MultiImages addImages={handleImages} images={field.value} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        {/* Variants */}
        <div>
          <h2 className="mb-4 text-start text-lg font-medium">Variants of Item</h2>

          {/* If an active variant exists, render it */}
          {activeVariant ? (
            <div className="mb-3 rounded-lg border p-2">
              <div className="flex flex-row justify-between">
                <span className="font-[500] text-[#121212] text-[14px] capitalize">
                  {activeVariantKey}
                </span>
                <Pencil color="#FA0909" size={15} />
              </div>

              {activeVariantData.map((item: any) => (
                <div className="flex flex-row justify-between mt-2" key={item.id}>
                  <span className="font-[500] text-[#808080] text-[15px]">{item.name}</span>
                  <span className="font-[500] text-[#808080] text-[15px]">${item.finalPrice}</span>
                </div>
              ))}

              <div className="flex flex-row justify-end mt-2">
                <span
                  className="font-[500] text-[var(--orange-400)] text-[12px] cursor-pointer"
                  onClick={() => handleRemove(`variants.${activeVariantKey}`)}
                >
                  Remove
                </span>
              </div>
            </div>
          ) : (
            // If no active variant exists, show all selection dialogs
            Object.keys(variantDialogs).map((key) => {
              const DialogComponent = variantDialogs[key as keyof typeof variantDialogs];
              return (
                <div className="mb-3 rounded-lg border" key={key}>
                  <DialogComponent
                    open={showModal}
                    setOpen={setShowModal}
                    onSave={handleModalData}
                    price={form.getValues("price")}
                  />
                </div>
              );
            })
          )}
        </div>

        {/* Customization */}
        <div>
          <h2 className="mb-4 text-start text-lg font-medium">
            Customization of Item
          </h2>

          {/* Add-on */}
          {(form.getValues("customization.addons")?.length || 0) > 0 ? (
            <div className="mb-3 rounded-lg border p-2">
              <div className='flex flex-row justify-between'>
                <span className='font-[500] text-[#121212] text-[14px]'>Add on</span>
                <Pencil color='#FA0909' size={15} />
              </div>

              {(form.getValues("customization.addons") || []).map((item: any) => (
                <div className='flex flex-row justify-between mt-2' key={item.id}>
                  <span className='font-[500] text-[#808080] text-[15px]'>{item.name}</span>
                  <span className='font-[500] text-[#808080] text-[15px]'>${item.price}</span>
                </div>))}
              <div className='flex flex-row justify-end mt-2'>
                <span className='font-[500] text-[var(--orange-400)] text-[12px] cursor-pointer' onClick={() => handleRemove("customization.addons")}>Remove</span>
              </div>
            </div>
          ) : (
            <div className="mb-3 rounded-lg border">
              <AddonDialog open={showModal} setOpen={setShowModal} onSave={handleCustomModalData} />
            </div>
          )}

          {/* Toppings */}
          {(form.getValues("customization.toppings")?.length || 0) > 0 ? (
            <div className="mb-3 rounded-lg border p-2">
              <div className='flex flex-row justify-between'>
                <span className='font-[500] text-[#121212] text-[14px]'>Toppings</span>
                <Pencil color='#FA0909' size={15} />
              </div>

              {(form.getValues("customization.toppings") || []).map((item: any) => (
                <div className='flex flex-row justify-between mt-2' key={item.id}>
                  <span className='font-[500] text-[#808080] text-[15px]'>{item.name}</span>
                  <span className='font-[500] text-[#808080] text-[15px]'>${item.price}</span>
                </div>))}
              <div className='flex flex-row justify-end mt-2'>
                <span className='font-[500] text-[var(--orange-400)] text-[12px] cursor-pointer' onClick={() => handleRemove("customization.toppings")}>Remove</span>
              </div>
            </div>
          ) : (
            <div className="mb-3 rounded-lg border">
              <ToppingsDialog open={showModal} setOpen={setShowModal} onSave={handleCustomModalData} />
            </div>
          )}


          {/* {Object.entries(form.watch("customization") || {})
            .filter(([key]) => !["addons", "toppings", "custom"].includes(key))
            .map(([key, value]) => (
              <div key={key} className="rounded-lg border mb-3">
                <CustomAddOn title={key} open={showModal} setOpen={setShowModal} onSave={handleCustomModalData} />
              </div>
            ))}
          
          <div className="rounded-lg border">
            <AddMoreDialog open={showModal} setOpen={setShowModal} onAdd={handleSection} />
          </div> */}
        </div>

        {/* Item Timings */}
        <div>
          <h2 className="mb-4 text-start text-lg font-medium">Item Timings</h2>

          <FormField
            control={form.control}
            name="availability"
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <RadioGroup
                    onValueChange={field.onChange}
                    defaultValue={field.value}
                    className="flex flex-col space-y-3"
                  >
                    <div className="flex items-start space-x-2">
                      <RadioGroupItem value="all_time" id="all_time" className={field.value !== "all_time" ? "border-[#808080]" : ""} />
                      <label htmlFor="always" className={field.value === "all_time" ? `text-[#121212] text-[16px]` : "text-[#808080] text-[16px]"}>
                        Item is available at all times when kitchen /
                        restaurants is open.
                      </label>
                    </div>
                    <div className="flex flex-col gap-2">
                      <div className="flex items-start space-x-2">
                        <RadioGroupItem value="same_time" id="same_time" className={field.value !== "same_time" ? "border-[#808080]" : ""} />
                        <label htmlFor="same_time" className={field.value === "same_time" ? `text-[#121212] text-[16px]` : "text-[#808080] text-[16px]"}>
                          Item is available at same time for all days of the week.
                        </label>
                      </div>
                      {field.value === "same_time" && <div className="w-full flex flex-row justify-around h-[54px] items-center">
                        <Select
                          value={slot.start}
                          onValueChange={(value) =>
                            updateTimeSlot('start', value)
                          }
                        >
                          <SelectTrigger className="w-60">
                            <SelectValue placeholder="Start Time" />
                          </SelectTrigger>
                          <SelectContent className='h-[30vh]'>
                            {timeSlots.map((time) => (
                              <SelectItem key={time} value={time}>
                                {time}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <Select
                          value={slot.end}
                          onValueChange={(value) =>
                            updateTimeSlot('end', value)
                          }
                        >
                          <SelectTrigger className="w-60">
                            <SelectValue placeholder="End Time" />
                          </SelectTrigger>
                          <SelectContent className='h-[30vh]'>
                            {timeSlots.map((time) => (
                              <SelectItem key={time} value={time}>
                                {time}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>}

                    </div>

                    <div className="flex items-start space-x-2">
                      <RadioGroupItem
                        value="different_time"
                        id="different_time"
                        className={field.value !== "different_time" ? "border-[#808080]" : ""}
                      />
                      <label htmlFor="different_time" className={field.value === "different_time" ? `text-[#121212] text-[16px]` : "text-[#808080] text-[16px]"}>
                        Item is available at different time for all days of the
                        week.
                      </label>
                    </div>
                  </RadioGroup>
                </FormControl>
              </FormItem>
            )}
          />
        </div>

        <div className='flex flex-row justify-between'>
          <span>Recommanded</span>
          <div className={cn(
            "w-12 h-6 rounded-full relative cursor-pointer",
            recommanded ? "bg-green-500" : "bg-gray-200"
          )} onClick={() => setRecommanded(!recommanded)}>
            <div className={cn(
              "absolute w-5 h-5 rounded-full bg-white top-0.5 transition-all",
              recommanded ? "left-[26px]" : "left-0.5"
            )} />
          </div>
        </div>

        <Button
          type="submit"
          // onClick={() => router.push(`/auth/restaurant/itemtimings`)}
          className="w-full bg-yellow-400 text-black hover:bg-[var(--primary-brand)]"
        >
          Save
        </Button>
      </form>
    </Form>
  );
}

export default function Menu() {
  return (
    <AuthLayout
      title="Add item Details"
      des="Provide details for each menu item to help customers make informed choices."
      image={authBanner.src}
    >
      <MenuForm />
    </AuthLayout>
  );
}