import Link from "next/link";
import { requireWehrAdmin } from "@/lib/auth/guards";
import { listVehiclesForBrigade } from "@/server/data/vehicles";
import { de } from "@/lib/i18n/de";
import { Button } from "@/components/ui/button";
import { StatusBadge } from "@/components/ui/badge";

export default async function FahrzeugeListePage() {
  const s = await requireWehrAdmin();
  const items = await listVehiclesForBrigade(s.user.brigadeId);

  return (
    <div className="space-y-6">
      <header className="flex items-center justify-between">
        <h1 className="font-display text-2xl font-semibold text-navy">
          {de.verwaltung.navFahrzeuge}
        </h1>
        <Button asChild>
          <Link href="/verwaltung/fahrzeuge/neu">
            {de.verwaltung.fahrzeugAnlegen}
          </Link>
        </Button>
      </header>

      {items.length === 0 ? (
        <p className="rounded border border-rand bg-white p-6 text-sm text-anthrazit/60">
          {de.verwaltung.keineFahrzeuge}
        </p>
      ) : (
        <ul className="divide-y divide-rand rounded border border-rand bg-white">
          {items.map((v) => (
            <li
              key={v.id}
              className="flex items-center justify-between gap-4 px-4 py-3"
            >
              <div className="min-w-0">
                <Link
                  href={`/verwaltung/fahrzeuge/${v.id}`}
                  className="font-medium text-navy hover:underline"
                >
                  {v.name}
                </Link>
                <p className="truncate text-sm text-anthrazit/60">
                  {v.funkrufname ?? de.search.keinFunkrufname}
                  {v.templateName ? ` · ${v.templateName}` : ""}
                </p>
              </div>
              <StatusBadge status={v.status} />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}