import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "../lib/apiClient";
import { 
  Users, 
  Search, 
  Plus, 
  ShieldAlert, 
  Trash2, 
  Mail, 
  Building, 
  Globe, 
  MapPin, 
  Linkedin, 
  Phone, 
  Filter, 
  Clock, 
  CheckCircle2, 
  Ban,
  ArrowUpRight
} from "lucide-react";
import { useState } from "react";
import StatusBadge from "../components/StatusBadge";
import FormDrawer from "../components/FormDrawer";
import CsvExportButton from "../components/CsvExportButton";
import ConfirmModal from "../components/ConfirmModal";
import toast from "react-hot-toast";

const STATUSES = [
  "ALL",
  "INTERESTED",
  "MEETING_BOOKED",
  "MEETING_DONE",
  "REPLIED",
  "NOT_INTERESTED",
  "UNSUBSCRIBED",
  "BOUNCED",
  "DO_NOT_CONTACT"
];

export default function Leads() {
  const queryClient = useQueryClient();
  const [activeTab, setActiveTab] = useState<"leads" | "blocklist">("leads");
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedStatus, setSelectedStatus] = useState("ALL");
  const [selectedLead, setSelectedLead] = useState<any | null>(null);
  const [isAddLeadOpen, setIsAddLeadOpen] = useState(false);
  const [isAddBlocklistOpen, setIsAddBlocklistOpen] = useState(false);
  const [blocklistType, setBlocklistType] = useState<"email" | "domain">("email");

  const { data: leads = [], isLoading } = useQuery({
    queryKey: ["leads-search", searchQuery, selectedStatus],
    queryFn: async () => {
      const res = await apiClient.get("/leads/search", {
        params: { q: searchQuery, status: selectedStatus },
      });
      return res.data;
    },
  });

  const { data: emailBlockList = [], refetch: refetchEmailBlockList } = useQuery({
    queryKey: ["blocklist-emails"],
    queryFn: async () => {
      const res = await apiClient.get("/leads/block-list");
      return res.data;
    },
  });

  const { data: domainBlockList = [], refetch: refetchDomainBlockList } = useQuery({
    queryKey: ["blocklist-domains"],
    queryFn: async () => {
      const res = await apiClient.get("/leads/domain-block-list");
      return res.data;
    },
  });

  const updateLeadStatusMutation = useMutation({
    mutationFn: async ({ campaignId, leadId, status }: { campaignId: string; leadId: string; status: string }) => {
      const res = await apiClient.post(`/campaigns/${campaignId}/leads/status`, { lead_id: leadId, status });
      return res.data;
    },
    onSuccess: () => {
      toast.success("Lead status updated");
      queryClient.invalidateQueries({ queryKey: ["leads-search"] });
    },
  });

  const deleteLeadMutation = useMutation({
    mutationFn: async ({ campaignId, leadId }: { campaignId: string; leadId: string }) => {
      const res = await apiClient.delete(`/campaigns/${campaignId}/leads/${leadId}`);
      return res.data;
    },
    onSuccess: () => {
      toast.success("Lead removed");
      setSelectedLead(null);
      queryClient.invalidateQueries({ queryKey: ["leads-search"] });
    },
  });

  return (
    <div className="p-6 max-w-7xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-zinc-100 flex items-center gap-2.5">
            <Users className="w-6 h-6 text-teal-400" />
            Lead Intelligence Database
          </h1>
          <p className="text-zinc-400 text-sm mt-1">
            Global repository of targeted prospects, responses, and suppression blocklists.
          </p>
        </div>

        <div className="flex items-center gap-3">
          <button
            onClick={() => setIsAddLeadOpen(true)}
            className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-all shadow-md shadow-indigo-600/20 flex items-center gap-2"
          >
            <Plus className="w-4 h-4" /> Add Prospect
          </button>
        </div>
      </div>

      {/* Main Tabs */}
      <div className="border-b border-zinc-800 flex items-center gap-2 text-sm font-medium">
        <button
          onClick={() => setActiveTab("leads")}
          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
            activeTab === "leads"
              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
              : "border-transparent text-zinc-400 hover:text-zinc-200"
          }`}
        >
          <Users className="w-4 h-4" /> Global Leads ({leads.length})
        </button>
        <button
          onClick={() => setActiveTab("blocklist")}
          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
            activeTab === "blocklist"
              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
              : "border-transparent text-zinc-400 hover:text-zinc-200"
          }`}
        >
          <ShieldAlert className="w-4 h-4" /> Suppression Blocklists
        </button>
      </div>

      {activeTab === "leads" && (
        <div className="space-y-4">
          {/* Filter Bar */}
          <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl p-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)]">
            <div className="relative flex-1 max-w-md">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" />
              <input
                type="text"
                placeholder="Search by name, email, or company..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full bg-black/40 border border-white/5 rounded-lg py-2 pl-9 pr-4 text-xs text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:border-indigo-500 shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)] transition-all"
              />
            </div>

            <div className="flex items-center gap-3">
              <select
                value={selectedStatus}
                onChange={(e) => setSelectedStatus(e.target.value)}
                className="bg-black/40 border border-white/5 rounded-lg py-2 px-3 text-xs text-zinc-300 focus:outline-none focus:border-indigo-500 shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)] transition-all"
              >
                {STATUSES.map((st) => (
                  <option key={st} value={st} className="bg-zinc-900">
                    Status: {st.replace(/_/g, " ")}
                  </option>
                ))}
              </select>
              <CsvExportButton data={leads} filename="smartlead-global-leads.csv" />
            </div>
          </div>

          {/* Leads Table */}
          <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl overflow-hidden shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)]">
            <div className="overflow-x-auto">
              <table className="w-full text-sm text-left">
                <thead className="bg-black/20 border-b border-white/5 text-zinc-400 text-xs uppercase font-sans tracking-wider">
                  <tr>
                    <th className="px-6 py-3.5 font-semibold">Prospect</th>
                    <th className="px-6 py-3.5 font-semibold">Company</th>
                    <th className="px-6 py-3.5 font-semibold">Status</th>
                    <th className="px-6 py-3.5 font-semibold">Engagement</th>
                    <th className="px-6 py-3.5 font-semibold">Location</th>
                    <th className="px-6 py-3.5 font-semibold text-right">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/5">
                  {leads.map((lead: any) => (
                    <tr
                      key={lead.id}
                      onClick={() => setSelectedLead(lead)}
                      className="hover:bg-white/5 transition-colors cursor-pointer"
                    >
                      <td className="px-6 py-4">
                        <div className="font-semibold text-zinc-100 flex items-center gap-2">
                          {lead.first_name} {lead.last_name}
                        </div>
                        <div className="text-xs text-zinc-400 font-mono flex items-center gap-1 mt-0.5">
                          <Mail className="w-3 h-3 text-zinc-500" /> {lead.email}
                        </div>
                      </td>
                      <td className="px-6 py-4 text-zinc-300">
                        <div className="font-medium text-zinc-200">{lead.company_name}</div>
                        {lead.website && (
                          <div className="text-[11px] text-zinc-500 font-mono truncate max-w-[150px]">
                            {lead.website.replace("https://", "")}
                          </div>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        <StatusBadge status={lead.status} size="sm" />
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-xs text-zinc-300 font-mono">
                          <span className="text-emerald-400 drop-shadow-[0_0_8px_rgba(63,156,132,0.3)]">{lead.open_count || 0}</span> opens •{" "}
                          <span className="text-indigo-400 drop-shadow-[0_0_8px_rgba(37,125,104,0.3)]">{lead.click_count || 0}</span> clicks
                        </div>
                      </td>
                      <td className="px-6 py-4 text-xs text-zinc-400 font-sans">
                        {lead.location || "United States"}
                      </td>
                      <td className="px-6 py-4 text-right">
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            setSelectedLead(lead);
                          }}
                          className="px-3 py-1.5 bg-white/5 hover:bg-white/10 text-zinc-300 text-xs font-medium rounded-lg border border-white/5 transition-all shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]"
                        >
                          View Profile
                        </button>
                      </td>
                    </tr>
                  ))}

                  {leads.length === 0 && !isLoading && (
                    <tr>
                      <td colSpan={6} className="py-16 text-center text-xs text-zinc-500">
                        No prospect leads matching current filters.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {/* SUB-TAB: BLOCKLIST MANAGER */}
      {activeTab === "blocklist" && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Email Blocklist */}
          <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl p-5 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)] space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-sm font-semibold text-zinc-100 flex items-center gap-2">
                  <Mail className="w-4 h-4 text-rose-400 drop-shadow-[0_0_8px_rgba(203,117,80,0.5)]" />
                  Email Address Blocklist
                </h3>
                <p className="text-xs text-zinc-400 mt-0.5">Suppressed emails never receive outreach.</p>
              </div>
              <button
                onClick={() => {
                  setBlocklistType("email");
                  setIsAddBlocklistOpen(true);
                }}
                className="px-2.5 py-1.5 bg-white/5 hover:bg-white/10 text-zinc-200 text-xs font-medium rounded-md border border-white/5 transition-all shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]"
              >
                + Add Email
              </button>
            </div>

            <div className="space-y-2">
              {emailBlockList.map((item: any) => (
                <div
                  key={item.id}
                  className="flex items-center justify-between p-3 bg-black/40 border border-white/5 rounded-lg text-xs hover:bg-white/5 transition-colors"
                >
                  <div>
                    <span className="font-mono text-zinc-200 font-medium">{item.email}</span>
                    <div className="text-[10px] text-zinc-500 font-sans mt-0.5">{item.reason}</div>
                  </div>
                  <button
                    onClick={async () => {
                      await apiClient.delete(`/leads/block-list/${item.id}`);
                      toast.success("Removed from blocklist");
                      refetchEmailBlockList();
                    }}
                    className="text-zinc-500 hover:text-rose-400 p-1.5 rounded-md hover:bg-rose-500/10 transition-colors"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
              ))}
            </div>
          </div>

          {/* Domain Blocklist */}
          <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl p-5 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)] space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-sm font-semibold text-zinc-100 flex items-center gap-2">
                  <Globe className="w-4 h-4 text-amber-400 drop-shadow-[0_0_8px_rgba(194,160,74,0.5)]" />
                  Domain Suppression List
                </h3>
                <p className="text-xs text-zinc-400 mt-0.5">Blocks all emails under specified root domains.</p>
              </div>
              <button
                onClick={() => {
                  setBlocklistType("domain");
                  setIsAddBlocklistOpen(true);
                }}
                className="px-2.5 py-1.5 bg-white/5 hover:bg-white/10 text-zinc-200 text-xs font-medium rounded-md border border-white/5 transition-all shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]"
              >
                + Add Domain
              </button>
            </div>

            <div className="space-y-2">
              {domainBlockList.map((item: any) => (
                <div
                  key={item.id}
                  className="flex items-center justify-between p-3 bg-black/40 border border-white/5 rounded-lg text-xs hover:bg-white/5 transition-colors"
                >
                  <div>
                    <span className="font-mono text-zinc-200 font-medium">@{item.domain}</span>
                    <div className="text-[10px] text-zinc-500 font-sans mt-0.5">{item.reason}</div>
                  </div>
                  <button
                    onClick={async () => {
                      await apiClient.delete(`/leads/domain-block-list/${item.id}`);
                      toast.success("Domain removed from blocklist");
                      refetchDomainBlockList();
                    }}
                    className="text-zinc-500 hover:text-rose-400 p-1.5 rounded-md hover:bg-rose-500/10 transition-colors"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Lead Detail Slide-Over Drawer */}
      <FormDrawer
        isOpen={Boolean(selectedLead)}
        onClose={() => setSelectedLead(null)}
        title="Prospect Dossier"
        subtitle={selectedLead ? `${selectedLead.first_name} ${selectedLead.last_name} (${selectedLead.email})` : ""}
      >
        {selectedLead && (
          <div className="space-y-6 text-xs">
            {/* Status Change Card */}
            <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4">
              <label className="block font-medium text-zinc-400 mb-2">Lead Outreach Status</label>
              <select
                value={selectedLead.status}
                onChange={(e) => {
                  updateLeadStatusMutation.mutate({
                    campaignId: selectedLead.campaign_id,
                    leadId: selectedLead.id,
                    status: e.target.value,
                  });
                  setSelectedLead({ ...selectedLead, status: e.target.value });
                }}
                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2 text-zinc-100 font-medium"
              >
                {STATUSES.filter((s) => s !== "ALL").map((st) => (
                  <option key={st} value={st}>
                    {st.replace(/_/g, " ")}
                  </option>
                ))}
              </select>
            </div>

            {/* Profile Fields */}
            <div className="space-y-3 bg-zinc-900/60 border border-zinc-800 rounded-xl p-4">
              <h4 className="font-semibold text-zinc-300 uppercase tracking-wider text-[10px]">Contact Info</h4>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <span className="text-zinc-500 block">Company</span>
                  <span className="text-zinc-200 font-medium">{selectedLead.company_name}</span>
                </div>
                <div>
                  <span className="text-zinc-500 block">Location</span>
                  <span className="text-zinc-200 font-medium">{selectedLead.location || "N/A"}</span>
                </div>
                <div>
                  <span className="text-zinc-500 block">Phone</span>
                  <span className="text-zinc-200 font-medium">{selectedLead.phone_number || "N/A"}</span>
                </div>
                <div>
                  <span className="text-zinc-500 block">LinkedIn</span>
                  {selectedLead.linkedin_profile ? (
                    <a
                      href={selectedLead.linkedin_profile}
                      target="_blank"
                      rel="noreferrer"
                      className="text-indigo-400 hover:underline"
                    >
                      View LinkedIn Profile
                    </a>
                  ) : (
                    <span className="text-zinc-500">Not provided</span>
                  )}
                </div>
              </div>
            </div>

            {/* Custom Fields */}
            {selectedLead.custom_fields && Object.keys(selectedLead.custom_fields).length > 0 && (
              <div className="space-y-2 bg-zinc-900/60 border border-zinc-800 rounded-xl p-4">
                <h4 className="font-semibold text-zinc-300 uppercase tracking-wider text-[10px]">Custom Attributes</h4>
                <div className="grid grid-cols-2 gap-2 font-mono text-[11px]">
                  {Object.entries(selectedLead.custom_fields).map(([key, val]) => (
                    <div key={key} className="bg-zinc-950 p-2 rounded border border-zinc-800">
                      <span className="text-zinc-500 block text-[10px]">{key}</span>
                      <span className="text-zinc-200 font-semibold">{String(val)}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Timeline */}
            <div className="space-y-3 bg-zinc-900/60 border border-zinc-800 rounded-xl p-4">
              <h4 className="font-semibold text-zinc-300 uppercase tracking-wider text-[10px]">Activity Timeline</h4>
              <div className="space-y-3">
                <div className="flex items-start gap-2.5">
                  <div className="w-2 h-2 rounded-full bg-emerald-400 mt-1" />
                  <div>
                    <span className="text-zinc-300 font-medium">Email Delivered & Opened</span>
                    <div className="text-[10px] text-zinc-500">2 hours ago</div>
                  </div>
                </div>
                <div className="flex items-start gap-2.5">
                  <div className="w-2 h-2 rounded-full bg-indigo-400 mt-1" />
                  <div>
                    <span className="text-zinc-300 font-medium">Enrolled in Enterprise SaaS Sequence</span>
                    <div className="text-[10px] text-zinc-500">3 days ago</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Delete Lead Button */}
            <div className="pt-2 flex justify-end">
              <button
                onClick={() => {
                  deleteLeadMutation.mutate({
                    campaignId: selectedLead.campaign_id,
                    leadId: selectedLead.id,
                  });
                }}
                className="px-3 py-1.5 bg-rose-600/20 hover:bg-rose-600 text-rose-300 hover:text-white rounded-lg text-xs font-medium transition-colors flex items-center gap-1.5"
              >
                <Trash2 className="w-3.5 h-3.5" /> Remove Lead
              </button>
            </div>
          </div>
        )}
      </FormDrawer>

      {/* Add Lead Slide-Over */}
      <FormDrawer
        isOpen={isAddLeadOpen}
        onClose={() => setIsAddLeadOpen(false)}
        title="Add Global Prospect Lead"
        subtitle="Input contact info, company details, and custom variables for personalization."
      >
        <form
          onSubmit={async (e) => {
            e.preventDefault();
            const form = e.target as HTMLFormElement;
            const newLead = {
              first_name: (form.elements.namedItem("first_name") as HTMLInputElement).value,
              last_name: (form.elements.namedItem("last_name") as HTMLInputElement).value,
              email: (form.elements.namedItem("email") as HTMLInputElement).value,
              phone_number: (form.elements.namedItem("phone_number") as HTMLInputElement).value,
              company_name: (form.elements.namedItem("company_name") as HTMLInputElement).value,
              website: (form.elements.namedItem("website") as HTMLInputElement).value,
              location: (form.elements.namedItem("location") as HTMLInputElement).value,
              linkedin_profile: (form.elements.namedItem("linkedin_profile") as HTMLInputElement).value,
              status: "INTERESTED",
            };

            try {
              await apiClient.post("/campaigns/camp_9901/leads", newLead);
              toast.success("Prospect added to database");
              setIsAddLeadOpen(false);
              queryClient.invalidateQueries({ queryKey: ["leads-search"] });
            } catch (err: any) {
              toast.error("Failed to add prospect");
            }
          }}
          className="space-y-3.5 text-xs"
        >
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block font-medium text-zinc-300 mb-1">First Name *</label>
              <input name="first_name" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
            </div>
            <div>
              <label className="block font-medium text-zinc-300 mb-1">Last Name</label>
              <input name="last_name" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
            </div>
          </div>
          <div>
            <label className="block font-medium text-zinc-300 mb-1">Email Address *</label>
            <input type="email" name="email" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block font-medium text-zinc-300 mb-1">Company Name</label>
              <input name="company_name" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
            </div>
            <div>
              <label className="block font-medium text-zinc-300 mb-1">Phone Number</label>
              <input name="phone_number" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
            </div>
          </div>
          <div>
            <label className="block font-medium text-zinc-300 mb-1">Website URL</label>
            <input name="website" placeholder="https://" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block font-medium text-zinc-300 mb-1">Location</label>
              <input name="location" placeholder="e.g. San Francisco, CA" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
            </div>
            <div>
              <label className="block font-medium text-zinc-300 mb-1">LinkedIn URL</label>
              <input name="linkedin_profile" placeholder="https://linkedin.com/in/..." className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
            </div>
          </div>

          <div className="pt-4 flex justify-end gap-2">
            <button
              type="button"
              onClick={() => setIsAddLeadOpen(false)}
              className="px-3 py-2 bg-zinc-800 text-zinc-300 rounded-lg"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium shadow"
            >
              Save Prospect
            </button>
          </div>
        </form>
      </FormDrawer>

      {/* Add Blocklist Modal */}
      <FormDrawer
        isOpen={isAddBlocklistOpen}
        onClose={() => setIsAddBlocklistOpen(false)}
        title={blocklistType === "email" ? "Add Email to Suppression Blocklist" : "Add Domain to Suppression Blocklist"}
        subtitle="Blocked records will never receive any emails from any campaign."
      >
        <form
          onSubmit={async (e) => {
            e.preventDefault();
            const form = e.target as HTMLFormElement;
            const val = (form.elements.namedItem("val") as HTMLInputElement).value;
            const reason = (form.elements.namedItem("reason") as HTMLInputElement).value;

            try {
              if (blocklistType === "email") {
                await apiClient.post("/leads/block-list", { email: val, reason });
                refetchEmailBlockList();
              } else {
                await apiClient.post("/leads/domain-block-list", { domain: val, reason });
                refetchDomainBlockList();
              }
              toast.success("Suppression entry saved");
              setIsAddBlocklistOpen(false);
            } catch (err: any) {
              toast.error("Failed to add entry");
            }
          }}
          className="space-y-4 text-xs"
        >
          <div>
            <label className="block font-medium text-zinc-300 mb-1">
              {blocklistType === "email" ? "Email Address" : "Domain (e.g. competitor.com)"}
            </label>
            <input name="val" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100" />
          </div>
          <div>
            <label className="block font-medium text-zinc-300 mb-1">Reason for Suppression</label>
            <input name="reason" placeholder="e.g. Legal opt-out, Competitor" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100" />
          </div>
          <div className="pt-4 flex justify-end gap-2">
            <button
              type="button"
              onClick={() => setIsAddBlocklistOpen(false)}
              className="px-3 py-2 bg-zinc-800 text-zinc-300 rounded-lg"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-rose-600 text-white rounded-lg font-medium"
            >
              Block Record
            </button>
          </div>
        </form>
      </FormDrawer>
    </div>
  );
}