import { notFound, redirect } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { ArrowLeft, Printer } from "lucide-react";
import { aktuelleSitzung } from "@/lib/auth";
import { fuerOrganisation } from "@/lib/db";
import { qrAlsDataUri, qrZiel } from "@/lib/stammdaten/qr";
import { alsDatum, alsDatumZeit, alsEuro } from "@/lib/utils";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { StatusAbzeichen, FristAnzeige } from "@/components/stammdaten/anzeige";

export const metadata = { title: "Gerät" };

/**
 * Detailseite eines Geräts.
 *
 * Serverseitig gerendert: hier wird nichts gefiltert und nichts sortiert, also
 * braucht es auch keinen Zustand im Browser. Der QR-Code wird auf dem Server
 * erzeugt und als Data-URI eingebettet — so lädt die Seite nichts nach.
 */
export default async function GeraetSeite({ params }: { params: Promise<{ id: string }> }) {
  const sitzung = await aktuelleSitzung();
  if (!sitzung) redirect("/anmelden");

  const { id } = await params;

  const daten = await fuerOrganisation(sitzung.organisationId, async (db) => {
    const geraet = await db.geraet.findUnique({
      where: { id },
      include: {
        geraetetyp: true,
        standort: { select: { id: true, name: true } },
        fahrzeug: { select: { id: true, funkrufname: true } },
        geraeteraum: { select: { id: true, bezeichnung: true } },
      },
    });
    if (!geraet) return null;

    const verlauf = await db.auditLog.findMany({
      where: { entitaet: "Geraet", entitaetId: id },
      orderBy: { zeitpunkt: "desc" },
      take: 30,
      select: {
        id: true,
        zeitpunkt: true,
        aktion: true,
        beschreibung: true,
        akteurName: true,
      },
    });

    return { geraet, verlauf };
  });

  if (!daten) notFound();

  const { geraet, verlauf } = daten;
  const qr = await qrAlsDataUri(geraet.inventarnummer, 320);

  const angaben: Array<[string, React.ReactNode]> = [
    ["Inventarnummer", <span className="tabellenzahlen">{geraet.inventarnummer}</span>],
    ["Gerätetyp", geraet.geraetetyp?.name ?? "—"],
    ["Hersteller", geraet.hersteller ?? "—"],
    ["Modell", geraet.modell ?? "—"],
    ["Seriennummer", <span className="tabellenzahlen">{geraet.seriennummer ?? "—"}</span>],
    ["Herstellungsdatum", alsDatum(geraet.herstellungsdatum)],
    ["Indienststellung", alsDatum(geraet.indienststellung)],
    [
      "Anschaffungspreis",
      geraet.anschaffungspreis ? alsEuro(Number(geraet.anschaffungspreis)) : "—",
    ],
    [
      "Prüfintervall",
      geraet.pruefintervallMonate
        ? `alle ${geraet.pruefintervallMonate} Monate`
        : (geraet.geraetetyp?.pruefintervallMonate
            ? `alle ${geraet.geraetetyp.pruefintervallMonate} Monate (aus dem Gerätetyp)`
            : "keines hinterlegt"),
    ],
    ["Letzte Prüfung", alsDatum(geraet.letztePruefung)],
    ["Nächste Prüfung", <FristAnzeige datum={geraet.naechstePruefung} />],
    ["Lebensdauer bis", <FristAnzeige datum={geraet.lebensdauerBis} vorwarnTage={90} />],
    ["Prüfvorschrift", geraet.geraetetyp?.pruefvorschrift ?? "—"],
  ];

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div>
          <Button variant="ghost" size="sm" asChild className="-ml-2 mb-1">
            <Link href="/geraete">
              <ArrowLeft aria-hidden />
              Zurück zur Liste
            </Link>
          </Button>
          <h1 className="text-2xl font-semibold tracking-tight">{geraet.bezeichnung}</h1>
          <p className="flex items-center gap-2 text-sm text-[var(--muted-foreground)]">
            <span className="tabellenzahlen">{geraet.inventarnummer}</span>
            <StatusAbzeichen status={geraet.status} />
          </p>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Angaben</CardTitle>
          </CardHeader>
          <CardContent>
            <dl className="grid gap-x-6 gap-y-3 sm:grid-cols-2">
              {angaben.map(([bezeichnung, wert]) => (
                <div key={bezeichnung}>
                  <dt className="text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
                    {bezeichnung}
                  </dt>
                  <dd className="text-sm">{wert}</dd>
                </div>
              ))}
            </dl>

            <div className="mt-6 border-t border-[var(--border)] pt-4">
              <p className="text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
                Lagerung
              </p>
              <p className="text-sm">
                {geraet.fahrzeug ? (
                  <>
                    Verlastet auf{" "}
                    <Link
                      href={`/fahrzeuge/${geraet.fahrzeug.id}`}
                      className="underline underline-offset-4"
                    >
                      {geraet.fahrzeug.funkrufname}
                    </Link>
                    {geraet.geraeteraum && `, ${geraet.geraeteraum.bezeichnung}`}
                  </>
                ) : (
                  `Standort ${geraet.standort?.name ?? "unbekannt"}`
                )}
                {geraet.lagerort && ` — ${geraet.lagerort}`}
              </p>
            </div>

            {geraet.bemerkung && (
              <div className="mt-4 border-t border-[var(--border)] pt-4">
                <p className="text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
                  Bemerkung
                </p>
                <p className="whitespace-pre-line text-sm">{geraet.bemerkung}</p>
              </div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>QR-Code</CardTitle>
            <CardDescription>
              Aufkleber im Geräteraum. Wer ihn scannt, landet direkt auf dieser Seite.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            {/* Data-URI: die Grafik kommt aus dem Server-Rendering, nicht aus
                einem Nachladen. */}
            <Image
              src={qr}
              alt={`QR-Code für ${geraet.inventarnummer}`}
              width={320}
              height={320}
              unoptimized
              className="mx-auto h-auto w-full max-w-56 rounded border border-[var(--border)] bg-white p-2"
            />
            <p className="break-all text-center text-xs text-[var(--muted-foreground)]">
              {qrZiel(geraet.inventarnummer)}
            </p>
            <form action="/api/geraete/etiketten" method="post">
              <input type="hidden" name="id" value={geraet.id} />
              <Button type="submit" variant="outline" className="w-full">
                <Printer aria-hidden />
                Etikett drucken
              </Button>
            </form>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Verlauf</CardTitle>
          <CardDescription>
            Gerendert aus dem Audit-Log. Es gibt bewusst keine zweite Historie —
            zwei Quellen könnten auseinanderlaufen.
          </CardDescription>
        </CardHeader>
        <CardContent>
          {verlauf.length === 0 ? (
            <p className="text-sm text-[var(--muted-foreground)]">
              Zu diesem Gerät ist noch nichts protokolliert.
            </p>
          ) : (
            <ol className="space-y-3">
              {verlauf.map((eintrag) => (
                <li
                  key={eintrag.id}
                  className="flex flex-wrap items-baseline gap-x-3 gap-y-1 border-l-2 border-[var(--border)] pl-3 text-sm"
                >
                  <span className="tabellenzahlen text-xs text-[var(--muted-foreground)]">
                    {alsDatumZeit(eintrag.zeitpunkt)}
                  </span>
                  <span>{eintrag.beschreibung ?? eintrag.aktion}</span>
                  {eintrag.akteurName && (
                    <span className="text-xs text-[var(--muted-foreground)]">
                      — {eintrag.akteurName}
                    </span>
                  )}
                </li>
              ))}
            </ol>
          )}
        </CardContent>
      </Card>
    </div>
  );
}