"use client";

import { useEffect, useState } from "react";
import { Campaign, columns } from "./columns";
import { DataTable } from "./data-table";
import axios from "axios";
import { getToken } from '@/lib/auth';
import CampaignSheet from "./campaign-sheet";

import { BreadcrumbStep } from "@/types/common";
import { CustomBreadcrumb } from "@/components/customBreadcrumb";


export default function CampaignsPage() {
  const [data, setData] = useState<Campaign[]>([]);
  const [loading, setLoading] = useState(true);
  const [breadcrumbItems, ] = useState<BreadcrumbStep[]>([
    { label: "Dashboard", link: "/dashboard" },
    { label: "Campaigns List", link: "/ads/campaigns" },
  ]);

  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState(null);


  const fetchData = async () => {
    try {
      const token = getToken();

      const response = await axios.get(`${process.env.NEXT_PUBLIC_API_BASE_URL}/ads/campaigns`, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      setData(response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {


    fetchData();
  }, []);


  return (
    <div className="p-6 w-full">
      <CustomBreadcrumb items={breadcrumbItems} />
      <div className="mb-8 px-4 py-2 bg-secondary flex rounded-md justify-between">
        <h1 className="font-semibold text-xl">Campaigns List</h1>
        <button
          className="bg-primary text-white px-4 py-2 rounded "
          onClick={() => {
            setSelected(null);
            setOpen(true);
          }}
        >
          Create Campaign
        </button>
      </div>
      {loading && <div className="p-6">Loading...</div>}
      {!loading && <DataTable columns={columns} data={data} />}

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