import type { Metadata } from "next";

import { CodesList } from "@/components/codes-list";
import { can } from "@/lib/auth/policy";
import { getSettings } from "@/lib/settings";
import { requirePageActor } from "@/lib/auth/guard";

export const metadata: Metadata = { title: "Meine Codes" };

export const dynamic = "force-dynamic";

export default async function MyCodesPage() {
  const actor = await requirePageActor();

  // Breiter als die übrigen Seiten: Die Liste soll viele Projekte
  // nebeneinander zeigen können.
  // Der Kurz-Link darf je Gruppe verschieden bearbeitbar sein; hier zaehlt,
  // ob es irgendwo erlaubt ist. Die Route prueft es beim Speichern erneut,
  // dann mit der Gruppe des betroffenen Codes.
  const { editorsMaySetSlug } = await getSettings();
  const maySetSlug = can(actor, "codes:slug", { editorsMaySetSlug });

  return (
    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-10">
      <div className="mb-7">
        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
          Meine Codes
        </h1>
        <p className="mt-2 text-slate-600">
          Dynamische Codes mit ihrem aktuellen Ziel und der Anzahl der Scans,
          dazu abgelegte statische Codes. Über die Auswahl „Nach Art filtern“
          lässt sich die Liste auf eine der beiden Arten einschränken.
        </p>
      </div>

      <CodesList maySetSlug={maySetSlug} />
    </div>
  );
}