import { AppShell } from "@/components/app-shell"
import { translator } from "@/lib/i18n"
import {
  jobDescriptionRows,
  jobDescriptionSummary,
} from "@/lib/job-description-view"
import { listChairs } from "@/lib/services/duties"
import { requireAtLeast } from "@/lib/services/session"
import { JobDescriptionsTable } from "./job-descriptions-table"

/**
 * What every position says about itself, and who reads it.
 *
 * The job description is written on the position, at `/positions/[id]`, and
 * that is the right place for it: a position outlives its holders and the
 * description is what the next one reads to learn the job. But written one
 * position at a time, nobody can see how much of the factory has no description
 * at all — and on 1 September that was 192 positions out of 193.
 *
 * So this screen exists to be a worklist rather than a reader. It puts the
 * emptiest first, says how many are missing, and links out to the page where
 * each one is written. It writes nothing itself.
 *
 * Admin only, per §8, like the two screens either side of it in the sidebar.
 */
export default async function Page() {
  const user = await requireAtLeast("admin")
  const chairs = await listChairs()
  const t = translator(user.language)

  const rows = jobDescriptionRows(chairs)
  const summary = jobDescriptionSummary(chairs)

  return (
    <AppShell title="jobDescriptions.title" user={user}>
      <div className="flex flex-col gap-4">
        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
          <p className="text-foreground/80 tabular-nums">
            {t("jobDescriptions.count", {
              rows: summary.rows,
              positions: summary.positions,
            })}
          </p>
          {summary.unwritten > 0 ? (
            <p className="text-foreground/70 tabular-nums">
              {t("jobDescriptions.unwritten", { count: summary.unwritten })}
            </p>
          ) : null}
        </div>
        <JobDescriptionsTable rows={rows} />
      </div>
    </AppShell>
  )
}