// Main pane — topbar with breadcrumbs + content
const { useState: useStateMain } = React;

function TopBar({ activeNav, slot, workspaceName }) {
  const item = NAV_ITEMS.find(n => n.id === activeNav);
  return (
    <header className="topbar">
      <div className="crumbs">
        <button className="crumb"><span>{workspaceName || 'Workspace'}</span></button>
        <span className="crumb-sep">/</span>
        <button className="crumb current">{item.label}</button>
      </div>
      {slot && <div className="topbar-slot">{slot}</div>}
    </header>
  );
}

function Skeleton({ activeNav }) {
  // Vary the skeleton shape per-section so it feels like the page is loading
  const item = NAV_ITEMS.find(n => n.id === activeNav);
  const ROWS = 14;
  return (
    <div className="content">
      <div className="skeleton-page">
        <div className="sk sk-h1"/>
        <div className="sk sk-sub"/>
        <div className="sk-toolbar">
          <div className="sk sk-pill" style={{width: 88}}/>
          <div className="sk sk-pill" style={{width: 68}}/>
          <div className="sk sk-pill" style={{width: 96}}/>
          <div style={{flex: 1}}/>
          <div className="sk sk-pill" style={{width: 110}}/>
        </div>
        <div style={{border:'1px solid var(--border)', borderRadius: 'var(--r-md)', overflow: 'hidden'}}>
          <div style={{display:'flex', gap: 12, padding: '10px 14px', borderBottom: '1px solid var(--border)', background: 'var(--bg-sidebar)'}}>
            <div className="sk sk-line" style={{width: 100}}/>
            <div className="sk sk-line" style={{width: 140}}/>
            <div className="sk sk-line" style={{width: 80, marginLeft:'auto'}}/>
            <div className="sk sk-line" style={{width: 60}}/>
            <div className="sk sk-line" style={{width: 70}}/>
          </div>
          {Array.from({length: ROWS}).map((_, i) => (
            <div key={i} className="sk-row" style={{padding:'12px 14px', borderBottom: i === ROWS-1 ? 'none' : '1px solid var(--border)'}}>
              <div className="sk sk-circle"/>
              <div className="sk sk-line" style={{width: 80 + (i*13) % 120}}/>
              <div className="sk sk-line" style={{width: 140 + (i*7) % 160, opacity: 0.7}}/>
              <div style={{flex: 1}}/>
              <div className="sk sk-pill" style={{width: 60 + (i*5) % 30, height: 18}}/>
              <div className="sk sk-line" style={{width: 56}}/>
              <div className="sk sk-circle" style={{width: 18, height: 18, borderRadius: 9}}/>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TopBar, Skeleton });