import Link from "next/link";
import { notFound } from "next/navigation";
import { requireSession } from "@/lib/auth/guards";
import { getWehrDetail } from "@/lib/detail/queries";
import { DetailHeader } from "@/components/detail/DetailHeader";
import { KontaktButton } from "@/components/kontakt/KontaktButton";
import { StatusBadge } from "@/components/ui/badge";
import { t } from "@/lib/i18n/de";

export default async function WehrDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  // Default-deny in der Tiefe (Querschnittsstandard 1): Guard als erste Zeile.
  await requireSession();
  const { id } = await params;
  const w = await getWehrDetail(id);
  if (!w) notFound();

  const adresse = [w.strasse, [w.plz, w.ort].filter(Boolean).join(" ")]
    .filter((s) => s && s.trim() !== "")
    .join(", ");

  return (
    <div className="mx-auto flex max-w-3xl flex-col gap-6">
      <DetailHeader kicker={w.art} titel={w.name} untertitel={adresse || null} />

      <section className="rounded-md border border-rand bg-nebel/50 p-4">
        <h2 className="text-sm font-semibold text-navy">{t("kontakt.titel")}</h2>
        {w.wehrfuehrer ? (
          <p className="mt-1 text-sm text-anthrazit/70">
            {t("wehr.wehrfuehrer")}: {w.wehrfuehrer}
          </p>
        ) : null}
        <div className="mt-3">
          <KontaktButton
            telefon={w.telefon}
            email={w.email}
            subject={t("kontakt.betreff")}
          />
        </div>
      </section>

      <section>
        <h2 className="text-sm font-semibold text-navy">{t("detail.fahrzeuge")}</h2>
        {w.fahrzeuge.length === 0 ? (
          <p className="mt-2 text-sm text-anthrazit/60">
            {t("detail.keineFahrzeuge")}
          </p>
        ) : (
          <ul className="mt-3 divide-y divide-rand/60">
            {w.fahrzeuge.map((f) => (
              <li key={f.id} className="flex items-center justify-between gap-3 py-2">
                <div className="min-w-0">
                  <Link
                    href={`/fahrzeuge/${f.id}`}
                    className="font-medium text-navy hover:underline"
                  >
                    {f.name}
                  </Link>
                  {f.funkrufname ? (
                    <p className="truncate text-xs text-anthrazit/60">
                      {f.funkrufname}
                    </p>
                  ) : null}
                </div>
                <StatusBadge status={f.status} />
              </li>
            ))}
          </ul>
        )}
      </section>

      <section>
        <h2 className="text-sm font-semibold text-navy">
          {t("detail.geraeteImHaus")}
        </h2>
        {w.geraeteImHaus.length === 0 ? (
          <p className="mt-2 text-sm text-anthrazit/60">
            {t("detail.keineGeraeteImHaus")}
          </p>
        ) : (
          <ul className="mt-3 divide-y divide-rand/60">
            {w.geraeteImHaus.map((g) => (
              <li key={g.id} className="flex items-center justify-between gap-3 py-2">
                <Link
                  href={`/geraete/${g.id}`}
                  className="font-medium text-navy hover:underline"
                >
                  {g.name}
                </Link>
                <StatusBadge status={g.status} />
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}
