// app/groups/page.tsx
// Groups management page. Lists all groups, lets users create/edit/delete groups.

import { fetchCollection } from "@/lib/pb";
import type { YsterbaardGroup } from "@/lib/types";
import PageHeader from "@/components/PageHeader";
import Link from "next/link";
import GroupsExplorer from "@/components/GroupsExplorer";

export const dynamic = "force-dynamic";

async function loadGroups() {
  return fetchCollection<YsterbaardGroup>("groups", {
    page: 1,
    perPage: 500,
    sort: "name",
  });
}

export default async function GroupsPage() {
  const groups = await loadGroups();

  return (
    <>
      <PageHeader
        eyebrow="Settings"
        title="Groups"
        subtitle="Organise companies into named groups for easier management and reporting."
        action={
          <Link
            href="/companies"
            className="inline-flex items-center px-4 py-2.5 rounded-md border border-border bg-surface text-fg text-sm font-semibold no-underline hover:bg-surface-warm transition-colors"
          >
            ← Browse companies
          </Link>
        }
      />
      <div className="container-x py-10">
        <GroupsExplorer initial={groups} />
      </div>
    </>
  );
}