/* Surgr App — App Shell (mobile frame) */

const { TabBar: ShellTabBar } = window.SurgrAppKit;

function AppShell({ children, activeTab, onTabChange, hideTabBar = false }) {
  return (
    <div style={{
      width: 390,
      height: 844,
      maxHeight: '90vh',
      background: 'var(--surgr-bg)',
      borderRadius: 36,
      border: '1px solid var(--surgr-border)',
      boxShadow: '0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(200,255,0,0.04)',
      position: 'relative',
      overflow: 'hidden',
      fontFamily: 'var(--surgr-font-body)',
    }}>
      {/* Status bar (faux) */}
      <div style={{
        position: 'absolute',
        top: 0, left: 0, right: 0,
        height: 44,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 28px',
        zIndex: 50,
        color: 'var(--surgr-text)',
        fontSize: 14,
        fontWeight: 600,
        fontFamily: 'var(--surgr-font-body)',
        pointerEvents: 'none',
      }}>
        <span>9:41</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <svg width="18" height="11" viewBox="0 0 18 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="0.5"/><rect x="5" y="4" width="3" height="7" rx="0.5"/><rect x="10" y="2" width="3" height="9" rx="0.5"/><rect x="15" y="0" width="3" height="11" rx="0.5"/></svg>
          <svg width="18" height="11" viewBox="0 0 18 11" fill="none" stroke="currentColor" strokeWidth="1"><rect x="0.5" y="2" width="14" height="7" rx="2"/><rect x="2" y="3.5" width="9" height="4" rx="1" fill="currentColor"/><rect x="15.5" y="4" width="1.5" height="3" fill="currentColor"/></svg>
        </span>
      </div>

      {/* Scrollable content area */}
      <div style={{
        position: 'absolute',
        top: 44,
        left: 0,
        right: 0,
        bottom: hideTabBar ? 0 : 86,
        overflowY: 'auto',
        WebkitOverflowScrolling: 'touch',
      }}>
        {children}
      </div>

      <ShellTabBar active={activeTab} onChange={onTabChange} hidden={hideTabBar}/>
    </div>
  );
}

window.SurgrAppKit.AppShell = AppShell;