"use client";

import React from "react";
import { IconContext } from "@phosphor-icons/react";

import { AppSidebar } from "@/components/app-sidebar";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";
import { ThemeCustomizer, ThemeCustomizerTrigger } from "@/components/theme-customizer";
import { PrefsInitializer } from "@/components/theme-customizer/prefs-initializer";
import { useSidebarConfig } from "@/hooks/use-sidebar-config";
import type { ThemePrefs } from "@/lib/appwrite/theme-prefs-actions";

export type ShellUser = {
  id: string;
  name: string;
  email: string;
};

export type ShellCompany = {
  id: string;
  name: string;
  logoUrl?: string | null;
};

export function DashboardShell({
  user,
  company,
  children,
  initialPrefs,
  pendingMatchCount = 0,
}: {
  user: ShellUser;
  company: ShellCompany;
  children: React.ReactNode;
  initialPrefs: ThemePrefs;
  pendingMatchCount?: number;
}) {
  const [themeCustomizerOpen, setThemeCustomizerOpen] = React.useState(false);
  const { config } = useSidebarConfig();

  return (
    <IconContext.Provider value={{ weight: "bold" }}>
    <SidebarProvider
      style={
        {
          "--sidebar-width": "16rem",
          "--sidebar-width-icon": "3rem",
          "--header-height": "calc(var(--spacing) * 14)",
        } as React.CSSProperties
      }
      className={config.collapsible === "none" ? "sidebar-none-mode" : ""}
    >
      <PrefsInitializer prefs={initialPrefs} />

      {config.side === "left" ? (
        <>
          <AppSidebar
            user={user}
            company={company}
            variant={config.variant}
            collapsible={config.collapsible}
            side={config.side}
            pendingMatchCount={pendingMatchCount}
          />
          <SidebarInset>
            <SiteHeader company={company} />
            <div className="flex flex-1 flex-col min-h-0">{children}</div>
            <SiteFooter />
          </SidebarInset>
        </>
      ) : (
        <>
          <SidebarInset>
            <SiteHeader company={company} />
            <div className="flex flex-1 flex-col min-h-0">{children}</div>
            <SiteFooter />
          </SidebarInset>
          <AppSidebar
            user={user}
            company={company}
            variant={config.variant}
            collapsible={config.collapsible}
            side={config.side}
            pendingMatchCount={pendingMatchCount}
          />
        </>
      )}

      <ThemeCustomizerTrigger onClick={() => setThemeCustomizerOpen(true)} />
      <ThemeCustomizer
        open={themeCustomizerOpen}
        onOpenChange={setThemeCustomizerOpen}
        initialPrefs={initialPrefs}
      />
    </SidebarProvider>
    </IconContext.Provider>
  );
}