import Link from "next/link";
import { redirect } from "next/navigation";
import { Truck } from "lucide-react";
import { aktuelleSitzung } from "@/lib/auth";
import { fuerOrganisation } from "@/lib/db";
import { alsDatum } from "@/lib/utils";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { FristAnzeige, NichtsGefunden } from "@/components/stammdaten/anzeige";

export const metadata = { title: "Fahrzeuge" };

const ART_TEXT: Record<string, string> = {
  LOESCHFAHRZEUG: "Löschfahrzeug",
  DREHLEITER: "Drehleiter",
  RUESTWAGEN: "Rüstwagen",
  GERAETEWAGEN: "Gerätewagen",
  MANNSCHAFTSTRANSPORT: "Mannschaftstransport",
  EINSATZLEITWAGEN: "Einsatzleitwagen",
  WECHSELLADER: "Wechsellader",
  ANHAENGER: "Anhänger",
  SONSTIGES: "Sonstiges",
};

/**
 * Fahrzeugübersicht als Kacheln statt als Tabelle.
 *
 * Eine Wehr hat drei bis zehn Fahrzeuge, nicht dreihundert. Für diese Menge
 * ist eine Kachel mit den wichtigen Terminen brauchbarer als eine Zeile: der
 * TÜV-Termin und die Zahl der verlasteten Geräte sind das, wonach man sucht.
 */
export default async function FahrzeugeSeite() {
  const sitzung = await aktuelleSitzung();
  if (!sitzung) redirect("/anmelden");

  const fahrzeuge = await fuerOrganisation(sitzung.organisationId, (db) =>
    db.fahrzeug.findMany({
      where: { geloeschtAm: null },
      orderBy: { funkrufname: "asc" },
      include: {
        standort: { select: { name: true } },
        _count: { select: { geraete: true, geraeteraeume: true } },
      },
    }),
  );

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Fahrzeuge</h1>
        <p className="text-sm text-[var(--muted-foreground)]">
          Einsatzfahrzeuge der Wehr mit Terminen und verlasteten Geräten.
        </p>
      </div>

      {fahrzeuge.length === 0 ? (
        <NichtsGefunden
          titel="Noch keine Fahrzeuge erfasst"
          hinweis="Fahrzeuge lassen sich einzeln anlegen oder zusammen mit den Geräten importieren."
        />
      ) : (
        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
          {fahrzeuge.map((fahrzeug) => (
            <Card key={fahrzeug.id} className={!fahrzeug.aktiv ? "opacity-60" : undefined}>
              <CardHeader>
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <CardTitle className="truncate">
                      <Link
                        href={`/fahrzeuge/${fahrzeug.id}`}
                        className="underline-offset-4 hover:underline"
                      >
                        {fahrzeug.funkrufname}
                      </Link>
                    </CardTitle>
                    <CardDescription className="truncate">
                      {fahrzeug.dinTyp ? `${fahrzeug.dinTyp} — ` : ""}
                      {fahrzeug.bezeichnung}
                    </CardDescription>
                  </div>
                  <Truck className="size-5 shrink-0 text-[var(--muted-foreground)]" aria-hidden />
                </div>
              </CardHeader>

              <CardContent className="space-y-3 text-sm">
                <div className="flex flex-wrap gap-2">
                  <Badge variant="secondary">{ART_TEXT[fahrzeug.art] ?? fahrzeug.art}</Badge>
                  {fahrzeug.kennzeichen && (
                    <Badge variant="outline" className="tabellenzahlen">
                      {fahrzeug.kennzeichen}
                    </Badge>
                  )}
                  {!fahrzeug.aktiv && <Badge variant="ausgesondert">außer Dienst</Badge>}
                </div>

                <dl className="grid grid-cols-2 gap-x-4 gap-y-2">
                  <div>
                    <dt className="text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
                      Nächster TÜV
                    </dt>
                    <dd>
                      <FristAnzeige datum={fahrzeug.tuevBis} vorwarnTage={60} />
                    </dd>
                  </div>
                  <div>
                    <dt className="text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
                      Baujahr
                    </dt>
                    <dd className="tabellenzahlen">{fahrzeug.baujahr ?? "—"}</dd>
                  </div>
                  <div>
                    <dt className="text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
                      Standort
                    </dt>
                    <dd className="truncate">{fahrzeug.standort?.name ?? "—"}</dd>
                  </div>
                  <div>
                    <dt className="text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
                      Indienststellung
                    </dt>
                    <dd className="tabellenzahlen">{alsDatum(fahrzeug.indienststellung)}</dd>
                  </div>
                </dl>

                <p className="border-t border-[var(--border)] pt-2 text-[var(--muted-foreground)]">
                  <Link
                    href={`/geraete?fahrzeug=${fahrzeug.id}`}
                    className="underline-offset-4 hover:underline"
                  >
                    {fahrzeug._count.geraete}{" "}
                    {fahrzeug._count.geraete === 1 ? "Gerät" : "Geräte"} verlastet
                  </Link>
                  {" · "}
                  {fahrzeug._count.geraeteraeume}{" "}
                  {fahrzeug._count.geraeteraeume === 1 ? "Geräteraum" : "Geräteräume"}
                </p>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}