"use client";

import type { User } from "next-auth";
import { usePathname } from "next/navigation";
import { TopNavbar } from "@/components/top-navbar";

type CustomLink = {
  id: string;
  name: string;
  url: string;
  order: number;
  toolboxGroup: number;
};

type TutorialVideo = {
  id: string;
  title: string;
  videoUrl: string;
  coverUrl: string | null;
  description: string | null;
  order: number;
};

export type ChatShellChromeProps = {
  children: React.ReactNode;
  user?: User;
  siteName: string;
  siteLogo?: string;
  siteLogoDark?: string;
  isAdmin: boolean;
  settingsHref?: string | null;
  customLinks: CustomLink[];
  toolbox1Name: string;
  toolbox1Enabled: boolean;
  toolbox2Name: string;
  toolbox2Enabled: boolean;
  tutorialVideos: TutorialVideo[];
  tutorialEnabled: boolean;
  rankingEnabled: boolean;
  productPlanningEnabled: boolean;
  agentEnabled: boolean;
  videoCanvasEnabled: boolean;
};

export function ChatShellChrome({
  children,
  user,
  siteName,
  siteLogo,
  siteLogoDark,
  isAdmin,
  settingsHref = null,
  customLinks,
  toolbox1Name,
  toolbox1Enabled,
  toolbox2Name,
  toolbox2Enabled,
  tutorialVideos,
  tutorialEnabled,
  rankingEnabled,
  productPlanningEnabled,
  agentEnabled,
  videoCanvasEnabled,
}: ChatShellChromeProps) {
  const pathname = usePathname();
  const hideSidebarChrome =
    pathname === "/gallery" || pathname.startsWith("/gallery/");

  return (
    <>
      {hideSidebarChrome ? null : (
        <TopNavbar
          agentEnabled={agentEnabled}
          customLinks={customLinks}
          isAdmin={isAdmin}
          productPlanningEnabled={productPlanningEnabled}
          rankingEnabled={rankingEnabled}
          settingsHref={settingsHref}
          siteLogo={siteLogo}
          siteLogoDark={siteLogoDark}
          siteName={siteName}
          toolbox1Enabled={toolbox1Enabled}
          toolbox1Name={toolbox1Name}
          toolbox2Enabled={toolbox2Enabled}
          toolbox2Name={toolbox2Name}
          tutorialEnabled={tutorialEnabled}
          tutorialVideos={tutorialVideos}
          videoCanvasEnabled={videoCanvasEnabled}
        />
      )}
      <div
        className={
          hideSidebarChrome
            ? "flex h-svh w-full overflow-hidden"
            : "flex h-svh w-full overflow-hidden pl-16 [--sidebar-offset:4rem]"
        }
      >
        <main className="h-full min-w-0 flex-1">{children}</main>
      </div>
    </>
  );
}