"use client";

import React from "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 { UserPrefs as ThemePrefs } from "@/lib/appwrite/user-prefs-actions";

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

export type TenantKind = "lab" | "clinic";

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

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

  return (
    <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}
          />
          <SidebarInset>
            <SiteHeader company={company} unreadCount={unreadCount} />
            <div className="flex flex-1 flex-col">
              <div className="@container/main flex flex-1 flex-col gap-2">
                <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">{children}</div>
              </div>
            </div>
            <SiteFooter />
          </SidebarInset>
        </>
      ) : (
        <>
          <SidebarInset>
            <SiteHeader company={company} unreadCount={unreadCount} />
            <div className="flex flex-1 flex-col">
              <div className="@container/main flex flex-1 flex-col gap-2">
                <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">{children}</div>
              </div>
            </div>
            <SiteFooter />
          </SidebarInset>
          <AppSidebar
            user={user}
            company={company}
            variant={config.variant}
            collapsible={config.collapsible}
            side={config.side}
          />
        </>
      )}

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