"use client"

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

import { useLocale, useT } from "@/components/locale-provider"
import { Badge } from "@/components/ui/badge"
import { DataTable, DataTableColumnHeader } from "@/components/ui/data-table"
import { moment, shortDay } from "@/lib/i18n/dates"
import type { Locale, Translate } from "@/lib/i18n"
import type { ReviewRow } from "@/lib/services/review"

/**
 * The queue, on the client, because its headers are words and the words come
 * from the reader.
 */

function columns(t: Translate, locale: Locale): ColumnDef<ReviewRow>[] {
  return [
    {
      accessorKey: "description",
      meta: { label: t("review.task") },
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={t("review.task")} />
      ),
      cell: ({ row }) => (
        <Link
          href={`/tasks/${row.original.id}`}
          className="font-medium hover:underline"
        >
          {row.original.description}
        </Link>
      ),
    },
    {
      accessorKey: "waitingFor",
      meta: { label: t("review.waitingFor") },
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={t("review.waitingFor")} />
      ),
      cell: ({ row }) => (
        <Badge
          variant={
            row.original.waitingFor === "check" ? "default" : "secondary"
          }
        >
          {row.original.waitingFor === "check"
            ? t("review.forMyCheck")
            : t("review.forMyVerification")}
        </Badge>
      ),
    },
    {
      accessorKey: "assignee",
      meta: { label: t("review.doneBy") },
      enableSorting: false,
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={t("review.doneBy")} />
      ),
      cell: ({ row }) => row.original.assignee ?? "—",
    },
    {
      accessorKey: "since",
      meta: { label: t("review.since") },
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={t("review.since")} />
      ),
      cell: ({ row }) => (
        <span className="whitespace-nowrap tabular-nums">
          {row.original.since ? moment(row.original.since, locale) : "—"}
        </span>
      ),
    },
    {
      accessorKey: "dueDate",
      meta: { label: t("review.due") },
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={t("review.due")} />
      ),
      cell: ({ row }) => (
        <span className="flex items-center gap-2 whitespace-nowrap">
          <span className="tabular-nums">
            {shortDay(row.original.dueDate, locale)}
          </span>
          {/*
            The work is done, so this does not say somebody still owes it. It
            says the task was already late when it reached the person checking
            it, which is the one thing a queue can tell them that the task
            itself cannot.
          */}
          {row.original.late ? (
            <Badge variant="destructive">{t("status.late")}</Badge>
          ) : null}
        </span>
      ),
    },
  ]
}

export function ReviewTable({ rows }: { rows: ReviewRow[] }) {
  const t = useT()
  const locale = useLocale()

  return (
    <DataTable
      columns={columns(t, locale)}
      data={rows}
      empty={t("review.nothing")}
      pageSize={25}
    />
  )
}