"use client";

import type { ReactNode } from "react";

import { AccountDeletionGate } from "@/components/account-deletion-gate";
import { AppSidebar } from "@/components/app-sidebar";
import { LegalConsentGate } from "@/components/legal/legal-consent-gate";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { SessionListProvider, sessionListSidebarModel, useSessionList, useShellRegistration } from "@/hooks/use-session-list";
import "../site-styles";

function AppShell({ children }: { children: ReactNode }) {
  const list = useSessionList();
  const registration = useShellRegistration();
  const { sessions, account } = sessionListSidebarModel(list, registration);

  return (
    <SidebarProvider escapeBlocked={registration?.escapeBlocked ?? false}>
      <main className="chat-app">
        <AppSidebar
          sessions={sessions}
          activeSessionId={registration?.activeSessionId ?? null}
          openingSessionId={registration?.openingSessionId ?? null}
          openErrorSessionId={registration?.openErrorSessionId ?? null}
          openErrorMessage={registration?.openErrorMessage ?? ""}
          account={account}
          settled={list.settled}
          signedOut={list.signedOut}
          controls={registration?.controls}
        />
        <SidebarInset
          className={registration?.insetClassName ?? "chat-panel secondary-panel"}
          inert={registration?.insetInert}
        >
          {children}
        </SidebarInset>
        <LegalConsentGate signedIn={Boolean(account) && !list.signedOut} />
      </main>
      <AccountDeletionGate signedIn={Boolean(account)} />
    </SidebarProvider>
  );
}

export default function AppLayout({ children }: { children: ReactNode }) {
  return (
    <SessionListProvider>
      <AppShell>{children}</AppShell>
    </SessionListProvider>
  );
}