"use client";

import React, { useState, useEffect } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { adSchema, AdFormValues, Ad } from "@/types/ads";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { useFieldArray, useForm } from "react-hook-form";
import { Plus, Trash2 } from "lucide-react"; // Icons
import { getPublishers } from "@/lib/api/index";


export function AdForm({ initialData, onSubmit, loading }: { initialData?: Ad | null, onSubmit: (v: any) => void, loading: boolean }) {
    const [uploadMode, setUploadMode] = useState<"url" | "file">("url");

    const form = useForm<AdFormValues>({
        resolver: zodResolver(adSchema),
        defaultValues: initialData ? {
            campaign_id: initialData.campaign_id,
            title: initialData.title,
            type: initialData.type,
            size: initialData.size,
            media_url: initialData.media_url ?? "",
            click_url: initialData.click_url,
            status: initialData.status,

            templates: initialData.publisher_templates?.map((t: any) => ({
                publisher_template_id: t.id,
                placeholder: t.pivot.placeholder,
            })) || [],

            // file is usually not set from initialData (server-side files aren't File objects)
        } : {
            title: "",
            type: "image",
            size: "",
            media_url: "",
            click_url: "",
            status: "active",
            campaign_id: 0,
            templates: [{ publisher_template_id: 0, placeholder: "" }],
        },
    });

    const { fields, append, remove } = useFieldArray({
        control: form.control,
        name: "templates",
      });


    // 1. State to hold the fetched publishers
    const [availableTemplates, setAvailableTemplates] = useState<any[]>([]);
    const [publishers, setPublishers] = useState<any[]>([]);
    const [fetching, setFetching] = useState(true);

    // 2. Fetch data inside useEffect
    useEffect(() => {
        const fetchPublishers = async () => {
            try {
                setFetching(true);
                const response = await getPublishers();

                
                if (response.data){
                    const templateData:any = [];
                    response.data.map(item => {

                        if (item.placeholders && item.placeholders.sebpo_ads) {

                            const placeholders: any = [];

                            item.placeholders.sebpo_ads.map(pItem => {
                                if (pItem.status) {
                                    let pTitle = `${item.name} - ${pItem.placeholder_name} (${pItem.placeholder_size})`;
                                    pTitle = pTitle.replaceAll("_", " ");
                                    if (!placeholders.includes(pTitle)) {
                                        placeholders.push(pTitle)
                                    }
                                }
                            })

                            templateData.push({
                                id: item.id,
                                name: item.name,
                                placeholders: placeholders,
                            })

                        }


                    })

                    setAvailableTemplates(templateData)
                    setPublishers(response.data);
                }

               
            } catch (error) {
                console.error("Failed to fetch publishers", error);
            } finally {
                setFetching(false);
            }
        };

        fetchPublishers();
    }, []);

    // 3. Show a loader or null while waiting for data
    // This prevents the form from crashing while 'publishers' is empty
    if (fetching) {
        return <div className="p-10 text-center text-sm text-muted-foreground">Loading publishers...</div>;
    }


    const adType = form.watch("type");

    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                {/* Basic Fields */}
                <FormField control={form.control} name="title" render={({ field }) => (
                    <FormItem><FormLabel>Title</FormLabel><Input {...field} /></FormItem>
                )} />

                <div className="grid grid-cols-2  gap-4">
                    <div className="">
                        <FormField control={form.control} name="type" render={({ field }) => (
                            <FormItem className="w-full ">
                                <FormLabel>Ad Type</FormLabel>
                                <Select onValueChange={field.onChange} defaultValue={field.value}>
                                    <SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="image">Image (Max 1MB)</SelectItem>
                                        <SelectItem value="video">Video (Max 1GB)</SelectItem>
                                        <SelectItem value="html">HTML Zip (Max 5MB)</SelectItem>
                                    </SelectContent>
                                </Select>
                            </FormItem>
                        )} />
                    </div>
                    <div className="grow " >
                        <FormField control={form.control} name="size" render={({ field }) => (
                            <FormItem><FormLabel>Size</FormLabel><Input placeholder="300x250" {...field} /></FormItem>
                        )} />
                    </div>



                </div>

                <FormField control={form.control} name="click_url" render={({ field }) => (
                    <FormItem><FormLabel>Click URL</FormLabel><Input {...field} /></FormItem>
                )} />


                {/* Media Selection Tabs */}
                <div className="space-y-2">
                    <FormLabel>Media Source</FormLabel>
                    <Tabs defaultValue="url" onValueChange={(v) => setUploadMode(v as any)}>
                        <TabsList className="grid w-full grid-cols-2">
                            <TabsTrigger value="url">URL Link</TabsTrigger>
                            <TabsTrigger value="file">File Upload</TabsTrigger>
                        </TabsList>

                        <TabsContent value="url">
                            <FormField control={form.control} name="media_url" render={({ field }) => (
                                <FormItem>
                                    <FormControl><Input placeholder="https://..." {...field} /></FormControl>
                                    <FormMessage />
                                </FormItem>
                            )} />
                        </TabsContent>

                        <TabsContent value="file">
                            <FormField control={form.control} name="file" render={({ field: { value, onChange, ...fieldProps } }) => (
                                <FormItem>
                                    <FormControl>
                                        <Input
                                            type="file"
                                            accept={adType === "image" ? "image/*" : adType === "video" ? "video/*" : ".zip"}
                                            onChange={(e) => onChange(e.target.files?.[0])}
                                            {...fieldProps}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )} />
                        </TabsContent>
                    </Tabs>
                </div>


                <div className="space-y-4 border-t pt-4">
                    <div className="flex items-center justify-between">
                        <h3 className="text-sm font-medium">Publisher Assignments</h3>
                        <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => append({ publisher_template_id: 0, placeholder: "" })}
                        >
                            <Plus className="w-4 h-4 mr-1" /> Add Publisher
                        </Button>
                    </div>

                    {fields.map((field, index) => (
                        <div key={field.id} className="flex gap-3 items-end border p-3 rounded-md bg-slate-50/50 dark:bg-secondary">
                            {/* Publisher Selection */}
                            <FormField
                                control={form.control}
                                name={`templates.${index}.publisher_template_id`}
                                render={({ field }) => (
                                    <FormItem className="flex-1">
                                        <FormLabel className={index !== 0 ? "sr-only" : ""}>Publisher</FormLabel>
                                        <Select onValueChange={field.onChange} value={field.value.toString()}>
                                            <FormControl>
                                                <SelectTrigger className="w-full">
                                                    <SelectValue placeholder="Select Publisher" />
                                                </SelectTrigger>
                                            </FormControl>
                                            <SelectContent>
                                                {availableTemplates.map((t) => (
                                                    <SelectItem className="capitalize" key={t.id} value={t.id.toString()}>{t.name}</SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </FormItem>
                                )}
                            />

                            {/* Placeholder Selection */}
                            <FormField
                                control={form.control}
                                name={`templates.${index}.placeholder`}
                                render={({ field }) => (
                                    <FormItem className="flex-1">
                                        <FormLabel className={index !== 0 ? "sr-only" : ""}>Placeholder</FormLabel>
                                        <Select onValueChange={field.onChange} value={field.value}>
                                            <FormControl>
                                                <SelectTrigger className="w-full">
                                                    <SelectValue placeholder="Select Slot" />
                                                </SelectTrigger>
                                            </FormControl>
                                            <SelectContent>
                                                {/* Logic: Filter placeholders based on selected publisher */}
                                                {availableTemplates
                                                    .find(t => t.id.toString() === form.watch(`templates.${index}.publisher_template_id`)?.toString())
                                                    ?.placeholders.map((p,i) => (
                                                        <SelectItem className="capitalize" key={p+`--`+i} value={p}>{p}</SelectItem>
                                                    )) || <SelectItem value="none" disabled>Select Publisher first</SelectItem>
                                                }
                                            </SelectContent>
                                        </Select>
                                    </FormItem>
                                )}
                            />

                            <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="text-destructive"
                                onClick={() => remove(index)}
                                disabled={fields.length === 1}
                            >
                                <Trash2 className="w-4 h-4" />
                            </Button>
                        </div>
                    ))}
                </div>



                <Button type="submit" disabled={loading} className="w-full">
                    {initialData ? "Save Changes" : "Create Advertisement"}
                </Button>
            </form>
        </Form>
    );
}