import { redirect } from "next/navigation";

import { MotionFade } from "@/components/motion-fade";
import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
import { UiKitShowcase } from "@/components/ui/ui-kit-showcase";

export const dynamic = "force-dynamic";

const copy = {
  title: "UI Kit",
  subtitle: "Globale Referenz fuer das visuelle System im Root Bereich.",
  maintenance: "Wartungsmodus",
  overview: "Uebersicht",
  uiKit: "UI Kit",
  media: "Media",
  portfolio: "Portfolio",
  logout: "Ausloggen",
  backToSite: "Zur Website",
};

export default async function RootUiKitPage() {
  const authenticated = isAdminAuthenticated();

  if (!authenticated) {
    redirect("/root");
  }

  async function logoutAction() {
    "use server";

    clearAdminSessionCookie();
    redirect("/root");
  }

  return (
    <RootDashboardShell
      copy={copy}
      active="ui-kit"
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
    >
      <MotionFade delay={0.1}>
        <UiKitShowcase localeKey="de" />
      </MotionFade>
    </RootDashboardShell>
  );
}