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

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 { Button } from "@/components/ui/button";
import { getLocalizedPath } from "@/lib/locale";
import { getRootNavigation } from "@/lib/root-navigation";

type RootDashboardCopy = {
  title: string;
  subtitle: string;
  overview: string;
  maintenance: string;
  uiKit: string;
  portfolio: string;
  media: string;
  logout: string;
  backToSite: string;
};

type RootDashboardShellProps = {
  copy: RootDashboardCopy;
  active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media";
  portfolioChild?: "overview" | "projects" | "new-project" | "categories";
  logoutAction: () => Promise<void>;
  headerTitle: string;
  headerDescription: string;
  headerActions?: ReactNode;
  children: ReactNode;
};

export function RootDashboardShell({
  copy,
  active,
  portfolioChild,
  logoutAction,
  headerTitle,
  headerDescription,
  headerActions,
  children,
}: RootDashboardShellProps) {
  const sidebarItems = getRootNavigation(copy, active, portfolioChild);

  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={headerTitle}
          description={headerDescription}
          actions={headerActions}
        />
      }
    >
      {children}
    </AppShell>
  );
}