"use client";

import { useEffect, useState } from "react";
import CampaignSheet from "./campaign-sheet";
import { getCampaigns } from "./campaign-api";

export default function CampaignPage() {
    const [open, setOpen] = useState(false);
    const [campaigns, setCampaigns] = useState<any[]>([]);
    const [selected, setSelected] = useState<any>(null);

    const loadData = async () => {
        const res = await getCampaigns();
        setCampaigns(res.data);
    };

    useEffect(() => {
        loadData();
    }, []);

    return (
        <div className="p-4 space-y-4">

            <div className="flex justify-between">
                <h2 className="text-xl font-semibold">Campaigns</h2>

                <button
                    className="bg-black text-white px-4 py-2 rounded"
                    onClick={() => {
                        setSelected(null);
                        setOpen(true);
                    }}
                >
                    Create Campaign
                </button>
            </div>

            {/* Simple Table */}
            <div className="border rounded">
                {campaigns.map((c) => (
                    <div
                        key={c.id}
                        className="flex justify-between p-2 border-b"
                    >
                        <span>{c.name}</span>

                        <button
                            onClick={() => {
                                setSelected(c);
                                setOpen(true);
                            }}
                            className="text-blue-500"
                        >
                            Edit
                        </button>
                    </div>
                ))}
            </div>

            {/* Sheet */}
            <CampaignSheet
                open={open}
                onOpenChange={setOpen}
                campaign={selected}
                refresh={loadData}
            />
        </div>
    );
}