import { ArrowLeft, LogOut } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";

import { AppHeader } from "@/components/layout/app-header";
import { AppShell } from "@/components/layout/app-shell";
import { AppSidebar } from "@/components/layout/app-sidebar";
import { ThemeToggle } from "@/components/theme-toggle";
import { getLocalizedPath } from "@/lib/locale";
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
import { getRootNavigation } from "@/lib/root-navigation";
import { Button } from "@/components/ui/button";
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");
  }

  const sidebarItems = getRootNavigation(copy, "ui-kit");

  return (
    <AppShell
      sidebar={
        <AppSidebar
          title={copy.title}
          description={copy.subtitle}
          items={sidebarItems}
          footer={
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <ThemeToggle ariaLabel="Theme wechseln" />
              </div>
              <Button asChild variant="outline" className="w-full justify-start">
                <Link href={getLocalizedPath("de")}>
                  <ArrowLeft className="h-4 w-4" />
                  {copy.backToSite}
                </Link>
              </Button>
              <form action={logoutAction}>
                <Button type="submit" variant="destructive" className="w-full justify-start">
                  <LogOut className="h-4 w-4" />
                  {copy.logout}
                </Button>
              </form>
            </div>
          }
        />
      }
      header={<AppHeader title={copy.title} description={copy.subtitle} />}
    >
      <UiKitShowcase localeKey="de" />
    </AppShell>
  );
}