import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-shell{display:flex;min-height:100vh;background:var(--surface-page);}
.nbl-shell__sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);background:var(--steel-900);border-right:1px solid var(--steel-800);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;z-index:100;scrollbar-width:thin;scrollbar-color:var(--steel-700) transparent;}
.nbl-shell__sidebar::-webkit-scrollbar{width:4px;}
.nbl-shell__sidebar::-webkit-scrollbar-track{background:transparent;}
.nbl-shell__sidebar::-webkit-scrollbar-thumb{background:var(--steel-700);border-radius:2px;}
.nbl-shell__main{margin-left:var(--sidebar-width);display:flex;flex-direction:column;flex:1;min-width:0;}
.nbl-shell__topbar{position:sticky;top:0;z-index:50;height:var(--topbar-height);background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-default);display:flex;align-items:center;padding:0 24px;flex-shrink:0;}
.nbl-shell__content{flex:1;padding:24px;}
`;

inject('nbl-shell-css', css);

export interface AppShellProps {
  sidebar?: React.ReactNode;
  topbar?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

export function AppShell({ sidebar, topbar, children, className = '' }: AppShellProps) {
  inject('nbl-shell-css', css);
  const cls = ['nbl-shell', className].filter(Boolean).join(' ');

  return (
    <div className={cls}>
      {sidebar && (
        <aside className="nbl-shell__sidebar">
          {sidebar}
        </aside>
      )}
      <main className={sidebar ? 'nbl-shell__main' : 'nbl-shell__main'} style={!sidebar ? { marginLeft: 0 } : undefined}>
        {topbar && (
          <header className="nbl-shell__topbar">
            {topbar}
          </header>
        )}
        <div className="nbl-shell__content">
          {children}
        </div>
      </main>
    </div>
  );
}