import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@conusai-kit/ui/primitives"
// The retention classes, and the documents due for disposal. A server component: it holds no state, and
// every string is passed in.

import type { ReactElement } from "react"
import type { DocumentView, RetentionClassView } from "../contract/index.js"

export interface RetentionLabels {
  readonly caption: string
  readonly empty: string
  readonly code: string
  readonly keepFor: string
  readonly from: string
  readonly dueCaption: string
  readonly dueEmpty: string
}

export function RetentionClasses({
  classes,
  due,
  bases,
  listHref,
  labels,
}: {
  classes: readonly RetentionClassView[]
  due: readonly DocumentView[]
  bases: Readonly<Record<RetentionClassView["from"], string>>
  listHref: string
  labels: RetentionLabels
}): ReactElement {
  return (
    <>
      {classes.length === 0 ? (
        <p>{labels.empty}</p>
      ) : (
        <Table>
          <TableCaption>{labels.caption}</TableCaption>
          <TableHeader>
            <TableRow>
              <TableHead scope="col">{labels.code}</TableHead>
              <TableHead scope="col">{labels.keepFor}</TableHead>
              <TableHead scope="col">{labels.from}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {classes.map((retention) => (
              <TableRow key={retention.code}>
                <TableHead scope="row">{retention.code}</TableHead>
                <TableCell>{retention.keepFor}</TableCell>
                <TableCell>{bases[retention.from]}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
      {due.length === 0 ? (
        <p>{labels.dueEmpty}</p>
      ) : (
        <Table>
          <TableCaption>{labels.dueCaption}</TableCaption>
          <TableHeader>
            <TableRow>
              <TableHead scope="col">{labels.code}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {due.map((document) => (
              <TableRow key={document.documentId}>
                <TableHead scope="row">
                  <a href={`${listHref}/${encodeURIComponent(document.documentId)}`}>{document.title}</a>
                </TableHead>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </>
  )
}