import { useState, type ReactNode } from 'react';
import type { DashboardShellProps } from './types.js';
import { Sidebar } from './Sidebar.js';
import { TopBar } from './TopBar.js';

export function DashboardShell({
  productName,
  logo,
  version,
  nav,
  pathname: externalPathname,
  user,
  features = {},
  onSignOut,
  onNavigate,
  sidebarFooter,
  topBarActions,
  children,
}: DashboardShellProps): ReactNode {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  // Use external pathname or default to '/'
  const pathname = externalPathname ?? '/';

  return (
    <div
      data-testid="bl-dashboard-shell"
      style={{
        display: 'flex',
        minHeight: '100vh',
        background: 'var(--bl-shell-bg, var(--color-background, #f9fafb))',
      }}
    >
      {/* Sidebar */}
      <Sidebar
        productName={productName}
        logo={logo}
        version={version}
        nav={nav}
        pathname={pathname}
        features={features}
        onNavigate={onNavigate}
        footer={sidebarFooter}
        collapsed={sidebarCollapsed}
        onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
      />

      {/* Main content area */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {/* Top bar */}
        <TopBar
          user={user}
          features={features}
          onSignOut={onSignOut}
          onNavigate={onNavigate}
          actions={topBarActions}
        />

        {/* Page content */}
        <main
          data-testid="bl-shell-main"
          style={{
            flex: 1,
            padding: '24px 32px',
            overflow: 'auto',
          }}
        >
          {children}
        </main>
      </div>
    </div>
  );
}