import { redirect } from "next/navigation";
import { KundeAnlegen } from "@/components/kunde-anlegen";
import { KundeBearbeiten } from "@/components/kunde-bearbeiten";
import { KundeArchivieren } from "@/components/kunde-archivieren";
import { darf } from "@/server/auth/rollen";
import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
import { kundenEbeneSichtbar } from "@/server/mandant";
import { kundenListe, type KundenZeile } from "@/server/queries/kunden";

/**
 * Kundenliste – nur im Modus Dienstleistung.
 *
 * Im Modus Intern gibt es genau einen Kunden, und der erscheint nirgends. Die
 * Seite leitet dann auf die Uebersicht, statt eine leere Liste zu zeigen.
 */
function Zaehlung({ zeile }: { zeile: KundenZeile }) {
  const teile = [
    [zeile.anzahlGeraete, "Gerät", "Geräte"],
    [zeile.anzahlMitarbeiter, "Person", "Personen"],
    [zeile.anzahlLaeufe, "Lauf", "Läufe"],
  ] as const;
  return (
    <p className="mt-1 text-xs text-nebentext">
      {teile.map(([anzahl, eins, viele]) => `${anzahl} ${anzahl === 1 ? eins : viele}`).join(" · ")}
    </p>
  );
}

export default async function KundenSeite() {
  const { benutzer } = await sitzungErforderlich("lesen", "/kunden");
  if (!(await kundenEbeneSichtbar())) {
    redirect("/");
  }
  const darfVerwalten = darf(benutzer.rolle, "verwaltung");
  const zeilen = await kundenListe(benutzer, true);

  return (
    <>
      <h1 className="text-2xl font-bold">Kunden</h1>
      <p className="mt-2 max-w-prose text-nebentext">
        Geräte, Personen, Abteilungen und Läufe hängen an einem Kunden. Kunden werden archiviert, nicht
        gelöscht — sonst verlöre das Archiv seine Bezüge.
      </p>

      <ul className="mt-8 flex flex-col gap-3">
        {zeilen.map((zeile) => (
          <li key={zeile.id} className="rounded-karte border border-linie bg-flaeche">
            <div className="flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between">
              <div className="min-w-0">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="mono rounded-pille bg-flaeche-hoch px-2.5 py-1 text-xs text-nebentext">
                    {zeile.kuerzel}
                  </span>
                  <p className={zeile.archiviert ? "text-nebentext line-through" : "font-medium"}>
                    {zeile.name}
                  </p>
                  {zeile.istEigeneOrganisation ? (
                    <span className="rounded-pille bg-akzent-flaeche px-2.5 py-1 text-xs text-akzent">
                      eigene Organisation
                    </span>
                  ) : null}
                </div>
                <Zaehlung zeile={zeile} />
                {zeile.notizen ? (
                  <p className="mt-2 max-w-prose text-sm text-nebentext">{zeile.notizen}</p>
                ) : null}
              </div>

              {darfVerwalten && !zeile.istEigeneOrganisation ? (
                <KundeArchivieren kundeId={zeile.id} archiviert={zeile.archiviert} />
              ) : null}
            </div>

            {darfVerwalten ? (
              <details className="group">
                <summary className="flex min-h-11 cursor-pointer list-none items-center px-4 text-sm text-nebentext hover:text-text">
                  Bearbeiten
                </summary>
                <KundeBearbeiten
                  kunde={{
                    id: zeile.id,
                    name: zeile.name,
                    kuerzel: zeile.kuerzel,
                    notizen: zeile.notizen,
                  }}
                />
              </details>
            ) : null}
          </li>
        ))}
      </ul>

      {darfVerwalten ? (
        <section className="mt-8 rounded-karte border border-linie bg-flaeche p-5">
          <h2 className="text-lg font-semibold">Kunde anlegen</h2>
          <p className="mt-1 mb-5 max-w-prose text-sm text-nebentext">
            Das Kürzel erscheint auf den Etiketten und lässt sich in der Hostname-Regel als{" "}
            <code className="mono">{"{kundenkuerzel}"}</code> verwenden.
          </p>
          <KundeAnlegen />
        </section>
      ) : null}
    </>
  );
}