'use client';
import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { useGlobalContext } from '@/context/Provider';
import apis from '@/utils/apis';
import { convertToUTCMilliseconds, formatDateStringToUTC } from '@/lib/utils';

const formSchema = z.object({
    discount: z
        .string()
        .min(1, 'Discount is required')
        .regex(/^\d+$/, 'Discount must be a valid number')
        .refine((val) => parseFloat(val) <= 100, {
            message: 'Discount cannot be greater than 100%',
        }),
    startDate: z.string().min(1, 'Start Date is required'),
    endDate: z.string().min(1, 'End Date is required'),
}).superRefine((data, ctx) => {
    const todayStr = new Date().toISOString().split('T')[0];

    const getNormDate = (str?: string) => {
        if (!str) return '';
        return str.includes('T') ? str.split('T')[0] : str;
    };

    const startNorm = getNormDate(data.startDate);
    const endNorm = getNormDate(data.endDate);

    if (startNorm && startNorm < todayStr) {
        ctx.addIssue({
            code: z.ZodIssueCode.custom,
            message: 'Start date cannot be in the past',
            path: ['startDate'],
        });
    }

    if (endNorm && endNorm < todayStr) {
        ctx.addIssue({
            code: z.ZodIssueCode.custom,
            message: 'End date cannot be in the past',
            path: ['endDate'],
        });
    }

    if (startNorm && endNorm && endNorm < startNorm) {
        ctx.addIssue({
            code: z.ZodIssueCode.custom,
            message: 'End date cannot be earlier than start date',
            path: ['endDate'],
        });
    }
});

type FormValues = z.infer<typeof formSchema>;

const DiscountForm = () => {
    const { Toast, setActiveModal, userInfo } = useGlobalContext();

    const form = useForm<FormValues>({
        resolver: zodResolver(formSchema),
        mode: 'onChange',
        defaultValues: {
            discount: '',
            startDate: '',
            endDate: '',
        }
    });

    useEffect(() => {
        const discountData = userInfo?.restaurant_id?.restaurant_discount;

        if (discountData) {
            const { discount, start_time, end_time } = discountData;

            const startDateValue = start_time
                ? new Date(start_time).toISOString().split("T")[0]
                : "";

            const endDateValue = end_time
                ? new Date(end_time).toISOString().split("T")[0]
                : "";

            form.reset({
                discount: discount?.toString() || "",
                startDate: startDateValue,
                endDate: endDateValue,
            });
        }
    }, [userInfo, form]);

    const onSubmit = async (data: FormValues) => {
        const payload = {
            discount: parseFloat(data.discount),
            start_time: convertToUTCMilliseconds(data.startDate),
            end_time: convertToUTCMilliseconds(data.endDate),
        };

        try {
            const response = await apis.Discount.addDiscount(payload);

            if (response) {
                setActiveModal('');
                Toast.success('Discount added/updated successfully!');
            }
        } catch (error) {
            Toast.error(error);
        }
    };

    return (
        <div className="mx-auto mt-3 max-w-2xl space-y-8 h-[88vh] overflow-y-scroll no-scrollbar">
            <span className="text-[#000] font-[400] text-[16px]">Add your discount offer details below.</span>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                    <div className="grid grid-cols-1 gap-4">

                        {/* Discount Field */}
                        <FormField
                            control={form.control}
                            name="discount"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Discount (%)</FormLabel>
                                    <FormControl>
                                        <Input placeholder="Enter discount percentage" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        {/* Start and End Date Fields */}
                        <div className="flex space-x-4">
                            <FormField
                                control={form.control}
                                name="startDate"
                                render={({ field }) => (
                                    <FormItem className="w-full">
                                        <FormLabel>Start Date</FormLabel>
                                        <FormControl>
                                            <Input
                                                type="date"
                                                min={new Date().toISOString().split('T')[0]}
                                                {...field}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />

                            <FormField
                                control={form.control}
                                name="endDate"
                                render={({ field }) => (
                                    <FormItem className="w-full">
                                        <FormLabel>End Date</FormLabel>
                                        <FormControl>
                                            <Input
                                                type="date"
                                                min={form.watch('startDate') || new Date().toISOString().split('T')[0]}
                                                {...field}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </div>

                    </div>

                    <Button
                        type="submit"
                        className="w-full h-11"
                        variant={'theme'}
                    >
                        Save
                    </Button>
                </form>
            </Form>
        </div>
    );
};

export default DiscountForm;