import type { Metadata } from "next";
import Link from "next/link";

import { GroupAdmin } from "@/components/group-admin";
import { Icon } from "@/components/icons";
import { requirePageActor } from "@/lib/auth/guard";
import { can } from "@/lib/auth/policy";

export const metadata: Metadata = { title: "Gruppen" };
export const dynamic = "force-dynamic";

export default async function GroupsPage() {
  // Bewusst nur „angemeldet“: ein Gruppen-Administrator darf seine eigene
  // Gruppe pflegen, auch ohne Rechte an der Installation.
  const actor = await requirePageActor();
  const canCreate = can(actor, "instance:manage");

  return (
    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-10">
      <Link
        href={canCreate ? "/verwaltung" : "/"}
        className="mb-5 inline-flex items-center gap-1.5 rounded-lg text-sm font-medium text-slate-600 transition-colors hover:text-slate-900"
      >
        <Icon name="arrowLeft" className="size-4" />
        {canCreate ? "Verwaltung" : "Zur Typ-Auswahl"}
      </Link>

      <div className="mb-7">
        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
          Gruppen
        </h1>
        <p className="mt-2 text-slate-600">
          Eine Gruppe bündelt Benutzer und die Codes, die ihnen gehören. Jedes
          Mitglied hat darin eine Rolle: Administrator, Bearbeiter oder
          Betrachter.
        </p>
      </div>

      <GroupAdmin canCreate={canCreate} />
    </div>
  );
}