"use client"

import * as React from "react"
import {
  Plus, Pencil, Trash2, RefreshCw,
  Search, Database, Layers, Globe, Settings2, GitBranch, Calendar, Tag
} from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog"
import { DeleteDialog } from "@/components/ui/delete-dialog"
import { toast } from "sonner"
import { cn } from "@/lib/utils"
import { format, formatDistanceToNow } from "date-fns"
import {
  type DealMetaItem,
  useGetLeadStatusesQuery, useCreateLeadStatusMutation, useUpdateLeadStatusMutation, useDeleteLeadStatusMutation,
  useGetLeadChannelsQuery, useCreateLeadChannelMutation, useUpdateLeadChannelMutation, useDeleteLeadChannelMutation,
  useGetBrandsQuery, useCreateBrandMutation, useUpdateBrandMutation, useDeleteBrandMutation,
  useGetRegionsQuery, useCreateRegionMutation, useUpdateRegionMutation, useDeleteRegionMutation,
  useGetServicesQuery, useCreateServiceMutation, useUpdateServiceMutation, useDeleteServiceMutation,
  useGetProjectTypesQuery, useCreateProjectTypeMutation, useUpdateProjectTypeMutation, useDeleteProjectTypeMutation,
  useGetTimelineIntentsQuery, useCreateTimelineIntentMutation, useUpdateTimelineIntentMutation, useDeleteTimelineIntentMutation,
  useGetClosedLeadTagsQuery, useCreateClosedLeadTagMutation, useUpdateClosedLeadTagMutation, useDeleteClosedLeadTagMutation,
  type ClosedLeadTagItem,
} from "@/api/rtk/deal-meta-api"
import { Card, CardHeader } from "@/components/settings/ui"
import { Can } from "@/components/providers/ability-provider"
import { DivisionsManager } from "@/components/divisions/divisions-manager"
import { useSession } from "next-auth/react"
import { useGetProfileQuery } from "@/api/rtk/auth-api"
import { useAuthToken } from "@/hooks/use-auth-token"
import { hasPermission } from "@/lib/permissions"

type MetaType =
  | "lead-statuses"
  | "lead-channels"
  | "regions"
  | "services"
  | "project-types"
  | "brands"
  | "timeline-intents"
  | "divisions"
  | "closed-lost-tags"

type MetaQueryHook = typeof useGetLeadStatusesQuery
type MetaCreateHook = typeof useCreateLeadStatusMutation
type MetaUpdateHook = typeof useUpdateLeadStatusMutation
type MetaDeleteHook = typeof useDeleteLeadStatusMutation

interface MetaConfig {
  label: string
  icon: React.ReactNode
  queryHook: MetaQueryHook
  createHook: MetaCreateHook
  updateHook: MetaUpdateHook
  deleteHook: MetaDeleteHook
}

function getErrorMessage(error: unknown, fallback: string) {
  if (
    typeof error === "object" &&
    error !== null &&
    "data" in error &&
    typeof error.data === "object" &&
    error.data !== null &&
    "message" in error.data &&
    typeof error.data.message === "string"
  ) {
    return error.data.message
  }

  if (error instanceof Error && error.message) {
    return error.message
  }

  return fallback
}

export function LeadsMetaTab() {
  const [activeType, setActiveType] = React.useState<MetaType>("lead-statuses")
  const { token } = useAuthToken()
  const { data: session } = useSession()
  const { data: profile } = useGetProfileQuery(undefined, { skip: !token })
  const permissionSource =
    (session as { backendUser?: unknown } | null)?.backendUser ?? profile ?? null
  const canViewDivisions = hasPermission(permissionSource, "READ", "DIVISION")

  const configs: Record<MetaType, MetaConfig> = {
    "lead-statuses": {
      label: "Lead Statuses",
      icon: <Database size={16} />,
      queryHook: useGetLeadStatusesQuery,
      createHook: useCreateLeadStatusMutation,
      updateHook: useUpdateLeadStatusMutation,
      deleteHook: useDeleteLeadStatusMutation
    },
    "lead-channels": {
      label: "Lead Channels",
      icon: <Settings2 size={16} />,
      queryHook: useGetLeadChannelsQuery,
      createHook: useCreateLeadChannelMutation,
      updateHook: useUpdateLeadChannelMutation,
      deleteHook: useDeleteLeadChannelMutation
    },
    "regions": {
      label: "Regions",
      icon: <Globe size={16} />,
      queryHook: useGetRegionsQuery,
      createHook: useCreateRegionMutation,
      updateHook: useUpdateRegionMutation,
      deleteHook: useDeleteRegionMutation
    },
    "services": {
      label: "Services",
      icon: <Settings2 size={16} />,
      queryHook: useGetServicesQuery,
      createHook: useCreateServiceMutation,
      updateHook: useUpdateServiceMutation,
      deleteHook: useDeleteServiceMutation
    },
    "project-types": {
      label: "Deal Types",
      icon: <GitBranch size={16} />,
      queryHook: useGetProjectTypesQuery,
      createHook: useCreateProjectTypeMutation,
      updateHook: useUpdateProjectTypeMutation,
      deleteHook: useDeleteProjectTypeMutation
    },
    "brands": {
      label: "Brands",
      icon: <Layers size={16} />,
      queryHook: useGetBrandsQuery,
      createHook: useCreateBrandMutation,
      updateHook: useUpdateBrandMutation,
      deleteHook: useDeleteBrandMutation
    },
    "timeline-intents": {
      label: "Timeline Intent",
      icon: <Calendar size={16} />,
      queryHook: useGetTimelineIntentsQuery,
      createHook: useCreateTimelineIntentMutation,
      updateHook: useUpdateTimelineIntentMutation,
      deleteHook: useDeleteTimelineIntentMutation
    }
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-[240px_1fr] gap-6">
      <div className="space-y-1">
        {Object.entries(configs).map(([key, config]) => (
          <button
            key={key}
            onClick={() => setActiveType(key as MetaType)}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-[13px] font-semibold transition-all ${activeType === key
              ? "bg-[#6C63FF] text-white shadow-lg shadow-[#6C63FF]/20"
              : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"
              }`}
          >
            {config.icon}
            {config.label}
          </button>
        ))}
        {canViewDivisions ? (
          <button
            onClick={() => setActiveType("divisions")}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-[13px] font-semibold transition-all ${activeType === "divisions"
              ? "bg-[#6C63FF] text-white shadow-lg shadow-[#6C63FF]/20"
              : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"
              }`}
          >
            <Layers size={16} />
            Divisions
          </button>
        ) : null}
        <button
          onClick={() => setActiveType("closed-lost-tags")}
          className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-[13px] font-semibold transition-all ${activeType === "closed-lost-tags"
            ? "bg-[#6C63FF] text-white shadow-lg shadow-[#6C63FF]/20"
            : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"
            }`}
        >
          <Tag size={16} />
          Closed Lost Tags
        </button>
      </div>

      <div className="min-w-0">
        {activeType === "closed-lost-tags" ? (
          <ClosedLostTagsManager />
        ) : activeType === "divisions" ? (
          <DivisionsManager />
        ) : (
          <MetaItemManager key={activeType} config={configs[activeType]} />
        )}
      </div>
    </div>
  )
}

function MetaItemManager({ config }: { config: MetaConfig }) {
  const { data: items = [], isLoading, isFetching, error } = config.queryHook()
  const [createItem, { isLoading: creating }] = config.createHook()
  const [updateItem, { isLoading: updating }] = config.updateHook()
  const [deleteItem, { isLoading: deleting }] = config.deleteHook()

  const [isFormOpen, setIsFormOpen] = React.useState(false)
  const [formMode, setFormMode] = React.useState<"create" | "edit">("create")
  const [formState, setFormState] = React.useState({ id: "", name: "" })

  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false)
  const [itemToDelete, setItemToDelete] = React.useState<DealMetaItem | null>(null)
  const [search, setSearch] = React.useState("")

  const filteredItems = React.useMemo(() => {
    return [...items]
      .filter((item) => item.name.toLowerCase().includes(search.toLowerCase()))
      .sort((a, b) => {
        const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0
        const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0
        return dateB - dateA
      })
  }, [items, search])

  const openCreate = () => {
    setFormMode("create")
    setFormState({ id: "", name: "" })
    setIsFormOpen(true)
  }

  const openEdit = (item: DealMetaItem) => {
    setFormMode("edit")
    setFormState({ id: item.id, name: item.name })
    setIsFormOpen(true)
  }

  const handleFormSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const name = formState.name.trim()
    if (!name) {
      toast.error("Name is required")
      return
    }

    try {
      if (formMode === "create") {
        await createItem({ name }).unwrap()
        toast.success(`${config.label} item created`)
      } else {
        await updateItem({ id: formState.id, name }).unwrap()
        toast.success(`${config.label} item updated`)
      }
      setIsFormOpen(false)
    } catch (error) {
      toast.error(getErrorMessage(error, "Failed to save item"))
    }
  }

  const confirmDelete = (item: DealMetaItem) => {
    setItemToDelete(item)
    setDeleteDialogOpen(true)
  }

  const handleDelete = async () => {
    if (!itemToDelete) return
    try {
      await deleteItem(itemToDelete.id).unwrap()
      toast.success(`${config.label} item deleted`)
      setDeleteDialogOpen(false)
    } catch (error) {
      toast.error(getErrorMessage(error, "Failed to delete item"))
    }
  }

  return (
    <Card className="animate-in fade-in slide-in-from-right-4 duration-500">
      <CardHeader
        title={config.label}
        description={`Manage the list of available ${config.label.toLowerCase()} for deals and leads.`}
        extra={isFetching && !isLoading && (
          <div className="flex items-center gap-2 text-[11px] text-indigo-500 font-medium animate-pulse bg-indigo-50 px-3 py-1 rounded-full">
            <RefreshCw size={10} className="animate-spin" />
            <span>Refreshing...</span>
          </div>
        )}
      />

      <div className="p-6 space-y-4">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="relative w-full sm:w-64">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={14} />
            <Input
              placeholder="Search items..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9 h-10 rounded-xl border-gray-200 bg-gray-50 focus:bg-white text-[13px]"
            />
          </div>
          <Can action="create" subject="extra_content">
            <Button onClick={openCreate} className="w-full sm:w-auto gap-2 rounded-xl h-10 px-5">
              <Plus size={16} />
              Add Item
            </Button>
          </Can>
        </div>

        <div className="rounded-2xl border border-gray-100 overflow-hidden">
          <Table>
            <TableHeader className="bg-gray-50/50">
              <TableRow className="hover:bg-transparent border-b border-gray-100">
                <TableHead className="text-[10px] font-bold text-gray-400 uppercase tracking-widest py-3">Name</TableHead>
                <TableHead className="text-[10px] font-bold text-gray-400 uppercase tracking-widest py-3">Created At</TableHead>
                <TableHead className="text-[10px] font-bold text-gray-400 uppercase tracking-widest py-3">Updated At</TableHead>
                <TableHead className="text-[10px] font-bold text-gray-400 uppercase tracking-widest py-3 text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody className={cn(isFetching && !isLoading && "opacity-60 transition-opacity")}>
              {error ? (
                <TableRow>
                  <TableCell colSpan={4} className="h-32 text-center text-red-500 text-[13px]">
                    <div className="flex flex-col items-center gap-2">
                      <span>Failed to load items. Please try again.</span>
                      <Button variant="outline" size="sm" onClick={() => window.location.reload()} className="h-7 text-[10px]">
                        Reload Page
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ) : isLoading ? (
                <TableRow>
                  <TableCell colSpan={4} className="h-32 text-center">
                    <RefreshCw size={20} className="animate-spin mx-auto text-gray-300" />
                  </TableCell>
                </TableRow>
              ) : filteredItems.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={4} className="h-32 text-center text-gray-400 text-[13px]">
                    No items found.
                  </TableCell>
                </TableRow>
              ) : (
                filteredItems.map((item) => (
                  <TableRow key={item.id} className="hover:bg-gray-50/50 border-b border-gray-100 transition-colors">
                    <TableCell className="py-3">
                      <span className="text-[13px] font-semibold text-gray-900">{item.name}</span>
                    </TableCell>
                    <TableCell className="py-3">
                      <span className="text-[11px] text-gray-400">
                        {item.createdAt ? format(new Date(item.createdAt), "MMM d, yyyy HH:mm") : "—"}
                      </span>
                    </TableCell>
                    <TableCell className="py-3">
                      <span className="text-[11px] text-gray-400">
                        {item.updatedAt ? `${formatDistanceToNow(new Date(item.updatedAt))} ago` : "—"}
                      </span>
                    </TableCell>
                    <TableCell className="py-3 text-right">
                      <div className="flex items-center justify-end gap-1">
                        <Can action="update" subject="extra_content">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-gray-400 hover:text-[#6C63FF] hover:bg-[#6C63FF]/5 rounded-lg"
                            onClick={() => openEdit(item)}
                          >
                            <Pencil size={14} />
                          </Button>
                        </Can>
                        <Can action="delete" subject="extra_content">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg"
                            onClick={() => confirmDelete(item)}
                          >
                            <Trash2 size={14} />
                          </Button>
                        </Can>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </div>

      <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
        <DialogContent className="sm:max-w-[400px] rounded-3xl">
          <DialogHeader>
            <DialogTitle className="text-[18px] font-extrabold text-gray-900 font-['Lexend']">
              {formMode === "create" ? `Add ${config.label}` : `Edit ${config.label}`}
            </DialogTitle>
            <DialogDescription className="text-[13px] text-gray-500">
              {formMode === "create" ? "Enter a unique name for this item." : "Update the item name below."}
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleFormSubmit} className="space-y-4 py-2">
            <div className="space-y-2">
              <Label htmlFor="item-name" className="text-[11px] font-bold text-gray-400 uppercase tracking-widest">Name</Label>
              <Input
                id="item-name"
                value={formState.name}
                onChange={(e) => setFormState(prev => ({ ...prev, name: e.target.value }))}
                placeholder="e.g. New Status"
                className="h-11 rounded-xl border-gray-200 bg-gray-50 focus:bg-white"
                autoFocus
              />
            </div>
            <DialogFooter className="pt-2">
              <Button type="button" variant="ghost" onClick={() => setIsFormOpen(false)} className="rounded-xl">
                Cancel
              </Button>
              <Button type="submit" disabled={creating || updating || !formState.name.trim()} className="rounded-xl px-6">
                {(creating || updating) ? (
                  <RefreshCw size={14} className="animate-spin mr-2" />
                ) : null}
                Save Changes
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      <DeleteDialog
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        onConfirm={handleDelete}
        title={`Delete ${config.label} Item`}
        description={`Are you sure you want to delete "${itemToDelete?.name}"? This will affect leads and deals using this value.`}
        isLoading={deleting}
      />
    </Card>
  )
}

function ClosedLostTagsManager() {
  const { data: items = [], isLoading, isFetching, error } = useGetClosedLeadTagsQuery()
  const [createItem, { isLoading: creating }] = useCreateClosedLeadTagMutation()
  const [updateItem, { isLoading: updating }] = useUpdateClosedLeadTagMutation()
  const [deleteItem, { isLoading: deleting }] = useDeleteClosedLeadTagMutation()

  const [isFormOpen, setIsFormOpen] = React.useState(false)
  const [formMode, setFormMode] = React.useState<"create" | "edit">("create")
  const [formState, setFormState] = React.useState({
    id: "",
    name: "",
    isDefaultForClosedLost: false,
  })
  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false)
  const [itemToDelete, setItemToDelete] = React.useState<ClosedLeadTagItem | null>(null)
  const [search, setSearch] = React.useState("")

  const filteredItems = React.useMemo(() => {
    return [...items]
      .filter((item) => item.name.toLowerCase().includes(search.toLowerCase()))
      .sort((a, b) => {
        const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0
        const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0
        return dateB - dateA
      })
  }, [items, search])

  const openCreate = () => {
    setFormMode("create")
    setFormState({ id: "", name: "", isDefaultForClosedLost: false })
    setIsFormOpen(true)
  }

  const openEdit = (item: ClosedLeadTagItem) => {
    setFormMode("edit")
    setFormState({
      id: item.id,
      name: item.name,
      isDefaultForClosedLost: Boolean(item.isDefaultForClosedLost),
    })
    setIsFormOpen(true)
  }

  const handleFormSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const name = formState.name.trim()
    if (!name) {
      toast.error("Name is required")
      return
    }
    try {
      if (formMode === "create") {
        await createItem({
          name,
          isDefaultForClosedLost: formState.isDefaultForClosedLost || undefined,
        }).unwrap()
        toast.success("Closed lost tag created")
      } else {
        await updateItem({
          id: formState.id,
          name,
          isDefaultForClosedLost: formState.isDefaultForClosedLost,
        }).unwrap()
        toast.success("Closed lost tag updated")
      }
      setIsFormOpen(false)
    } catch (error) {
      toast.error(getErrorMessage(error, "Failed to save tag"))
    }
  }

  const confirmDelete = (item: ClosedLeadTagItem) => {
    setItemToDelete(item)
    setDeleteDialogOpen(true)
  }

  const handleDelete = async () => {
    if (!itemToDelete) return
    try {
      await deleteItem(itemToDelete.id).unwrap()
      toast.success("Closed lost tag deleted")
      setDeleteDialogOpen(false)
    } catch (error) {
      toast.error(getErrorMessage(error, "Failed to delete tag"))
    }
  }

  return (
    <Card className="animate-in fade-in slide-in-from-right-4 duration-500">
      <CardHeader
        title="Closed Lost Tags"
        description="Tags assigned when a lead is closed as lost (Close Deal / Move to Lost). Separate from freeform lead tags on create/edit."
        extra={isFetching && !isLoading && (
          <div className="flex items-center gap-2 text-[11px] text-indigo-500 font-medium animate-pulse bg-indigo-50 px-3 py-1 rounded-full">
            <RefreshCw size={10} className="animate-spin" />
            <span>Refreshing...</span>
          </div>
        )}
      />

      <div className="p-6 space-y-4">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="relative w-full sm:w-64">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={14} />
            <Input
              placeholder="Search tags..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9 h-10 rounded-xl border-gray-200 bg-gray-50 focus:bg-white text-[13px]"
            />
          </div>
          <Can action="create" subject="extra_content">
            <Button onClick={openCreate} className="w-full sm:w-auto gap-2 rounded-xl h-10 px-5">
              <Plus size={16} />
              Add Tag
            </Button>
          </Can>
        </div>

        <div className="rounded-2xl border border-gray-100 overflow-hidden">
          <Table>
            <TableHeader className="bg-gray-50/50">
              <TableRow className="hover:bg-transparent border-b border-gray-100">
                <TableHead className="text-[10px] font-bold text-gray-400 uppercase tracking-widest py-3">Name</TableHead>
                <TableHead className="text-[10px] font-bold text-gray-400 uppercase tracking-widest py-3">Default</TableHead>
                <TableHead className="text-[10px] font-bold text-gray-400 uppercase tracking-widest py-3">Created</TableHead>
                <TableHead className="text-[10px] font-bold text-gray-400 uppercase tracking-widest py-3 text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody className={cn(isFetching && !isLoading && "opacity-60 transition-opacity")}>
              {error ? (
                <TableRow>
                  <TableCell colSpan={4} className="h-32 text-center text-red-500 text-[13px]">
                    Failed to load tags.
                  </TableCell>
                </TableRow>
              ) : isLoading ? (
                <TableRow>
                  <TableCell colSpan={4} className="h-32 text-center">
                    <RefreshCw size={20} className="animate-spin mx-auto text-gray-300" />
                  </TableCell>
                </TableRow>
              ) : filteredItems.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={4} className="h-32 text-center text-gray-400 text-[13px]">
                    No tags found.
                  </TableCell>
                </TableRow>
              ) : (
                filteredItems.map((item) => (
                  <TableRow key={item.id} className="hover:bg-gray-50/50 border-b border-gray-100">
                    <TableCell className="py-3">
                      <span className="text-[13px] font-semibold text-gray-900">{item.name}</span>
                    </TableCell>
                    <TableCell className="py-3">
                      {item.isDefaultForClosedLost ? (
                        <span className="text-[11px] font-semibold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full">
                          Default
                        </span>
                      ) : (
                        <span className="text-[11px] text-gray-400">—</span>
                      )}
                    </TableCell>
                    <TableCell className="py-3">
                      <span className="text-[11px] text-gray-400">
                        {item.createdAt ? format(new Date(item.createdAt), "MMM d, yyyy") : "—"}
                      </span>
                    </TableCell>
                    <TableCell className="py-3 text-right">
                      <div className="flex items-center justify-end gap-1">
                        <Can action="update" subject="extra_content">
                          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(item)}>
                            <Pencil size={14} />
                          </Button>
                        </Can>
                        <Can action="delete" subject="extra_content">
                          <Button variant="ghost" size="icon" className="h-8 w-8 text-red-500" onClick={() => confirmDelete(item)}>
                            <Trash2 size={14} />
                          </Button>
                        </Can>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </div>

      <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
        <DialogContent className="sm:max-w-[400px] rounded-3xl">
          <DialogHeader>
            <DialogTitle className="text-[18px] font-extrabold">
              {formMode === "create" ? "Add Closed Lost Tag" : "Edit Closed Lost Tag"}
            </DialogTitle>
            <DialogDescription className="text-[13px] text-gray-500">
              Used in Close Deal and Move to Lost dialogs — not the freeform tags on create/edit lead.
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleFormSubmit} className="space-y-4 py-2">
            <div className="space-y-2">
              <Label htmlFor="clt-name">Name</Label>
              <Input
                id="clt-name"
                value={formState.name}
                onChange={(e) => setFormState((p) => ({ ...p, name: e.target.value }))}
                className="h-11 rounded-xl"
                autoFocus
              />
            </div>
            <label className="flex items-center gap-2 cursor-pointer">
              <Checkbox
                checked={formState.isDefaultForClosedLost}
                onCheckedChange={(v) =>
                  setFormState((p) => ({ ...p, isDefaultForClosedLost: v === true }))
                }
              />
              <span className="text-[13px] text-gray-700">Default when closing as lost</span>
            </label>
            <DialogFooter>
              <Button type="button" variant="ghost" onClick={() => setIsFormOpen(false)}>Cancel</Button>
              <Button type="submit" disabled={creating || updating || !formState.name.trim()}>
                Save
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      <DeleteDialog
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        onConfirm={handleDelete}
        title="Delete closed lost tag"
        description={`Delete "${itemToDelete?.name}"? Existing lead links may remain until reassigned.`}
        isLoading={deleting}
      />
    </Card>
  )
}