'use client';

import { ReactNode } from 'react';
import { Sidebar } from './sidebar';
import { ModelStatusBar } from '../features/models';
import { VersionChecker } from './version-checker';
import { LayoutProvider } from './layout-context';

/**
 * AppLayout - Pure inline style layout (no CSS modules)
 * Using inline styles to avoid any CSS loading/cascade issues
 */

interface AppLayoutProps {
  children: ReactNode;
}

export function AppLayout({ children }: AppLayoutProps) {
  return (
    <LayoutProvider>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '16rem 1fr',
        gridTemplateRows: '1fr auto',
        gridTemplateAreas: '"sidebar main" "sidebar footer"',
        minHeight: '100vh',
        width: '100vw',
        overflowX: 'hidden',
      }}>
        <aside style={{
          gridArea: 'sidebar',
          position: 'sticky',
          top: 0,
          height: '100vh',
          overflowY: 'auto',
          borderRight: '1px solid var(--color-border)',
          backgroundColor: 'var(--color-card)',
          zIndex: 10000,
        }}>
          <Sidebar />
        </aside>
        <main style={{
          gridArea: 'main',
          minHeight: '100vh',
          maxWidth: 'calc(100vw - 16rem)',
          overflowX: 'hidden',
          backgroundColor: 'var(--color-background)',
        }}>
          {children}
        </main>
        <footer style={{
          gridArea: 'footer',
          minHeight: '3rem',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          padding: '0 1rem',
          borderTop: '1px solid var(--color-border)',
          backgroundColor: 'var(--color-card)',
        }}>
          <div style={{ flex: 1 }}>
            <ModelStatusBar />
          </div>
          <div style={{ flex: 'none', marginLeft: '1rem' }}>
            <VersionChecker />
          </div>
        </footer>
      </div>
    </LayoutProvider>
  );
}