"use client";

import type { ColumnDef, FilterFn } from "@tanstack/react-table";
import { Pencil, Trash2 } from "lucide-react";
import Link from "next/link";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { LIST_HREF } from "./constants";
import type { AssetDefinitionRow } from "./schema";

const includesStringFilter: FilterFn<AssetDefinitionRow> = (row, columnId, value) => {
  if (!value || value === "all") return true;
  return String(row.getValue(columnId) ?? "")
    .toLowerCase()
    .includes(String(value).toLowerCase());
};

const statusFilter: FilterFn<AssetDefinitionRow> = (row, _columnId, value) => {
  if (!value || value === "all") return true;
  return row.original.status === value;
};

export function createAssetDefinitionColumns(
  onDelete?: (id: string) => void | Promise<void>,
): ColumnDef<AssetDefinitionRow>[] {
  return [
    {
      accessorKey: "masterName",
      header: "Name",
      filterFn: includesStringFilter,
      cell: ({ row }) => (
        <span className="font-medium">{row.original.masterName}</span>
      ),
    },
    {
      accessorKey: "assetTitles",
      header: "Asset titles",
      enableColumnFilter: false,
      cell: ({ row }) => (
        <div className="flex flex-wrap gap-1">
          {row.original.assetTitles.map((t) => (
            <Badge key={t} variant="secondary" className="font-normal text-xs">
              {t}
            </Badge>
          ))}
        </div>
      ),
    },
    {
      accessorKey: "status",
      header: "Status",
      filterFn: statusFilter,
      cell: ({ row }) => (
        <Badge
          variant={row.original.status === "A" ? "default" : "outline"}
          className="font-normal"
        >
          {row.original.statusLabel}
        </Badge>
      ),
    },
    {
      id: "options",
      header: () => <span className="block w-full text-right">Options</span>,
      enableColumnFilter: false,
      cell: ({ row }) => (
        <div className="flex justify-end gap-1">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="secondary" size="icon-sm" className="size-7" asChild>
                <Link href={`${LIST_HREF}/${encodeURIComponent(row.original.id)}`}>
                  <Pencil className="size-3.5" />
                </Link>
              </Button>
            </TooltipTrigger>
            <TooltipContent>Update</TooltipContent>
          </Tooltip>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="destructive" size="icon-sm" className="size-7">
                <Trash2 className="size-3.5" />
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Delete asset definition?</AlertDialogTitle>
                <AlertDialogDescription>
                  Remove {row.original.masterName}? This cannot be undone.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={() => {
                    void onDelete?.(row.original.id);
                  }}
                >
                  Delete
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      ),
      enableSorting: false,
    },
  ];
}