'use client';

import * as React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import DashboardLayout from '@/app/dashboard/layout';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Minus, Plus } from 'lucide-react';
import apis, { BUCKET_ROOT } from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';
import Loader from '@/components/common/loader';
import { useRouter } from 'next/navigation';

const formSchema = z.object({
  plate_name: z.string().min(2, 'Enter plate name'),
  description: z.string().optional(),
  plate_price: z.coerce.number().min(1, 'Enter valid plate price'),
  plate_price_child: z.coerce.number().optional(),
  categories: z.record(z.string(), z.number().min(0).max(100)).optional(),
});

type FormValues = z.infer<typeof formSchema>;

interface FoodItem {
  id: string;
  name: string;
}

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

const AddPlate: React.FC = () => {
  const [categories, setCategories] = React.useState<Category[]>([]);
  const [loading, setLoading] = React.useState(false);
  const { Toast, userInfo } = useGlobalContext();
  const router = useRouter();

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      categories: {},
    },
  });

  // Fetch categories when userInfo is available
  React.useEffect(() => {
    const fetchCategories = async () => {
      try {
        const restaurantId =
          userInfo?.restaurant_id?._id || sessionStorage.getItem('resId');

        if (!restaurantId) {
          return;
        }

        setLoading(true);
        const response = await apis.Catering.getCategoryList(restaurantId);

        if (response?.data) {
          setCategories(response.data);

          // Initialize form values for each category
          const initialCategories: Record<string, number> = {};
          response.data.forEach((category: Category) => {
            initialCategories[category._id] = 0;
          });

          form.setValue('categories', initialCategories);
        }
      } catch (error) {
        console.error('Error fetching categories:', error);
        Toast.error(error);
      } finally {
        setLoading(false);
      }
    };

    fetchCategories();
  }, [userInfo]);

  const onSubmit = async (values: FormValues) => {
    try {
      setLoading(true);

      // Filter only categories with count > 0
      const selectedItems = Object.entries(values.categories || {})
        .filter(([_, quantity]) => quantity > 0)
        .map(([categoryId, quantity]) => ({
          category_id: categoryId,
          count: quantity,
        }));

      // If user hasn’t selected anything
      if (selectedItems.length === 0) {
        Toast.error('Please select at least one category.');
        setLoading(false);
        return;
      }

      const payload = {
        name: values.plate_name,
        price: values.plate_price,
        kid_price: values.plate_price_child || 0,
        discription: values.description || '',
        status: 'active',
        plan_details: selectedItems,
      };

      const response = await apis.Catering.addCateringService(payload);

      if (response?.plan) {
        Toast.success('Catering plan added successfully!');
        form.reset();
        router.push('/catering');
      }
    } catch (error) {
      console.error('Error adding catering service:', error);
      Toast.error('Failed to add catering plan');
    } finally {
      setLoading(false);
    }
  };


  if (loading) {
    return (
      <div className="w-full max-w-5xl mx-auto mt-8 bg-white rounded-lg shadow-sm border p-6">
        <div className="flex justify-center items-center h-64">
          <Loader loading={loading} />
        </div>
      </div>
    );
  }

  return (
    <div className="w-full max-w-5xl mx-auto mt-8 bg-white rounded-lg shadow-sm border p-6">
      <h2 className="text-xl font-semibold text-gray-900 mb-4">Add Plate</h2>

      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          {/* Basic Plate Info */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <FormField
              control={form.control}
              name="plate_name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Plate Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter name" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="description"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Description</FormLabel>
                  <FormControl>
                    <Input placeholder="Description" {...field} />
                  </FormControl>
                </FormItem>
              )}
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <FormField
              control={form.control}
              name="plate_price"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Plate Price</FormLabel>
                  <FormControl>
                    <Input type="number" placeholder="Enter price" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="plate_price_child"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Plate Price (under 12 yrs)</FormLabel>
                  <FormControl>
                    <Input type="number" placeholder="Optional" {...field} />
                  </FormControl>
                </FormItem>
              )}
            />
          </div>

          <Separator />

          {/* Dynamic Accordion Section */}
          {categories.length > 0 ? (
            <Accordion type="multiple" className="space-y-3">
              {categories
                .filter((category) => category.food && category.food.length > 0)
                .map((category) => (
                  <AccordionItem
                    key={category._id}
                    value={category._id}
                    className="border rounded-lg"
                  >
                    <div className="flex items-center justify-between px-4 py-2">
                      {/* Category name + image */}
                      <AccordionTrigger className="flex items-center gap-3 flex-1 hover:no-underline">
                        {category.category_image && (
                          <img
                            src={`${BUCKET_ROOT}${category.category_image}`}
                            alt={category.category_name}
                            className="h-8 w-8 rounded-full object-cover"
                          />
                        )}
                        <span className="text-left font-medium">
                          {category.category_name}
                        </span>
                      </AccordionTrigger>

                      {/* Quantity controls */}
                      <Controller
                        control={form.control}
                        name={`categories.${category._id}`}
                        render={({ field }) => {
                          const maxCount = category.food?.length || 0; // limit = total food items
                          const currentValue = field.value || 0;

                          const handleIncrement = () => {
                            if (currentValue < maxCount) {
                              form.setValue(`categories.${category._id}`, currentValue + 1);
                            }
                          };

                          const handleDecrement = () => {
                            if (currentValue > 0) {
                              form.setValue(`categories.${category._id}`, currentValue - 1);
                            }
                          };

                          return (
                            <div
                              className="flex items-center gap-2"
                              onClick={(e) => e.stopPropagation()} // prevent accordion toggle
                            >
                              <Button
                                type="button"
                                variant="outline"
                                size="icon"
                                className="h-8 w-8"
                                onClick={handleDecrement}
                                disabled={currentValue === 0}
                              >
                                <Minus className="h-4 w-4" />
                              </Button>
                              <span className="w-6 text-center font-medium">
                                {currentValue}
                              </span>
                              <Button
                                type="button"
                                variant="outline"
                                size="icon"
                                className="h-8 w-8"
                                onClick={handleIncrement}
                                disabled={currentValue >= maxCount}
                              >
                                <Plus className="h-4 w-4" />
                              </Button>
                            </div>
                          );
                        }}
                      />
                    </div>

                    <AccordionContent>
                      <div className="px-4 pb-4 space-y-2">
                        {category.food.map((item) => (
                          <div
                            key={item.id}
                            className="flex items-start gap-2 py-1 text-sm text-gray-700"
                          >
                            <span className="text-gray-500 text-base leading-5">•</span>
                            <span>{item.name}</span>
                          </div>
                        ))}
                      </div>
                    </AccordionContent>
                  </AccordionItem>
                ))}
            </Accordion>
          ) : (
            <p className="text-gray-500 text-center py-8">No categories available</p>
          )}

          <div className="text-end">
            <div className="flex justify-end mt-4">
              <Button
                type="submit"
                className="flex items-center font-medium gap-2 bg-[var(--primary-brand)] text-white px-4 py-2 rounded-lg text-sm hover:bg-[var(--primary-brand)] focus:bg-[var(--primary-brand)] active:bg-[var(--primary-brand)]"
              >
                Save Plate
              </Button>
            </div>
          </div>
        </form>
      </Form>
    </div>
  );
};

export default function JobAutomationPage() {
  return (
    <DashboardLayout>
      <div className="h-full overflow-y-auto p-4">
        <AddPlate />
      </div>
    </DashboardLayout>
  );
}