// Shell: titlebar, sidebar, crumb, Tweaks panel
// Uses window.* components + RS tokens.

const useState = React.useState;
const useEffect = React.useEffect;
const useRef = React.useRef;
const useMemo = React.useMemo;
const useCallback = React.useCallback;

const THEMES = [
  { id: 'delight', label: 'Delight' },
  { id: 'gilt', label: 'Gilt' },
  { id: 'relight', label: 'Relight' },
];

function ThemeSwitch({ theme, onChange }) {
  return (
    <div className="ft-theme-switch" role="tablist" aria-label="Theme">
      {THEMES.map(t => (
        <button key={t.id} className="ft-theme-btn"
          aria-pressed={theme === t.id}
          onClick={() => onChange(t.id)}>{t.label}</button>
      ))}
    </div>
  );
}

function Titlebar({ theme, onTheme, title }) {
  return (
    <div className="ft-titlebar">
      <span className="ft-lights">
        <span className="ft-light red"/>
        <span className="ft-light yellow"/>
        <span className="ft-light green"/>
      </span>
      <span className="ft-titletext">
        <span>FinalTake</span>
        <span className="dot"/>
        <span className="ft-mono" style={{fontSize:10, letterSpacing:'0.1em'}}>{title}</span>
        <span className="badge">mvp · 0.3.2</span>
      </span>
      <ThemeSwitch theme={theme} onChange={onTheme}/>
    </div>
  );
}

const NAV_ITEMS = [
  { id: 'tests',    label: 'Tests',       Ico: IconBeaker, meta: '12', screen: 'tests' },
  { id: 'steps',    label: 'Step library',Ico: IconBook,   meta: '47', screen: 'steps' },
  { id: 'runs',     label: 'Runs',        Ico: IconPlay,   meta: 'live', screen: 'report' },
  { id: 'demos',    label: 'Demos',       Ico: IconFilm,   meta: '8',  screen: 'video' },
];

function Sidebar({ active, onNav, workspace }) {
  return (
    <aside className="ft-sidebar">
      <div className="ft-sb-brand">
        <span className="ft-sb-mark"/>
        <span className="ft-sb-name">Final<em>Take</em></span>
      </div>
      <div className="ft-sb-group-label">Workspace</div>
      {NAV_ITEMS.map(n => (
        <div key={n.id}
          className={`ft-sb-item ${active === n.screen ? 'active' : ''}`}
          onClick={() => onNav(n.screen)}>
          <span className="ico"><n.Ico size={14}/></span>
          <span>{n.label}</span>
          <span className="meta">{n.meta}</span>
        </div>
      ))}
      <div className="ft-sb-group-label">System</div>
      <div className="ft-sb-item" onClick={() => onNav('settings')}>
        <span className="ico"><IconGear size={14}/></span>
        <span>Settings</span>
      </div>
      <div className="ft-sb-workspace">
        <span className="k">Workspace</span>
        <span className="v">{workspace || '~/Documents/FinalTake/isyfoot-lfp'}</span>
        <span className="status">Ready · offline</span>
      </div>
    </aside>
  );
}

function Crumb({ path, right }) {
  return (
    <div className="ft-crumb">
      {path.map((p, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">/</span>}
          {i === path.length - 1
            ? <span className="now">{p.label}</span>
            : <a onClick={p.onClick}>{p.label}</a>}
        </React.Fragment>
      ))}
      <span className="right">{right}</span>
    </div>
  );
}

window.Titlebar = Titlebar;
window.Sidebar = Sidebar;
window.Crumb = Crumb;