import type { Metadata } from 'next'
import type { CSSProperties } from 'react'
import Link from 'next/link'
import { requireUser } from '@/lib/auth/current'
import { casesPerDepartment, listDepartments } from '@/lib/departments/service'
import { de } from '@/lib/i18n/de'
import { PieChart } from '@/components/PieChart'

export const metadata: Metadata = { title: de.department.heading }
export const dynamic = 'force-dynamic'

/**
 * Alle Abteilungen, und wo sich etwas häuft.
 *
 * Das Diagramm beantwortet die Frage, mit der man auf diese Seite kommt: zu
 * welcher Abteilung gibt es die meisten Fälle. Gezählt wird nur, was der
 * Fragende auch sehen darf — eine Zahl, die mehr zählt als seine Liste
 * hergibt, wäre selbst eine Auskunft.
 */
export default async function DepartmentsPage() {
  const user = await requireUser()
  const [abteilungen, verteilung] = await Promise.all([
    listDepartments(user.permissions),
    casesPerDepartment(user.permissions, de.department.chartRedacted),
  ])

  return (
    <main className="mx-auto max-w-5xl px-6 py-10">
      <h1 className="font-condensed">{de.department.heading}</h1>
      <p className="mt-1 max-w-(--container-measure) text-2xs text-text-dim">
        {de.department.intro}
      </p>

      {abteilungen.length === 0 ? (
        <p className="mt-10 text-text-dim">{de.department.empty}</p>
      ) : (
        <>
          <section className="mt-8 border border-line p-5">
            <h2 className="font-condensed text-xs text-text-dim">{de.department.chartAll}</h2>
            <div className="mt-4">
              <PieChart
                slices={verteilung}
                emptyLabel={de.department.chartEmpty}
                totalLabel={de.department.chartTotal}
              />
            </div>
          </section>

          <ul className="mt-10 border-t border-line">
            {abteilungen.map((abteilung) => (
              <li key={abteilung.id} className="border-b border-line">
                <Link
                  href={`/abteilungen/${abteilung.key}`}
                  className="record-row py-3 text-text no-underline"
                  style={{ '--record-key': '8ch' } as CSSProperties}
                >
                  <span className="record-key">{abteilung.key}</span>
                  <span className="record-title">
                    {abteilung.name}
                    {abteilung.description ? (
                      <span className="mt-0.5 block text-2xs text-text-dim">
                        {abteilung.description}
                      </span>
                    ) : null}
                  </span>
                  {abteilung.memberCount === null ? null : (
                    <span className="record-meta">
                      {de.department.memberCount(abteilung.memberCount)}
                    </span>
                  )}
                </Link>
              </li>
            ))}
          </ul>
        </>
      )}
    </main>
  )
}