"use client"

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

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { LIST_HREF } from "./constants"
import type { AssetFieldDefinitionRow } from "./schema"

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

export function createAssetFieldDefinitionColumns(): ColumnDef<AssetFieldDefinitionRow>[] {
  return [
    {
      accessorKey: "apiField",
      header: "API Field",
      filterFn: includesStringFilter,
      cell: ({ row }) => (
        <code className="text-xs break-all text-muted-foreground">
          {row.original.apiField}
        </code>
      ),
    },
    {
      accessorKey: "oxyField",
      header: "Oxy Field",
      filterFn: includesStringFilter,
      cell: ({ row }) => (
        <span className="font-mono text-sm font-medium">{row.original.oxyField}</span>
      ),
    },
    {
      accessorKey: "fTypeLabel",
      header: "Field Type",
      cell: ({ row }) => (
        <Badge variant="outline" className="font-normal">
          {row.original.fTypeLabel}
        </Badge>
      ),
      enableColumnFilter: false,
    },
    {
      accessorKey: "module",
      header: "Module",
      filterFn: includesStringFilter,
    },
    {
      accessorKey: "info",
      header: "Info",
      filterFn: includesStringFilter,
      cell: ({ row }) => (
        <span className="max-w-xs truncate text-sm text-muted-foreground">
          {row.original.info || "—"}
        </span>
      ),
    },
    {
      id: "options",
      header: () => <span className="block w-full text-right">Options</span>,
      enableColumnFilter: false,
      cell: ({ row }) => (
        <div className="flex justify-end">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="secondary" size="icon-sm" className="size-7" asChild>
                <Link
                  href={`${LIST_HREF}/${encodeURIComponent(row.original.id)}`}
                  aria-label="Update asset field definition"
                >
                  <Pencil className="size-3.5" />
                </Link>
              </Button>
            </TooltipTrigger>
            <TooltipContent>Update</TooltipContent>
          </Tooltip>
        </div>
      ),
      enableSorting: false,
    },
  ]
}