import Link from "next/link";
import type { Metadata } from "next";
import { requireUser } from "@/lib/auth";
import { getSettings } from "@/lib/settings";
import { AppShell } from "@/components/AppShell";
import { NewUniverseForm } from "@/components/universes/UniverseTools";

export const metadata: Metadata = { title: "Neues Universum" };

export default async function NewUniversePage() {
  const user = await requireUser("/universen/neu");
  const settings = await getSettings();

  return (
    <AppShell user={user} instanceName={settings.instanceName}>
      <div className="mx-auto max-w-xl">
        <header className="mb-6">
          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Neues Universum</h1>
          <p className="mt-1 text-sm text-[var(--fl-muted)]">
            Ein Universum bündelt Filme und Serien, die zusammengehören. Die
            Erscheinungsreihenfolge ist von Anfang an dabei; weitere Reihenfolgen legst du
            danach an.
          </p>
        </header>

        <div className="fl-card p-5 sm:p-6">
          <NewUniverseForm />
        </div>

        <p className="mt-6 text-sm">
          <Link href="/universen" className="text-[var(--fl-faint)] hover:text-[var(--fl-muted)]">
            ← Zurück zur Übersicht
          </Link>
        </p>
      </div>
    </AppShell>
  );
}