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

export default async function GeraeteListePage() {
  const s = await requireWehrAdmin();
  const items = await listEquipmentForBrigade(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.navGeraete}
        </h1>
        <Button asChild>
          <Link href="/verwaltung/geraete/neu">
            {de.verwaltung.geraetAnlegen}
          </Link>
        </Button>
      </header>

      {items.length === 0 ? (
        <p className="rounded border border-rand bg-white p-6 text-sm text-anthrazit/60">
          {de.verwaltung.keineGeraete}
        </p>
      ) : (
        <ul className="divide-y divide-rand rounded border border-rand bg-white">
          {items.map((e) => (
            <li
              key={e.id}
              className="flex items-center justify-between gap-4 px-4 py-3"
            >
              <div className="min-w-0">
                <Link
                  href={`/verwaltung/geraete/${e.id}`}
                  className="font-medium text-navy hover:underline"
                >
                  {e.name}
                </Link>
                <p className="truncate text-sm text-anthrazit/60">
                  {e.categoryName} ·{" "}
                  {e.vehicleName ?? de.verwaltung.imGeraetehaus}
                </p>
              </div>
              <div className="flex items-center gap-2">
                {e.vehicleId ? null : (
                  <Badge>{de.verwaltung.imGeraetehaus}</Badge>
                )}
                <StatusBadge status={e.status} />
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
