import type { ReactNode } from "react";
import {
  ArrowLeft,
  FolderKanban,
  Globe2,
  ImageIcon,
  LayoutDashboard,
  LogOut,
  PlusSquare,
  ShieldAlert,
  SwatchBook,
  Tags,
} from "lucide-react";
import Link from "next/link";

import { DashboardLayout } from "@/components/dashboard/dashboard-layout";
import { MotionFade } from "@/components/motion-fade";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import { getSiteSettingsMediaBindings } from "@/lib/app-config";
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;
  siteSettings: string;
  logout: string;
  backToSite: string;
};

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

export async function RootDashboardShell({
  copy,
  active,
  portfolioChild,
  logoutAction,
  headerTitle,
  headerDescription,
  headerActions,
  sidebarTopContent,
  toolbar,
  children,
}: RootDashboardShellProps) {
  const mediaBindings = await getSiteSettingsMediaBindings();
  const sidebarItems = getRootNavigation(copy, active, portfolioChild).filter(
    (item) => item.href !== "/root/maintenance" && item.href !== "/root/ui-kit",
  );
  const headerIcon =
    active === "overview"
      ? LayoutDashboard
      : active === "maintenance"
        ? ShieldAlert
        : active === "ui-kit"
          ? SwatchBook
          : active === "site-settings"
            ? Globe2
          : active === "media"
            ? ImageIcon
            : portfolioChild === "categories"
              ? Tags
              : portfolioChild === "new-project"
                ? PlusSquare
                : FolderKanban;
  const sharedActions = (
    <>
      <ThemeToggle ariaLabel="Theme wechseln" />
    </>
  );

  return (
    <DashboardLayout
      title={headerTitle}
      description={headerDescription}
      icon={headerIcon}
      items={sidebarItems}
      sidebarIconSrc={mediaBindings.favicon?.url}
      sidebarTop={
        <div className="space-y-2">
          <Button asChild variant="outline" className="w-full justify-between">
            <Link href={getLocalizedPath("de")} target="_blank" rel="noreferrer">
              {copy.backToSite}
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          {sidebarTopContent}
        </div>
      }
      sidebarFooter={
        <>
          <Button
            asChild
            variant={active === "maintenance" ? "default" : "outline"}
            className="w-full justify-between"
          >
            <Link href="/root/maintenance">
              {copy.maintenance}
              <ShieldAlert className="h-4 w-4" />
            </Link>
          </Button>
          <Button
            asChild
            variant={active === "ui-kit" ? "default" : "outline"}
            className="w-full justify-between"
          >
            <Link href="/root/ui-kit">
              {copy.uiKit}
              <SwatchBook className="h-4 w-4" />
            </Link>
          </Button>
          <form action={logoutAction}>
            <Button type="submit" variant="ghost" className="w-full justify-between text-destructive hover:bg-destructive/10 hover:text-destructive">
              {copy.logout}
              <LogOut className="h-4 w-4" />
            </Button>
          </form>
        </>
      }
      headerActions={
        <div className="flex flex-wrap items-center justify-end gap-2">
          {headerActions}
          {sharedActions}
        </div>
      }
    >
      <div className="space-y-6">
        {toolbar ? <MotionFade delay={0.05}>{toolbar}</MotionFade> : null}
        {children}
      </div>
    </DashboardLayout>
  );
}