"use client"

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

import { Badge } from "@/components/ui/badge"
import { DataTableColumnHeader } from "@/components/ui/data-table"
import type { Translate } from "@/lib/i18n"
import { LEVEL_LABELS } from "@/lib/levels"
import type { PositionRow } from "@/lib/services/positions"

/**
 * Built from `t` rather than exported as a constant, because a column
 * definition holds words and the words come from the reader. Same shape as
 * `peopleColumns(t)` and `taskColumns(t, locale)`.
 */
export function positionColumns(t: Translate): ColumnDef<PositionRow>[] {
  return [
    {
      accessorKey: "title",
      meta: { label: t("positions.position") },
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("positions.position")}
        />
      ),
      cell: ({ row }) => (
        <Link
          href={`/positions/${row.original.id}`}
          className="font-medium hover:underline"
        >
          {row.original.title}
        </Link>
      ),
    },
    {
      accessorKey: "department",
      meta: { label: t("positions.department") },
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("positions.department")}
        />
      ),
    },
    {
      accessorKey: "level",
      meta: { label: t("positions.level") },
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={t("positions.level")} />
      ),
      cell: ({ row }) => LEVEL_LABELS[row.original.level],
    },
    {
      accessorKey: "holders",
      meta: { label: t("positions.heldBy") },
      enableSorting: false,
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={t("positions.heldBy")} />
      ),
      // Every holder, not the first of them. The schema allows several, and a
      // production line really does put ten operators on one position. Showing
      // one name as though it were the only one is how that goes unnoticed.
      cell: ({ row }) => {
        const holders = row.original.holders
        if (holders.length === 0)
          return <Badge variant="secondary">{t("positions.nobody")}</Badge>
        if (holders.length === 1) return holders[0]
        return (
          <span>
            {holders[0]}
            <span className="text-foreground/70">
              {" "}
              {t("positions.andMore", { count: holders.length - 1 })}
            </span>
          </span>
        )
      },
    },
    {
      accessorKey: "duties",
      meta: { label: t("positions.duties") },
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("positions.duties")}
          className="ml-auto"
        />
      ),
      cell: ({ row }) => (
        <div className="text-right tabular-nums">
          {row.original.duties}
          {row.original.inactiveDuties ? (
            <span className="text-foreground/70">
              {" "}
              {t("positions.dutiesOff", { count: row.original.inactiveDuties })}
            </span>
          ) : null}
        </div>
      ),
    },
    /*
      There was a menu here, and it is gone rather than wired.

      Of its three items, one duplicated the link already on the same row: the
      position's title opens the position. The other two, changing a holder and
      copying duties to another position, are features nobody has built. A menu
      offering two verbs that do nothing and one that repeats the row is the
      same fault as the department switcher deleted in db245f6, and it costs a
      header cell and an aria-label on all 193 rows to be wrong.

      It comes back the day either verb exists, with a handler on it.
    */
  ]
}