// chrome.jsx
// Toolbar, inspector panel, status bar — all the SimTower-style UI around
// the building. Restyled for the Multiplayer OS landing in a Windows 3.1
// mode (chunky beveled chrome, MS Sans Serif) over the existing color and
// type discipline.

function TopBar({ speed, setSpeed, time, clockLabel, paused, setPaused, stats }) {
  return (
    <div className="topbar">
      <div className="tb-left">
        <img src="assets/wordmark-white.svg" alt="Gumbo" className="tb-logo"/>
      </div>

      <div className="tb-mid">
        <div className="tb-speed-group">
          <button className={`tb-btn ${paused ? 'on' : ''}`} onClick={() => setPaused(p => !p)} title="Pause">
            <span className="ico">{paused ? '▶' : '❚❚'}</span>
          </button>
          {[1, 2, 4].map(s => (
            <button key={s} className={`tb-btn ${!paused && speed === s ? 'on' : ''}`}
                    onClick={() => { setPaused(false); setSpeed(s); }}>
              <span className="ico">{'▶'.repeat(s === 4 ? 3 : s === 2 ? 2 : 1)}</span>
            </button>
          ))}
        </div>

        <div className="tb-divider"/>

        <div className="tb-time-group" title={`Auto: browser local time ${clockLabel}`}>
          {['day','dusk','night'].map(t => (
            <button key={t} className={`tb-btn small ${time === t ? 'on' : ''}`} disabled>
              {t.toUpperCase()}
            </button>
          ))}
          <span className="tb-local-clock">AUTO · {clockLabel}</span>
        </div>
      </div>

      <div className="tb-right">
        <Stat k="AGENTS" v={stats.agents}/>
        <Stat k="SESS" v={stats.sessions}/>
        <Stat k="ACTIVE" v={stats.active}/>
        <Stat k="MSGS"  v={stats.messages} accent="okra"/>
        <Stat k="UPTIME" v={stats.uptime}/>
      </div>
    </div>
  );
}

function Stat({ k, v, accent = 'blue' }) {
  return (
    <div className={`tb-stat tb-stat-${accent}`}>
      <div className="tb-stat-k">{k}</div>
      <div className="tb-stat-v">{v}</div>
    </div>
  );
}

// ---------- Inspector panel (Sims-style "selected sim" sheet) ----------

function Inspector({ agent, floor, elevator, agents = [], onClose, onLocate }) {
  if (!agent && elevator) {
    const floorInfo = window.FLOORS[elevator.floor] || window.FLOORS[window.floorIndex('lobby')];
    const targetInfo = elevator.target == null ? null : window.FLOORS[elevator.target];
    const passengerIds = Array.from(elevator.passengers || []);
    const riders = agents.filter(ag => passengerIds.includes(ag.id));
    const direction = elevator.dir > 0 ? 'DOWN' : elevator.dir < 0 ? 'UP' : 'IDLE';
    const requests = Array.from(elevator.requests || [])
      .map(idx => window.FLOORS[idx])
      .filter(Boolean)
      .map(f => f.code || f.label);

    return (
      <div className="inspector inspector-elevator">
        <div className="ins-header" style={{ borderBottom: '2px solid #60a5fa' }}>
          <div className="ins-title">// ELEVATOR</div>
          <button className="ins-x" onClick={onClose}>✕</button>
        </div>

        <div className="elevator-card">
          <div className="elevator-card-led"/>
          <div className="elevator-avatar-bay" aria-label="Current elevator riders">
            {riders.length ? riders.slice(0, 6).map(ag => (
              <div key={ag.id} className="elevator-card-avatar" title={`${ag.name} · ${ag.role}`}>
                <div className="elevator-card-avatar-inner">
                  <Sprite agent={{...ag, step: 0}} walking={false}/>
                </div>
              </div>
            )) : (
              <div className="elevator-avatar-empty">EMPTY</div>
            )}
          </div>
          <div className="elevator-card-title">CENTRAL LIFT</div>
          <div className="elevator-card-sub">{floorInfo.code || '--'} · {floorInfo.label}</div>
        </div>

        <div className="ins-section">
          <div className="ins-section-label">// LIVE STATUS</div>
          <div className="floor-kv"><span>current floor</span><b>{floorInfo.code || floorInfo.label}</b></div>
          <div className="floor-kv"><span>direction</span><b>{direction}</b></div>
          <div className="floor-kv"><span>target</span><b>{targetInfo ? (targetInfo.code || targetInfo.label) : 'none'}</b></div>
          <div className="floor-kv"><span>dwell</span><b>{elevator.dwell || 0}</b></div>
          <div className="floor-kv"><span>passengers</span><b>{riders.length}/6</b></div>
        </div>

        <div className="ins-section">
          <div className="ins-section-label">// RIDERS NOW</div>
          {riders.length ? (
            <ul className="ins-log elevator-riders">
              {riders.map(ag => {
                const dest = window.FLOORS[ag.targetFloor];
                return <li key={ag.id}><span className="t">{dest?.code || '→'}</span> {ag.name} · <b>{ag.role}</b></li>;
              })}
            </ul>
          ) : (
            <div className="ins-empty-hint">Elevator is empty. This panel will update when someone boards.</div>
          )}
        </div>

        <div className="ins-section">
          <div className="ins-section-label">// QUEUED STOPS</div>
          <div className="ins-task">{requests.length ? requests.join(' · ') : 'No pending hall calls.'}</div>
        </div>
      </div>
    );
  }

  if (!agent && floor) {
    const a = window.ACCENT[floor.accent] || window.ACCENT.blue;
    const floorIdx = window.FLOORS.findIndex(f => f.id === floor.id);
    const residents = agents.filter(ag => ag.floor === floorIdx && ag.state !== 'in-elev');
    const isSub = floor.kind === 'sub';
    const typeLabel = floor.kind === 'roof' ? 'HQ / ROOF' : isSub ? 'SUBSTRATE' : floor.kind === 'lobby' ? 'LOBBY' : 'FLOOR';
    return (
      <div className="inspector inspector-floor">
        <div className="ins-header" style={{ borderBottom: `2px solid ${a.stripe}` }}>
          <div className="ins-title">// {typeLabel}</div>
          <button className="ins-x" onClick={onClose}>✕</button>
        </div>

        <div className="floor-card" style={{ background: a.tile || 'rgba(37,99,235,0.12)' }}>
          <div className="floor-card-code">{floor.code || 'HQ'}</div>
          <div className="floor-card-name">{floor.label}</div>
          {floor.sublabel && <div className="floor-card-sub">{floor.sublabel}</div>}
        </div>

        <div className="ins-section">
          <div className="ins-section-label">// PURPOSE</div>
          <div className="ins-task">{floor.desc || 'Gumbo City control surface.'}</div>
        </div>

        <div className="ins-section">
          <div className="ins-section-label">// FLOOR DATA</div>
          <div className="floor-kv"><span>department</span><b>{floor.dept || floor.kind}</b></div>
          <div className="floor-kv"><span>type</span><b>{floor.kind}</b></div>
          <div className="floor-kv"><span>workstations</span><b>{floor.stations?.length || 0}</b></div>
          <div className="floor-kv"><span>present</span><b>{residents.length}</b></div>
        </div>

        <div className="ins-section">
          <div className="ins-section-label">// CURRENT OCCUPANTS</div>
          {residents.length ? (
            <ul className="ins-log floor-occupants">
              {residents.slice(0, 8).map(ag => (
                <li key={ag.id}><span className="t">{ag.type}</span> {ag.name} · <b>{ag.role}</b></li>
              ))}
              {residents.length > 8 && <li><span className="t">+{residents.length - 8}</span> more in motion</li>}
            </ul>
          ) : (
            <div className="ins-empty-hint">No one is currently on this floor.</div>
          )}
        </div>
      </div>
    );
  }

  if (!agent) {
    return (
      <div className="inspector inspector-empty">
        <div className="ins-header">
          <div className="ins-title">// INSPECTOR</div>
        </div>
        <div className="ins-empty">
          <div className="ins-empty-frame">
            <div className="ins-empty-glyph">◇</div>
            <div className="ins-empty-msg">Select any agent or human in the building.</div>
            <div className="ins-empty-hint">Tip — click the elevator riders too.</div>
          </div>
          <Legend/>
        </div>
      </div>
    );
  }

  const a = window.ACCENT[agent.color] || window.ACCENT.blue;
  const isHuman = agent.type === 'human';
  const fl = window.FLOORS[agent.floor];

  return (
    <div className="inspector">
      <div className="ins-header" style={{ borderBottom: `2px solid ${a.stripe}` }}>
        <div className="ins-title">// {isHuman ? 'HUMAN' : 'AGENT'}</div>
        <button className="ins-x" onClick={onClose}>✕</button>
      </div>

      <div className="ins-portrait" style={{ background: a.tile }}>
        <div className="ins-portrait-frame">
          <div className="ins-portrait-big">
            <Sprite agent={{...agent, step: 0}} walking={false}/>
          </div>
        </div>
        <div className="ins-portrait-bars">
          {/* mood diamond */}
          <div className="ins-mood">
            <svg viewBox="0 0 24 24" width="22" height="22">
              <polygon points="12,2 22,12 12,22 2,12" fill={a.stripe} stroke="#111" strokeWidth="1"/>
              <polygon points="12,5 19,12 12,19 5,12" fill="#fff"/>
              <polygon points="12,7 17,12 12,17 7,12" fill={a.glow}/>
            </svg>
          </div>
        </div>
      </div>

      <div className="ins-name-row">
        <div>
          <div className="ins-name">{agent.name}</div>
          <div className="ins-role">{agent.role}{isHuman ? '' : ' · agent'}</div>
        </div>
        <button className="ins-locate" onClick={onLocate}>FOCUS</button>
      </div>

      <div className="ins-section">
        <div className="ins-section-label">// {agent.state === 'work' ? 'CURRENT TASK' : 'CURRENT ACTIVITY'}</div>
        <div className={`ins-task ${agent.state === 'idle' ? 'ins-task-idle' : ''}`}>{agent.state === 'work' ? agent.task : `${agent.activity || 'idle'} · ${agent.task}`}</div>
        <Bar label={agent.state === 'work' ? 'progress' : 'rest'} value={agent.state === 'work' ? Math.min(1, agent.progress) : Math.max(0.12, Math.min(1, agent.cooldown / 960))} color={agent.state === 'work' ? a.stripe : '#93c5fd'}/>
      </div>

      <div className="ins-section">
        <div className="ins-section-label">// LOCATION</div>
        <div className="ins-loc">
          <span className="ins-loc-code">{fl.code}</span>
          <span className="ins-loc-name">{fl.label}</span>
        </div>
        <div className="ins-state">
          status: <b>{agent.state.replace('-', ' ')}</b>
          {agent.activity && <> · activity: <b>{agent.activity}</b></>}
          {agent.liveState && <> · live: <b>{agent.liveState}</b></>}
          {agent.state !== 'work' && agent.targetFloor !== agent.floor && (
            <> → heading to <b>{window.FLOORS[agent.targetFloor].label}</b></>
          )}
        </div>
      </div>

      <div className="ins-section">
        <div className="ins-section-label">// NEEDS</div>
        <Bar label="context"   value={0.4 + agent.mood * 0.55} color="#2563eb"/>
        <Bar label="trust"     value={isHuman ? 1 : 0.6 + (agent.mood) * 0.3} color="#6a9d62"/>
        <Bar label="energy"    value={isHuman ? agent.mood : Math.min(1, 0.5 + agent.progress)} color="#f97316"/>
        {!isHuman && (
          <Bar label="alignment" value={0.78 + agent.mood * 0.2} color="#d65c73"/>
        )}
      </div>

      <div className="ins-section">
        <div className="ins-section-label">// RECENT</div>
        <ul className="ins-log">
          <li><span className="t">12s</span> joined {fl.label}</li>
          <li><span className="t">48s</span> {isHuman ? 'reviewed' : 'wrote to'} memory:PR#482</li>
          <li><span className="t">2m</span> received task from <b>Gumbo-1</b></li>
          {!isHuman && <li><span className="t">5m</span> equipped skill <b>git.review</b></li>}
        </ul>
      </div>
    </div>
  );
}

function Bar({ label, value, color }) {
  const v = Math.max(0, Math.min(1, value));
  return (
    <div className="bar">
      <div className="bar-label">
        <span>{label}</span>
        <span>{Math.round(v * 100)}</span>
      </div>
      <div className="bar-track">
        <div className="bar-fill" style={{ width: `${v * 100}%`, background: color }}/>
        {/* segmented overlay */}
        <div className="bar-segs"/>
      </div>
    </div>
  );
}

function Legend() {
  return (
    <div className="legend">
      <div className="legend-title">// LEGEND</div>
      <div className="legend-item">
        <div className="legend-sprite human"/>
        <div>Human teammate</div>
      </div>
      <div className="legend-item">
        <div className="legend-sprite agent"/>
        <div>AI agent</div>
      </div>
      <div className="legend-item">
        <div className="legend-sprite room blue"/>
        <div>Engineering · Substrate</div>
      </div>
      <div className="legend-item">
        <div className="legend-sprite room okra"/>
        <div>Sales · Customer success</div>
      </div>
      <div className="legend-item">
        <div className="legend-sprite room cayenne"/>
        <div>Design · Data</div>
      </div>
      <div className="legend-item">
        <div className="legend-sprite room pine"/>
        <div>Research · Operations</div>
      </div>
      <div className="legend-item">
        <div className="legend-sprite room orange"/>
        <div>Strategy · Social · Meeting</div>
      </div>
    </div>
  );
}

// ---------- Status bar (bottom) ----------

function StatusBar({ messages }) {
  return (
    <div className="statusbar">
      <div className="sb-section sb-section-mode">
        <span className="sb-key">MODE</span>
        <span className="sb-val">CUTAWAY · LIVE</span>
      </div>
      <div className="sb-section sb-section-tick">
        <span className="sb-key">SUBSTRATE</span>
        <span className="sb-val">
          <span className="sb-blink"/> healthy · 4 channels
        </span>
      </div>
      <div className="sb-section sb-section-feed">
        <div className="sb-feed">
          {messages.slice(0, 3).map((m, i) => (
            <div key={i} className="sb-feed-item" title={m.msg}>
              <span className="sb-t">{m.t}</span>
              <span className={`sb-tag sb-tag-${m.tag}`}>{m.tag}</span>
              <span className="sb-msg">{m.msg}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="sb-section sb-section-build">
        <span className="sb-key">MOS</span>
        <span className="sb-val">v0.1.0</span>
      </div>
    </div>
  );
}

// ---------- Mini-map (mini cutaway, click to scroll) ----------

function MiniMap({ agents, selectedFloorIdx, scrollY, onScroll, viewportH, totalH }) {
  // The mini-map shows tiny floor blocks with dots for agents.
  return (
    <div className="minimap">
      <div className="mm-title">// FLEET</div>
      <div className="mm-stack">
        {window.FLOORS.map((f, i) => {
          const ag = agents.filter(a => a.floor === i).length;
          const a = window.ACCENT[f.accent] || window.ACCENT.blue;
          return (
            <div key={f.id} className={`mm-row ${f.kind === 'sub' ? 'sub' : ''} ${f.kind === 'roof' ? 'roof' : ''} ${selectedFloorIdx === i ? 'selected' : ''}`}
                 onClick={() => onScroll(i)}>
              <div className="mm-stripe" style={{ background: a.stripe }}/>
              <div className="mm-code">{f.code || ''}</div>
              <div className="mm-label">{f.label}</div>
              <div className="mm-count">
                {Array.from({ length: ag }).map((_, k) => (
                  <span key={k} className="mm-dot" style={{ background: a.glow }}/>
                ))}
              </div>
            </div>
          );
        })}
      </div>
      <div className="mm-foot">
        <div className="mm-foot-k">SUBSTRATE ▾</div>
        <div className="mm-foot-v">4 layers · all green</div>
      </div>
    </div>
  );
}

Object.assign(window, { TopBar, Inspector, StatusBar, MiniMap });