/* screens-admin.jsx — Backdoor / service menu with PIN gate. → window */
const { useState: useSA } = React;

function AdminScreen({ ctx, onExit, initialUnlocked = false, lanes }) {
  const { t, lang } = ctx;
  const inv = lanes || PRODUCTS;
  const [pin, setPin] = useSA('');
  const [unlocked, setUnlocked] = useSA(initialUnlocked);
  const [wrong, setWrong] = useSA(false);
  const [toast, setToast] = useSA(null);
  const [light, setLight] = useSA(false);
  const [board, setBoard] = useSA(0);
  const [testing, setTesting] = useSA(null);
  const D = (o) => lang === 'zh' ? o.zh : lang === 'es' ? o.es : o.en;
  const testLane = (lane) => {
    setTesting(lane);
    fire(D({ zh: `出货测试 · 货道 ${lane}`, en: `Test dispense · lane ${lane}`, es: `Prueba · canal ${lane}` }));
    setTimeout(() => setTesting(null), 1400);
  };

  const press = (k) => {
    setWrong(false);
    if (k === 'del') { setPin((p) => p.slice(0, -1)); return; }
    const np = (pin + k).slice(0, 4);
    setPin(np);
    if (np.length === 4) {
      setTimeout(() => {
        if (np === '1989') setUnlocked(true);
        else { setWrong(true); setPin(''); }
      }, 150);
    }
  };

  const fire = (msg) => { setToast(msg); setTimeout(() => setToast(null), 1800); };

  if (!unlocked) {
    return (
      <div className="admin">
        <div className="admin-top">
          <span className="tag">SERVICE</span>
          <h2>{t('admin')}</h2>
          <div className="topbar-spacer" />
          <button className="iconbtn" onClick={onExit}><Icon name="close" size={20} /></button>
        </div>
        <div className="center-wrap">
          <div className="big-icon"><Icon name="lock" size={40} /></div>
          <h2 style={{ fontSize: 24 }}>{t('enter_pin')}</h2>
          <div className="pin-dots">
            {[0, 1, 2, 3].map((i) => <div key={i} className={'pd ' + (i < pin.length ? 'f' : '')} />)}
          </div>
          {wrong && <p style={{ color: 'var(--bad)' }}>{t('wrong_pin')}</p>}
          <div className="keypad">
            {['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((k) => (
              <button key={k} className="key" onClick={() => press(k)}>{k}</button>
            ))}
            <button className="key" style={{ opacity: .4 }} disabled />
            <button className="key" onClick={() => press('0')}>0</button>
            <button className="key" onClick={() => press('del')}><Icon name="chevL" size={22} /></button>
          </div>
          <p className="mono muted" style={{ fontSize: 12 }}>hint · 1989</p>
        </div>
      </div>
    );
  }

  const statusRows = [
    ['DEVICE_SN', 'VND-ESPA-0427-7731', 'ok'],
    ['Firmware', 'v3.4.0 · build 2261', ''],
    ['Network', 'Wi-Fi · −52 dBm', 'ok'],
    ['SIM', '4G · fallback ready', 'ok'],
    ['MQTT broker', 'connected · 31s ping', 'ok'],
    ['Last sync', '2026-05-31 14:02 UTC', ''],
    ['Pending outbox', '0 payment · 0 fulfill', 'ok'],
    ['Temperature', '34°C', ''],
  ];

  const controls = [
    { ic: 'refresh', tt: 'reboot_app', cst: 'soft restart', fn: () => fire('Restarting app…') },
    { ic: 'power', tt: 'reboot_dev', cst: 'full reboot', danger: true, fn: () => fire('Rebooting device…') },
    { ic: 'light', tt: 'lights', cst: light ? 'ON' : 'OFF', fn: () => { setLight((v) => !v); fire('Camera light ' + (!light ? 'on' : 'off')); } },
    { ic: 'lock', tt: 'unlock', cst: 'lock #1', fn: () => fire('Lock opened') },
    { ic: 'card', tt: 'viva_mgmt', cst: 'register · reset', fn: () => fire('Opening Viva terminal…') },
    { ic: 'home', tt: 'home', cst: 'launcher', fn: onExit },
  ];

  return (
    <div className="admin">
      <div className="admin-top">
        <span className="tag">SERVICE</span>
        <h2>{t('admin')}</h2>
        <span className="mono muted" style={{ fontSize: 12 }}>· authenticated</span>
        <div className="topbar-spacer" />
        <button className="btn ghost" style={{ height: 44 }} onClick={onExit}>{t('exit')}</button>
      </div>
      <div className="admin-body">
        <div className="col" style={{ gap: 'var(--gap)' }}>
          <div className="card admin-section" style={{ padding: 'var(--pad)' }}>
            <h3>{t('status')}</h3>
            {statusRows.map(([k, v, cls]) => (
              <div key={k} className="kv"><span className="k">{k}</span><span className={'v ' + cls}>{v}</span></div>
            ))}
          </div>
          <div className="card admin-section" style={{ padding: 'var(--pad)' }}>
            <h3>{t('controls')}</h3>
            <div className="ctrl-grid">
              {controls.map((c) => (
                <button key={c.tt} className={'ctrl ' + (c.danger ? 'danger' : '')} onClick={c.fn}>
                  <span className="cic"><Icon name={c.ic} size={22} /></span>
                  <div className="col"><span className="ctt">{t(c.tt)}</span><span className="cst">{c.cst}</span></div>
                </button>
              ))}
            </div>
          </div>
        </div>
        <div className="card admin-section" style={{ padding: 'var(--pad)' }}>
          <div className="row between" style={{ marginBottom: 14 }}>
            <h3 style={{ margin: 0 }}>{D({ zh: '设备调试', en: 'Device debug', es: 'Depuración' })}</h3>
            <span className="mono muted" style={{ fontSize: 12 }}>/dev/ttyS4 · 9600</span>
          </div>
          <div className="row" style={{ gap: 8, marginBottom: 14, flexWrap: 'wrap' }}>
            <span className="muted" style={{ fontSize: 13 }}>{D({ zh: '主板', en: 'Board', es: 'Placa' })}</span>
            {[0, 1].map((b) => (
              <button key={b} className={'tab ' + (board === b ? 'active' : '')} style={{ height: 34 }} onClick={() => setBoard(b)}>#{b}</button>
            ))}
            <span className="muted mono" style={{ fontSize: 12, marginLeft: 'auto' }}>{D({ zh: '点击货道测试出货', en: 'Tap a lane to test-dispense', es: 'Toque un canal' })}</span>
          </div>
          <div className="admin-grid">
            {inv.map((p) => (
              <button key={p.id} className={'lanecell debug ' + (testing === p.lane ? 'active' : '')} onClick={() => testLane(p.lane)}>
                <span className="n">{p.lane}</span>
                <span className="q" style={{ fontSize: 12 }}>{testing === p.lane ? '···' : D({ zh: '出货', en: 'push', es: 'expulsar' })}</span>
              </button>
            ))}
          </div>
          <div className="ctrl-grid" style={{ marginTop: 16 }}>
            <button className="ctrl" onClick={() => fire(D({ zh: '查询所有货道状态…', en: 'Querying lane status…', es: 'Consultando estado…' }))}>
              <span className="cic"><Icon name="grid" size={20} /></span>
              <div className="col"><span className="ctt">{D({ zh: '查询货道状态', en: 'Query lane status', es: 'Estado de canales' })}</span><span className="cst">channelstatus</span></div>
            </button>
            <button className="ctrl" onClick={() => fire(D({ zh: '全部货道复位…', en: 'Resetting all lanes…', es: 'Reiniciando canales…' }))}>
              <span className="cic"><Icon name="refresh" size={20} /></span>
              <div className="col"><span className="ctt">{D({ zh: '全部复位', en: 'Reset all lanes', es: 'Reiniciar todos' })}</span><span className="cst">back · step 7</span></div>
            </button>
            <button className="ctrl" onClick={() => fire(D({ zh: '串口自检…', en: 'Serial self-test…', es: 'Autotest serie…' }))}>
              <span className="cic"><Icon name="cog" size={20} /></span>
              <div className="col"><span className="ctt">{D({ zh: '串口自检', en: 'Serial self-test', es: 'Autotest serie' })}</span><span className="cst">handshake</span></div>
            </button>
            <button className="ctrl" onClick={() => { setLight((v) => !v); fire(D({ zh: '补光灯 ' + (!light ? '开' : '关'), en: 'Camera light ' + (!light ? 'on' : 'off'), es: 'Luz ' + (!light ? 'on' : 'off') })); }}>
              <span className="cic"><Icon name="light" size={20} /></span>
              <div className="col"><span className="ctt">{D({ zh: '补光灯', en: 'Camera light', es: 'Luz cámara' })}</span><span className="cst">{light ? 'ON' : 'OFF'}</span></div>
            </button>
          </div>
        </div>
      </div>
      {toast && (
        <div style={{ position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)', background: 'var(--surface-2)', border: '1px solid var(--border-2)', borderRadius: 12, padding: '14px 22px', boxShadow: 'var(--shadow)', fontWeight: 600 }} className="anim-up">{toast}</div>
      )}
    </div>
  );
}

Object.assign(window, { AdminScreen });