"use client";

import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils";

import { campaignSchema, CampaignFormValues } from "./campaign-schema";
import {
    createCampaign,
    updateCampaign,
    getCompanies,
} from "@/lib/api/index";

import {
    Form,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
    FormControl,
} from "@/components/ui/form";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
    Select,
    SelectItem,
    SelectContent,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";

type Props = {
    defaultValues?: any; // Using any here to handle incoming date strings from API
    campaignId?: string;
    onSuccess?: () => void;
};

export default function CampaignForm({
    defaultValues,
    campaignId,
    onSuccess,
}: Props) {
    const [companies, setCompanies] = useState<any[]>([]);

    const form = useForm<CampaignFormValues>({
        resolver: zodResolver(campaignSchema),
        defaultValues: {
            name: defaultValues?.name || "",
            budget: defaultValues?.budget || 0,
            daily_budget: defaultValues?.daily_budget || 0,
            status: defaultValues?.status || "draft",
            company_id: defaultValues?.company_id || "",
            // Reconstruct date_range object from start_date/end_date strings if editing
            date_range: {
                from: defaultValues?.start_date ? new Date(defaultValues.start_date) : new Date(),
                to: defaultValues?.end_date ? new Date(defaultValues.end_date) : undefined,
            },
        },
    });

    useEffect(() => {
        getCompanies().then((res) => setCompanies(res.data));
    }, []);

    // const companyId = form.watch("company_id");

    // useEffect(() => {
    //     if (companyId) {
    //         setUsers(companies.find(c => String(c.id) === companyId)?.users || []);
    //     }
    // }, [companyId, companies]);

    const onSubmit = async (values: CampaignFormValues) => {
        try {

            // Flatten the date_range into the format Laravel expects
            const payload = {
                ...values,
                start_date: format(values.date_range.from, "yyyy-MM-dd"),
                end_date: values.date_range.to ? format(values.date_range.to, "yyyy-MM-dd") : null,
            };
            
            // @ts-ignore: Removing UI-only field before API call
            delete payload.date_range;

            if (campaignId) {
                await updateCampaign(campaignId, payload);
            } else {
                await createCampaign(payload);
            }

            onSuccess?.();
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                
               

                {/* Company & Users Selection (Existing Logic) */}
                <FormField
                    
                    control={form.control}
                    name="company_id"
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Company</FormLabel>
                            <Select
                                onValueChange={field.onChange}
                                value={String(field.value)}
                            >
                                <FormControl>
                                    <SelectTrigger>
                                        <SelectValue placeholder="Select company" />
                                    </SelectTrigger>
                                </FormControl>
                                <SelectContent>
                                    {companies.map((c) => (
                                        <SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                            <FormMessage />
                        </FormItem>
                    )}
                />

                <FormField
                    control={form.control}
                    name="name"
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Campaign Name</FormLabel>
                            <FormControl><Input placeholder="Internal Promo" {...field} /></FormControl>
                        </FormItem>
                    )}
                />

                {/* Date Range Picker */}
                <FormField
                    control={form.control}
                    name="date_range"
                    render={({ field }) => (
                        <FormItem className="flex flex-col">
                            <FormLabel>Campaign Duration</FormLabel>
                            <Popover>
                                <PopoverTrigger asChild>
                                    <FormControl>
                                        <Button
                                            variant={"secondary"}
                                            className={cn(
                                                "w-full pl-3 text-left font-normal",
                                                !field.value && "text-muted-foreground"
                                            )}
                                        >
                                            <CalendarIcon className="mr-2 h-4 w-4 opacity-50" />
                                            {field.value?.from ? (
                                                field.value.to ? (
                                                    <>
                                                        {format(field.value.from, "LLL dd, y")} -{" "}
                                                        {format(field.value.to, "LLL dd, y")}
                                                    </>
                                                ) : (
                                                    format(field.value.from, "LLL dd, y")
                                                )
                                            ) : (
                                                <span>Pick a date range</span>
                                            )}
                                        </Button>
                                    </FormControl>
                                </PopoverTrigger>
                                <PopoverContent className="w-auto p-0" align="start">
                                    <Calendar
                                        initialFocus
                                        mode="range"
                                        defaultMonth={field.value?.from}
                                        selected={field.value}
                                        onSelect={field.onChange}
                                        numberOfMonths={2}
                                    />
                                </PopoverContent>
                            </Popover>
                            <FormMessage />
                        </FormItem>
                    )}
                />


                <div className="grid sm:grid-cols-1 lg:grid-cols-3 gap-4">
                    <FormField
                        control={form.control}
                        name="budget"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Budget</FormLabel>
                                <FormControl><Input type="number" {...field} /></FormControl>
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="daily_budget"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Daily Budget</FormLabel>
                                <FormControl><Input type="number" {...field} /></FormControl>
                            </FormItem>
                        )}
                    />

<FormField
                        control={form.control}
                        name="status"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Status</FormLabel>
                                <Select onValueChange={field.onChange} value={field.value}>
                                    <FormControl>
                                        <SelectTrigger><SelectValue /></SelectTrigger>
                                    </FormControl>
                                    <SelectContent>
                                        <SelectItem value="active">Active</SelectItem>
                                        <SelectItem value="paused">Paused</SelectItem>
                                        <SelectItem value="draft">Draft</SelectItem>
                                    </SelectContent>
                                </Select>
                            </FormItem>
                        )}
                    />
                </div>

              
              

                <Button type="submit" className="w-full">
                    {campaignId ? "Update" : "Create"} Campaign
                </Button>
            </form>
        </Form>
    );
}