import { AlertTriangle, Truck, Users, Wrench } from "lucide-react";
import { aktuelleSitzung } from "@/lib/auth";
import { fuerOrganisation } from "@/lib/db";
import { ROLLEN_BEZEICHNUNG } from "@/lib/authz";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { alsDatumZeit } from "@/lib/utils";

export const metadata = { title: "Übersicht" };

/** Startseite nach der Anmeldung. */
export default async function UebersichtSeite() {
  const sitzung = await aktuelleSitzung();
  if (!sitzung) return null;

  const daten = await fuerOrganisation(sitzung.organisationId, async (db) => {
    const [organisation, mitglieder, fahrzeuge, geraete, pruefungFaellig, gesperrt] =
      await Promise.all([
        db.organisation.findUnique({ where: { id: sitzung.organisationId } }),
        db.person.count({ where: { aktiv: true, geloeschtAm: null } }),
        db.fahrzeug.count({ where: { aktiv: true, geloeschtAm: null } }),
        db.geraet.count({ where: { geloeschtAm: null } }),
        db.geraet.count({ where: { status: "PRUEFUNG_FAELLIG", geloeschtAm: null } }),
        db.geraet.count({ where: { status: "GESPERRT", geloeschtAm: null } }),
      ]);
    return { organisation, mitglieder, fahrzeuge, geraete, pruefungFaellig, gesperrt };
  });

  const kacheln = [
    { titel: "Aktive Mitglieder", wert: daten.mitglieder, symbol: Users },
    { titel: "Fahrzeuge", wert: daten.fahrzeuge, symbol: Truck },
    { titel: "Geräte", wert: daten.geraete, symbol: Wrench },
    { titel: "Prüfung fällig", wert: daten.pruefungFaellig, symbol: AlertTriangle },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">
          {daten.organisation?.name ?? "Feuerwehr"}
        </h1>
        <p className="text-sm text-[var(--muted-foreground)]">
          Angemeldet als {sitzung.name} —{" "}
          {sitzung.rollen.map((rolle) => ROLLEN_BEZEICHNUNG[rolle]).join(", ")}
        </p>
      </div>

      {/*
        Sicherheitshinweis nach den Projektleitplanken. Er bleibt stehen, bis
        die Wehr die Anwendung ausdrücklich freigegeben hat.
      */}
      <div
        role="note"
        className="flex items-start gap-3 rounded-lg border border-[var(--pruefung-faellig)]/40 bg-[var(--pruefung-faellig)]/10 p-4"
      >
        <AlertTriangle
          className="mt-0.5 size-5 shrink-0 text-[var(--pruefung-faellig)]"
          aria-hidden
        />
        <div className="text-sm">
          <p className="font-medium">Diese Installation ist noch nicht freigegeben.</p>
          <p className="text-[var(--muted-foreground)]">
            Atemschutzüberwachung und Alarmmonitor sind sicherheitsrelevant. Solange die
            Wehr das System nicht ausdrücklich freigegeben hat, bleibt die analoge
            Überwachung führend. FLORIAN ersetzt sie nicht.
          </p>
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {kacheln.map((kachel) => {
          const Symbol = kachel.symbol;
          return (
            <Card key={kachel.titel}>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-[var(--muted-foreground)]">
                  {kachel.titel}
                </CardTitle>
                <Symbol className="size-4 text-[var(--muted-foreground)]" aria-hidden />
              </CardHeader>
              <CardContent>
                <p className="text-3xl font-semibold tabellenzahlen">{kachel.wert}</p>
              </CardContent>
            </Card>
          );
        })}
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Stand des Aufbaus</CardTitle>
          <CardDescription>
            Phase 1 ist abgeschlossen: Standorte, Fahrzeuge mit Geräteräumen,
            Gerätetypen, Geräte mit QR-Etiketten, Qualifikationen und der Import aus
            vorhandenen Tabellen stehen. Als Nächstes kommt das Prüfmanagement.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          <div className="flex flex-wrap items-center gap-2">
            <Badge variant="einsatzbereit">Phase 0 — Fundament</Badge>
            <Badge variant="einsatzbereit">Phase 1 — Stammdaten</Badge>
            <Badge variant="outline">Phase 2 — Wartung und Prüfung</Badge>
            <Badge variant="outline">Phase 3 — Einsätze</Badge>
            <Badge variant="outline">Phase 4 — Terminal</Badge>
            <Badge variant="outline">Phase 5 — Atemschutz</Badge>
          </div>
          <dl className="grid gap-2 sm:grid-cols-2">
            <div>
              <dt className="text-[var(--muted-foreground)]">Gesperrte Geräte</dt>
              <dd className="tabellenzahlen">{daten.gesperrt}</dd>
            </div>
            <div>
              <dt className="text-[var(--muted-foreground)]">Zeitpunkt</dt>
              <dd className="tabellenzahlen">{alsDatumZeit(new Date())}</dd>
            </div>
          </dl>
        </CardContent>
      </Card>
    </div>
  );
}