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

import { BrandingAdmin } from "@/components/branding-admin";
import { Icon } from "@/components/icons";
import { requirePagePermission } from "@/lib/auth/guard";
import { getBranding } from "@/lib/branding";

export const metadata: Metadata = { title: "Erscheinungsbild" };

export const dynamic = "force-dynamic";

export default async function BrandingPage() {
  await requirePagePermission("instance:manage");
  const branding = await getBranding();

  return (
    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-10">
      <Link
        href="/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" />
        Zur Verwaltung
      </Link>

      <div className="mb-7">
        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
          Erscheinungsbild
        </h1>
        <p className="mt-2 text-slate-600">
          Name, Logo, Favicon und Farbe der Oberfläche. Die Einstellungen
          gelten für die ganze Installation.
        </p>
        <p className="mt-2 text-sm text-slate-500">
          Die öffentlichen Landingpages übernehmen die Farbe und das Favicon,
          aber weder Logo noch Navigation — wer einen Code scannt, soll die
          Seite des Inhalts sehen und nicht die einer Verwaltungssoftware.
        </p>
      </div>

      <BrandingAdmin
        initial={{
          appName: branding.appName,
          footerText: branding.footerText,
          accentColor: branding.accentColor,
          logoUploadId: branding.logoUploadId,
          faviconUploadId: branding.faviconUploadId,
        }}
      />
    </div>
  );
}