/* =============================================================
   Hans — flagship surface
   The AI showrunner agent
   ============================================================= */

const { useState, useRef, useEffect } = React;

// ---------- TOP BAR ----------
function TopBar({ worldTitle, phase, status }) {
  return (
    <header className="hans-topbar">
      <div className="hans-topbar__left">
        <div className="hans-logo">
          <span className="hans-logo__dot" />
          <span className="hans-logo__name">Hans</span>
          <span className="hans-logo__sub">/ showrunner</span>
        </div>
      </div>
      <div className="hans-topbar__center">
        <div className="ll-tag" style={{ color: 'var(--ll-stone)' }}>WORLD</div>
        <div className="hans-topbar__title">{worldTitle}</div>
      </div>
      <div className="hans-topbar__right">
        <span className="hans-chip">PHASE {String(phase).padStart(2, '0')}</span>
        <span className="hans-chip hans-chip--live">
          <span className="hans-chip__dot" />
          {status}
        </span>
        <button className="hans-iconbtn" aria-label="More"><i className="ph ph-dots-three-vertical" /></button>
      </div>
    </header>
  );
}

// ---------- SIDEBAR ----------
function Sidebar({ worlds, activeId, onSelect, onNew }) {
  return (
    <aside className="hans-sidebar">
      <button className="hans-newworld" onClick={onNew}>
        <i className="ph ph-plus" />
        <span>New world</span>
      </button>

      <div className="hans-sidebar__section">
        <div className="ll-tag hans-sidebar__label">YOUR WORLDS</div>
        <ul className="hans-worldlist">
          {worlds.map(w => (
            <li
              key={w.id}
              className={`hans-worldlist__item ${w.id === activeId ? 'is-active' : ''}`}
              onClick={() => onSelect(w.id)}
            >
              <span className="hans-worldlist__title">{w.title}</span>
              <span className="hans-worldlist__meta">{w.phase}</span>
            </li>
          ))}
        </ul>
      </div>

      <div className="hans-sidebar__footer">
        <div className="ll-tag" style={{ color: 'var(--ll-silt)' }}>FBRC.AI / LIVINGLAB</div>
        <div className="hans-sidebar__build">build 2026.04.21</div>
      </div>
    </aside>
  );
}

// ---------- PHASE RAIL ----------
function PhaseRail({ current = 3 }) {
  const phases = [
    'Brief', 'World', 'Simulate', 'Story', 'Economics',
    'Venue', 'Permits', 'Build', 'Hire', 'Demand',
    'Live', 'Data', 'Next'
  ];
  return (
    <div className="hans-phaserail">
      <div className="ll-tag hans-phaserail__label">JOURNEY · 13 PHASES</div>
      <ol className="hans-phaserail__list">
        {phases.map((p, i) => {
          const n = i + 1;
          const state = n < current ? 'done' : n === current ? 'live' : 'todo';
          return (
            <li key={p} className={`hans-phaserail__item is-${state}`}>
              <span className="hans-phaserail__n">{String(n).padStart(2, '0')}</span>
              <span className="hans-phaserail__name">{p}</span>
              {state === 'live' && <span className="hans-phaserail__live">●</span>}
            </li>
          );
        })}
      </ol>
    </div>
  );
}

// Export to window
Object.assign(window, { TopBar, Sidebar, PhaseRail });