import { useState, type ReactNode } from 'react';
import { Flex } from 'antd';
import { Topbar } from './Topbar';
import { Sidebar } from './Sidebar';

interface AppShellProps {
  children: ReactNode;
}

/**
 * AppShell canônico do SAR — topbar 80 + sidebar 260 + área de conteúdo.
 * Layout para cockpits Sandra/Daniel/Alice (desktop-first).
 * Variante mobile (Rafael) com bottom nav virá em ShellMobile separado.
 */
export function AppShell({ children }: AppShellProps) {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [_sidebarOpen, setSidebarOpen] = useState(true);

  return (
    <Flex vertical style={{ minHeight: '100vh', background: 'var(--bg-body)' }}>
      <Topbar onToggleSidebar={() => setSidebarOpen((v) => !v)} />
      <Flex flex={1}>
        <Sidebar />
        <main
          style={{
            flex: 1,
            padding: 'var(--space-xl)',
            overflow: 'auto',
            maxWidth: '100%',
          }}
        >
          {children}
        </main>
      </Flex>
    </Flex>
  );
}
