import type { ReactNode } from "react";
import { Menu, type LucideIcon } from "lucide-react";

import { DashboardSidebar } from "@/components/dashboard/sidebar";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import type { RootNavItem } from "@/lib/root-navigation";

type DashboardLayoutProps = {
  title: string;
  description: string;
  icon?: LucideIcon;
  items: RootNavItem[];
  sidebarIconSrc?: string;
  sidebarTop?: ReactNode;
  sidebarFooter?: ReactNode;
  headerActions?: ReactNode;
  children: ReactNode;
};

export function DashboardLayout({
  title,
  description,
  icon: Icon,
  items,
  sidebarIconSrc,
  sidebarTop,
  sidebarFooter,
  headerActions,
  children,
}: DashboardLayoutProps) {
  return (
    <div className="min-h-screen bg-muted/30">
      <div className="grid min-h-screen lg:grid-cols-[280px_minmax(0,1fr)]">
        <aside className="hidden border-r border-border/70 bg-sidebar/60 lg:sticky lg:top-0 lg:block lg:h-screen">
          <DashboardSidebar
            items={items}
            iconSrc={sidebarIconSrc}
            top={sidebarTop}
            footer={sidebarFooter}
          />
        </aside>

        <div className="flex min-w-0 flex-1 flex-col">
          <header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-border/70 bg-background/95 px-4 backdrop-blur lg:px-6">
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="outline" size="icon" className="lg:hidden">
                  <Menu className="h-4 w-4" />
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="p-0">
                <SheetHeader className="sr-only">
                  <SheetTitle>{title}</SheetTitle>
                  <SheetDescription>{description}</SheetDescription>
                </SheetHeader>
                <DashboardSidebar
                  items={items}
                  iconSrc={sidebarIconSrc}
                  top={sidebarTop}
                  footer={sidebarFooter}
                />
              </SheetContent>
            </Sheet>

            <div className="flex min-w-0 flex-1 items-center gap-3">
              {Icon ? (
                <div className="hidden rounded-lg border border-border/70 bg-muted/50 p-2 text-muted-foreground sm:flex">
                  <Icon className="h-4 w-4" />
                </div>
              ) : null}
              <div className="min-w-0">
                <p className="truncate text-lg font-semibold text-foreground">{title}</p>
                <p className="truncate text-sm text-muted-foreground">{description}</p>
              </div>
            </div>

            {headerActions ? (
              <div className="flex items-center gap-2">{headerActions}</div>
            ) : null}
          </header>

          <main className="flex-1 p-4 lg:p-6">{children}</main>
        </div>
      </div>
    </div>
  );
}