"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import axios from "axios";
import { getToken } from "@/lib/auth";
import { Ad, CampaignResponse } from "@/types/campaign";
import { DataTable } from "./data-table";
import { columns } from "./columns";
import { publisherTemplateColumns } from "./publisherTemplateColumns";
import { PublisherTemplateTable } from "./publisherTemplateTable";
import { BreadcrumbStep } from "@/types/common";
import { CustomBreadcrumb } from "@/components/customBreadcrumb";
import AdHtml from "@/components/AdHtml";

import { AdSheet } from "@/components/ads/AdSheet";
import { Ad } from "@/types/ads";
import { Plus } from "lucide-react";

import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@/components/ui/sheet";

export default function CampaignDetailsPage() {
  const { id } = useParams();
  const [campaign, setCampaign] = useState<CampaignResponse | null>(null);
  const [selectedAd, setSelectedAd] = useState<Ad | null>(null);
  const [isSheetOpen, setIsSheetOpen] = useState(false);
  const [breadcrumbItems, setBreadcrumbItems] = useState<BreadcrumbStep[]>([]);


  // 1. State to control Sheet visibility
  const [isFormSheetOpen, setIsFormSheetOpen] = useState(false);


  // Helper to open sheet for a new ad
  const handleAddNew = () => {
    setSelectedAd(null);
    setIsFormSheetOpen(true);
  };

  // Helper to open sheet for editing an existing ad
  // You will call this from your Table row or Action menu
  const handleEdit = (ad: Ad) => {
    setSelectedAd(ad);
    setIsFormSheetOpen(true);
  };

  const refreshData = () => {
    // Trigger your data fetching logic here (e.g., mutate() if using SWR/React Query)
    console.log("Refreshing ad list...");
  };

  useEffect(() => {
    const fetchCampaign = async () => {
      const token = getToken();
      const res = await axios.get(`${process.env.NEXT_PUBLIC_API_BASE_URL}/ads/campaigns/${id}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      setCampaign(res.data);

      setBreadcrumbItems(
        [
          { label: "Dashboard", link: "/dashboard" },
          { label: "Campaigns List", link: "/ads/campaigns" },
          { label: res.data.name ?? "" },
        ]
      )
    };
    if (id) fetchCampaign();
  }, [id]);

  const handleViewDetails = (ad: Ad) => {
    setSelectedAd(ad);
    setIsSheetOpen(true);
  };
  
  const handleEditDetails = (ad: Ad) => {
    setSelectedAd(ad);
    setIsFormSheetOpen(true);
  };


  if (!campaign) return <div className="p-10 text-center">Loading...</div>;

  return (
    <div className="p-6 space-y-6">
      <CustomBreadcrumb items={breadcrumbItems} />
      <div className="flex justify-between bg-white dark:bg-secondary p-4 rounded-lg shadow-sm border">
        <div className="">
          <h1 className="text-2xl font-bold">{campaign.name}</h1>
          <p className="text-gray-500">Budget: ${campaign.budget} | Total Ads: {campaign.ads?.length || 0} | Status: {campaign.status}</p>
        </div>
        
        <button
          className="bg-primary text-white h-[40px] w-[160px]  p-2 rounded  flex gap-2 text-center align-center"
          onClick={handleAddNew}
        >
          <Plus className="w-4 h-4" />
          Create Ad
        </button>
      </div>

      <DataTable columns={columns(handleViewDetails, handleEditDetails)} data={campaign.ads} />

      {/* 3. The AdSheet Component */}
      <AdSheet
        isOpen={isFormSheetOpen}
        onClose={() => setIsFormSheetOpen(false)}
        adData={selectedAd}
        campaignId={Number(campaign.id)} // Passing the parent ID
        onSuccess={refreshData}
      />

      {/* Details Sheet */}
      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
        <SheetContent className="p-4 w-[600px] sm:w-[90%] sm:max-w-[80vw] overflow-y-auto">
          <SheetHeader>
            <SheetTitle>Ad Details</SheetTitle>
            <SheetDescription>Detailed breakdown and metrics for this ad.</SheetDescription>
          </SheetHeader>

          {selectedAd && (
            <div className="mt-2 space-y-6">
              <div className="rounded-md border p-4 space-y-2 grid grid-cols-2 gap-4">
                <div className="rounded-md border border-1  border-gray-200 p-4">
                  <p className="text-sm font-semibold">Title: <span className="font-normal">{selectedAd.title}</span></p>
                  <p className="text-sm font-semibold">Type: <span className="font-normal capitalize">{selectedAd.type}</span></p>
                  <p className="text-sm font-semibold">Size: <span className="font-normal capitalize">{selectedAd.size}</span></p>
                  <p className="text-sm font-semibold">Click URL: <a href={selectedAd.click_url} target="_blank" className="text-blue-500 underline break-all">{selectedAd.click_url}</a></p>

                  <div className="rounded-md border mt-2 py-5 space-y-2">
                    <h3 className="font-bold mb-3">Event Summary (Duration)</h3>
                    <div className="grid grid-cols-3 gap-4">
                      {selectedAd.event_summary.map((event) => (
                        <div key={event.event_type} className="bg-secondary p-3 rounded-md">
                          <p className="text-xs uppercase text-gray-500 font-bold">{event.event_type}</p>
                          <p className="text-lg font-mono">{event.total_duration}s</p>
                        </div>
                      ))}
                      {selectedAd.event_summary.length === 0 && <p className="text-sm text-gray-400 italic">No events recorded.</p>}
                    </div>
                  </div>



                </div>
                <div className="rounded-md border border-1 border-gray-200 text-center">
                  <p className="text-sm  font-semibold px-4 p-2 mb-2">Ad Preview</p>
                  {/* <div className="overflow-auto  p-4 border border-[#ccc] max-h-[250px]"> */}
                  <div className=" p-4 inline-block ">
                    <AdHtml ad={selectedAd} />
                  </div>
                </div>

              </div>

              {selectedAd.publisher_templates && (
                <div className="rounded-md border p-4 space-y-2">
                  <h3 className="font-bold mb-3">Publisher list</h3>
                  <PublisherTemplateTable columns={publisherTemplateColumns} data={selectedAd.publisher_templates} />
                </div>
              )}

             

            </div>
          )}
        </SheetContent>
      </Sheet>
    </div>
  );
}