"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 type { JobDescriptionRow } from "@/lib/job-description-view"

/**
 * Built from the reader's language rather than declared once, like the people
 * and task columns and for the same reason: a column definition holds render
 * functions and a Server Component cannot hand one to a client component.
 *
 * Two links out and one control. The person goes to the roster screen where
 * their login lives and the position goes to its own page, both unchanged. The
 * Description badge is the one thing that acts here: it opens the same editor
 * the position page uses, in a panel, so that a column of missing descriptions
 * can be filled without leaving the list of what is missing.
 */
export function jobDescriptionColumns(
  t: Translate,
  onEdit: (positionId: string) => void,
): ColumnDef<JobDescriptionRow>[] {
  return [
    {
      id: "person",
      accessorFn: (row) => row.person?.name ?? "",
      meta: { label: t("jobDescriptions.person") },
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("jobDescriptions.person")}
        />
      ),
      cell: ({ row }) =>
        row.original.person ? (
          <Link
            href={`/admin/people/${row.original.person.id}`}
            className="font-medium hover:underline"
          >
            {row.original.person.name}
          </Link>
        ) : (
          <Badge variant="outline">{t("jobDescriptions.vacant")}</Badge>
        ),
    },
    {
      accessorKey: "title",
      meta: { label: t("jobDescriptions.position") },
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("jobDescriptions.position")}
        />
      ),
      cell: ({ row }) => (
        <Link
          href={`/positions/${row.original.positionId}`}
          className="hover:underline"
        >
          {row.original.title}
        </Link>
      ),
    },
    {
      accessorKey: "department",
      meta: { label: t("jobDescriptions.department") },
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("jobDescriptions.department")}
        />
      ),
    },
    /**
     * The duties that are only ever read, and the duties that also become work.
     * Kept apart because they answer different questions: the first is the job
     * description's own content, the second is what the schedule does with the
     * position. A single total would hide a job described by nothing behind a
     * position that happens to generate forty tasks a month.
     */
    {
      accessorKey: "generalDuties",
      meta: { label: t("jobDescriptions.general") },
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("jobDescriptions.general")}
        />
      ),
      cell: ({ row }) => (
        <span className="tabular-nums">{row.original.generalDuties}</span>
      ),
    },
    {
      accessorKey: "recurringDuties",
      meta: { label: t("jobDescriptions.recurring") },
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("jobDescriptions.recurring")}
        />
      ),
      cell: ({ row }) => (
        <span className="text-foreground/70 tabular-nums">
          {row.original.recurringDuties}
        </span>
      ),
    },
    {
      accessorKey: "hasText",
      meta: { label: t("jobDescriptions.text") },
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("jobDescriptions.text")}
        />
      ),
      /**
       * The one control on the screen. It is the badge itself rather than a
       * pencil beside it, because the badge is what somebody is scanning the
       * column for: the word that says a description is missing is the word
       * they want to press.
       */
      cell: ({ row }) => (
        <button
          type="button"
          onClick={() => onEdit(row.original.positionId)}
          className="cursor-pointer rounded-full focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
          aria-label={`${t("position.edit")} — ${row.original.title}`}
        >
          {row.original.hasText ? (
            <Badge variant="secondary" className="hover:bg-secondary/70">
              {t("jobDescriptions.written")}
            </Badge>
          ) : (
            <Badge variant="outline" className="hover:bg-accent">
              {t("jobDescriptions.blank")}
            </Badge>
          )}
        </button>
      ),
    },
  ]
}