// mobile-pda.jsx — mobile-only PDA shell for the Windows 3.1 landing.

function MobilePdaShell({
  agents,
  packets,
  elevator,
  selected,
  selectedFloor,
  selectedElevator,
  selectedId,
  selectedFloorIdx,
  feed,
  stats,
  time,
  clockLabel,
  paused,
  speed,
  setPaused,
  setSpeed,
  buildingScrollRef,
  buildingScale,
  showBeams,
  selectAgent,
  selectFloor,
  selectElevator,
  clearInspector,
  handleLocate,
  zoomBuilding,
}) {
  const helpers = window.MobilePdaHelpers;
  const [mode, setMode] = React.useState('city');
  const [activeApp, setActiveApp] = React.useState(null);
  const apps = React.useMemo(() => helpers.listPdaApps(window.APPS), [helpers]);
  const hasSelection = !!(selected || selectedFloor || selectedElevator);
  const labels = helpers.softKeyLabels(mode, hasSelection);

  function go(nextMode) {
    setMode(nextMode);
    if (nextMode !== 'apps') setActiveApp(null);
  }

  function onSoftKey(label) {
    if (label === 'CITY') go('city');
    else if (label === 'LOG') go('log');
    else if (label === 'APPS') go('apps');
    else if (label === 'INFO') go('info');
    else if (label === 'BACK') clearInspector();
    else if (label === 'LOCATE') handleLocate();
    else if (label === 'ZOOM-') zoomBuilding(-0.1);
    else if (label === 'ZOOM+') zoomBuilding(0.1);
  }

  function openApp(kind) {
    setActiveApp(kind);
    setMode('apps');
  }

  return (
    <div className="pda-shell">
      <div className="pda-device" role="application" aria-label="Multiplayer OS PDA">
        <div className="pda-speaker" aria-hidden="true">
          <i/><i/><i/><i/><i/>
        </div>

        <MobilePdaScreen
          mode={mode}
          apps={apps}
          activeApp={activeApp}
          onOpenApp={openApp}
          onCloseApp={() => setActiveApp(null)}
          agents={agents}
          packets={packets}
          elevator={elevator}
          selected={selected}
          selectedFloor={selectedFloor}
          selectedElevator={selectedElevator}
          selectedId={selectedId}
          selectedFloorIdx={selectedFloorIdx}
          feed={feed}
          stats={stats}
          time={time}
          clockLabel={clockLabel}
          paused={paused}
          speed={speed}
          setPaused={setPaused}
          setSpeed={setSpeed}
          buildingScrollRef={buildingScrollRef}
          buildingScale={buildingScale}
          showBeams={showBeams}
          selectAgent={selectAgent}
          selectFloor={selectFloor}
          selectElevator={selectElevator}
          go={go}
        />

        <MobilePdaSoftKeys labels={labels} onPress={onSoftKey}/>
      </div>
    </div>
  );
}

function MobilePdaScreen(props) {
  const latest = window.MobilePdaHelpers.latestFeedLine(props.feed);

  return (
    <div className="pda-screen">
      <div className="pda-titlebar">
        <span className="pda-title">MPOS.PDA</span>
        <span className="pda-clock">{props.clockLabel}</span>
        <span className="pda-title-controls" aria-hidden="true">_ []</span>
      </div>
      <div className="pda-menubar">
        <span>File</span>
        <span>View</span>
        <span>Link</span>
        <span>Help</span>
      </div>

      <div className="pda-screen-body">
        <nav className="pda-rail" aria-label="PDA sections">
          {['city', 'log', 'apps', 'info'].map(mode => (
            <button
              key={mode}
              className={`pda-rail-btn ${props.mode === mode ? 'is-active' : ''}`}
              onClick={() => props.go(mode)}
            >
              {mode.toUpperCase()}
            </button>
          ))}
          <div className="pda-rail-readout">{Math.round(props.buildingScale * 100)}%</div>
        </nav>

        <main className="pda-panel">
          {props.mode === 'city' && <MobilePdaCityPanel {...props}/>}
          {props.mode === 'log' && <MobilePdaLogPanel feed={props.feed}/>}
          {props.mode === 'apps' && (
            <MobilePdaAppsPanel
              apps={props.apps}
              activeApp={props.activeApp}
              onOpenApp={props.onOpenApp}
              onCloseApp={props.onCloseApp}
            />
          )}
          {props.mode === 'info' && <MobilePdaInfoPanel {...props}/>}
        </main>
      </div>

      <div className="pda-status">
        <div className="pda-status-stats">
          AG {props.stats.agents} HM {props.stats.humans} AC {props.stats.active}
        </div>
        <div className="pda-status-feed">
          {latest.t} {latest.tag}: {latest.msg}
        </div>
      </div>
    </div>
  );
}

function MobilePdaCityPanel({
  agents,
  packets,
  elevator,
  selected,
  selectedFloor,
  selectedElevator,
  selectedId,
  selectedFloorIdx,
  time,
  buildingScrollRef,
  buildingScale,
  showBeams,
  selectAgent,
  selectFloor,
  selectElevator,
  paused,
  speed,
  setPaused,
  setSpeed,
}) {
  const title = window.MobilePdaHelpers.selectionTitle({
    agent: selected,
    floor: selectedFloor,
    elevator: selectedElevator ? elevator : null,
  });

  return (
    <div className="pda-city">
      <div className="pda-city-toolbar">
        <button className={`pda-mode-button ${paused ? 'is-active' : ''}`} onClick={() => setPaused(!paused)}>
          {paused ? 'RUN' : 'PAUSE'}
        </button>
        {[1, 2, 4].map(nextSpeed => (
          <button
            key={nextSpeed}
            className={`pda-mode-button ${!paused && speed === nextSpeed ? 'is-active' : ''}`}
            onClick={() => { setPaused(false); setSpeed(nextSpeed); }}
          >
            {nextSpeed}X
          </button>
        ))}
      </div>
      <div className="pda-building-window">
        <div className="pda-building-sky" data-time={time}/>
        <div className="pda-building-scroll" ref={buildingScrollRef}>
          <div
            className="pda-building-stage"
            style={{
              transform: `scale(${buildingScale})`,
              '--building-scale': buildingScale,
            }}
          >
            <Building
              agents={agents}
              elevator={elevator}
              packets={packets}
              selectedId={selectedId}
              selectedFloorIdx={selectedFloorIdx}
              selectedElevator={selectedElevator}
              onClickAgent={selectAgent}
              onClickFloor={selectFloor}
              onClickElevator={selectElevator}
              showBeam={showBeams}
              time={time}
            />
          </div>
        </div>
      </div>
      <div className="pda-detail-strip">{title}</div>
    </div>
  );
}

function MobilePdaLogPanel({ feed }) {
  const rows = feed && feed.length ? feed : [window.MobilePdaHelpers.latestFeedLine(feed)];

  return (
    <div className="pda-log">
      {rows.slice(0, 12).map((row, i) => (
        <div className="pda-log-row" key={`${row.t}-${i}`}>
          <span className="pda-log-time">{row.t}</span>
          <span className="pda-log-tag">{row.tag}</span>
          <span className="pda-log-msg">{row.msg}</span>
        </div>
      ))}
    </div>
  );
}

function MobilePdaAppsPanel({ apps, activeApp, onOpenApp, onCloseApp }) {
  const cfg = activeApp ? window.APPS[activeApp] : null;
  const isEmulator = activeApp === 'dos' || activeApp === 'win311';

  return (
    <div className="pda-apps">
      <div className="pda-app-list">
        {apps.map(app => (
          <button
            key={app.kind}
            className={`pda-app-row ${activeApp === app.kind ? 'is-active' : ''}`}
            onClick={() => onOpenApp(app.kind)}
          >
            <span className="pda-app-icon"><PixelIcon kind={app.icon}/></span>
            <span className="pda-app-label">{app.iconLabel}</span>
          </button>
        ))}
      </div>

      {cfg && (
        <div className="pda-app-dialog">
          <div className="pda-app-dialog-title">
            <span>{cfg.title}</span>
            <button onClick={onCloseApp}>X</button>
          </div>
          <div className="pda-app-dialog-body">
            {isEmulator ? (
              <div className="pda-emulator-note">
                <div className="pda-note-title">{cfg.iconLabel}</div>
                <div>DOS emulator apps are available on the desktop terminal.</div>
                <div>Use a wider screen for keyboard capture.</div>
              </div>
            ) : (
              window.renderWindowBody(activeApp, { onClose: onCloseApp })
            )}
          </div>
        </div>
      )}
    </div>
  );
}

function MobilePdaInfoPanel({
  selected,
  selectedFloor,
  selectedElevator,
  elevator,
  agents,
  stats,
}) {
  if (selected) {
    const floor = window.FLOORS[selected.floor];
    return (
      <div className="pda-info">
        <div className="pda-info-title">{selected.name}</div>
        <div className="pda-info-line">{selected.role || selected.type}</div>
        <div className="pda-info-grid">
          <span>STATE</span><b>{selected.state}</b>
          <span>ACT</span><b>{selected.activity || 'working'}</b>
          <span>FLOOR</span><b>{floor ? (floor.code || floor.label) : '--'}</b>
          <span>TASK</span><b>{selected.task || 'none'}</b>
        </div>
      </div>
    );
  }

  if (selectedFloor) {
    const floorIdx = window.FLOORS.findIndex(f => f.id === selectedFloor.id);
    const present = agents.filter(ag => ag.floor === floorIdx && ag.state !== 'in-elev').length;
    return (
      <div className="pda-info">
        <div className="pda-info-title">{selectedFloor.code || 'FLOOR'}</div>
        <div className="pda-info-line">{selectedFloor.label}</div>
        <div className="pda-info-grid">
          <span>TYPE</span><b>{selectedFloor.kind}</b>
          <span>DEPT</span><b>{selectedFloor.dept || selectedFloor.kind}</b>
          <span>HERE</span><b>{present}</b>
          <span>NOTE</span><b>{selectedFloor.desc || selectedFloor.sublabel || 'active'}</b>
        </div>
      </div>
    );
  }

  if (selectedElevator) {
    const floor = window.FLOORS[elevator.floor];
    const riders = Array.from(elevator.passengers || []);
    return (
      <div className="pda-info">
        <div className="pda-info-title">CENTRAL LIFT</div>
        <div className="pda-info-line">{floor ? floor.label : 'in transit'}</div>
        <div className="pda-info-grid">
          <span>DIR</span><b>{elevator.dir > 0 ? 'DOWN' : elevator.dir < 0 ? 'UP' : 'IDLE'}</b>
          <span>RIDERS</span><b>{riders.length}/6</b>
          <span>DWELL</span><b>{elevator.dwell || 0}</b>
          <span>CALLS</span><b>{elevator.requests ? elevator.requests.size : 0}</b>
        </div>
      </div>
    );
  }

  return (
    <div className="pda-info">
      <div className="pda-info-title">SYSTEM</div>
      <div className="pda-info-line">Multiplayer OS handheld view</div>
      <div className="pda-info-grid">
        <span>AGENTS</span><b>{stats.agents}</b>
        <span>HUMANS</span><b>{stats.humans}</b>
        <span>ACTIVE</span><b>{stats.active}</b>
        <span>UPTIME</span><b>{stats.uptime}</b>
      </div>
    </div>
  );
}

function MobilePdaSoftKeys({ labels, onPress }) {
  return (
    <div className="pda-softkeys">
      {labels.map(label => (
        <button key={label} className="pda-softkey" onClick={() => onPress(label)}>
          {label}
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { MobilePdaShell });