import { ReactNode, useState } from 'react';
import { AppSidebar } from './AppSidebar';
import { AppHeader } from './AppHeader';
import { LayoutSubheaderContext } from './LayoutSubheaderContext';
import { SearchManualInterventionBar } from './SearchManualInterventionBar';
import { StandardizationStatusBar } from './StandardizationStatusBar';
import { SearchManualInterventionProvider } from '@/contexts/SearchManualInterventionContext';

export function AppLayout({ children }: { children: ReactNode }) {
  const [subheader, setSubheader] = useState<ReactNode>(null);

  return (
    <LayoutSubheaderContext.Provider value={{ setSubheader }}>
      <SearchManualInterventionProvider>
        <div className="flex h-screen w-full overflow-hidden bg-background dark:bg-[hsl(220_14%_96%)]">
          <AppSidebar />
          <div className="light-panel flex flex-col flex-1 min-w-0 gap-3 bg-background px-4 py-4">
            <AppHeader />
            <StandardizationStatusBar />
            <SearchManualInterventionBar />
            {subheader && (
              <div className="shrink-0 px-6 pb-1">{subheader}</div>
            )}
            <main className="flex-1 min-h-0 flex flex-col overflow-hidden rounded-[24px] bg-white p-6 shadow-sm">
              <div className="flex-1 min-h-0 overflow-auto">{children}</div>
            </main>
          </div>
        </div>
      </SearchManualInterventionProvider>
    </LayoutSubheaderContext.Provider>
  );
}
