"use client";

import { useState } from "react";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { AdForm } from "./AdForm";
import { toast } from "sonner";
import {
    createCampaignAds,
    updateCampaignAds
} from "@/lib/api/index";

export function AdSheet({ isOpen, onClose, adData, campaignId, onSuccess }: any) {
    const [loading, setLoading] = useState(false);

    const onSubmit = async (values: any) => {
        const formData = new FormData();

        // Append all text fields to FormData
        Object.keys(values).forEach(key => {
            if (values[key] !== null && key !== "file") {
                formData.append(key, values[key]);
            }
        });

      


        // Append file if it exists
        if (values.file) {
            formData.append("media_file", values.file);
        }

        // Explicitly add campaign_id
        // formData.append("campaign_id", String(campaignId));

        try {
            setLoading(true);
            
            if (adData.id) {
                await updateCampaignAds(adData.id, formData);
            } else {
                await createCampaignAds(formData);
            }



            toast.success("Success!");
            onSuccess();
            onClose();
        } catch (error: any) {
            toast.error(error.response?.data?.message || "Upload Failed");
        } finally {
            setLoading(false);
        }
    };

    return (
        <Sheet open={isOpen} onOpenChange={onClose}>
            <SheetContent className="p-4 sm:w-[90%] sm:max-w-[800px] overflow-y-auto">
                <SheetHeader>
                    <SheetTitle>{adData ? "Edit Ad" : "Create Ad"}</SheetTitle>
                </SheetHeader>
                <AdForm initialData={adData} onSubmit={onSubmit} loading={loading} />
            </SheetContent>
        </Sheet>
    );
}