// ============================================================
// その他 / 設定
// ============================================================
const T_m = window.TOKENS;

const MoreScreen = ({ onNav, onReRunSetup, onRefresh, loadState }) => {
  const connected = window.APP_STATE.syncStatus === 'online';
  return (
    <div>
      <TopBar title="その他" />
      <div style={{ padding: '16px 16px 100px', display: 'flex', flexDirection: 'column', gap: 20 }}>

        {/* 同期ステータス */}
        <Card padding={16}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 11, color: T_m.fg3, letterSpacing: 0.4, textTransform: 'uppercase', fontFamily: T_m.fontUi, fontWeight: 600, marginBottom: 3 }}>
                HUB接続
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <StatusDot status={connected ? 'online' : 'offline'} />
                <span style={{ fontSize: 14, fontWeight: 600, color: T_m.fg, fontFamily: T_m.fontUi }}>{connected ? '接続中' : '未接続'}</span>
              </div>
            </div>
            <Button variant="secondary" size="sm" onClick={onRefresh}>
              <Icon name="sync" size={12} color={T_m.fg} /> 再テスト
            </Button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, paddingTop: 10, borderTop: `1px solid ${T_m.lineSoft}` }}>
            <div>
              <div style={{ fontSize: 10, color: T_m.fg3, fontFamily: T_m.fontUi, marginBottom: 2 }}>最終同期</div>
              <div style={{ fontSize: 12, color: T_m.fg, fontFamily: T_m.fontMono }}>{window.APP_STATE.lastSyncLabel || 'HUB未接続'}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, color: T_m.fg3, fontFamily: T_m.fontUi, marginBottom: 2 }}>受信状態</div>
              <div style={{ fontSize: 12, color: T_m.fg, fontFamily: T_m.fontMono }}>{loadState === 'error' ? 'エラー' : connected ? '受信済み' : '待機中'}</div>
            </div>
          </div>
        </Card>

        {/* テスター情報 */}
        <div>
          <SectionHead title="テスター情報" />
          <Card padding={0}>
            <SettingRow icon="tester" label="テスターID" value={window.APP_STATE.testerId || '未設定'} copyable />
            <SettingRow icon="key" label="APIキー" value="HUB側で設定" divider />
            <SettingRow icon="sync" label="APIキーを再発行" chev danger divider />
          </Card>
        </div>

        {/* HUB管理 */}
        <div>
          <SectionHead title="HUB管理" />
          <Card padding={0}>
            <SettingRow icon="download" label="HUBを再ダウンロード" value="/downloads/ProfitDD_Manager_Tester_Package.zip" chev />
            <SettingRow icon="server" label="Collector EAをダウンロード" chev divider />
            <SettingRow icon="link" label="接続の詳細ログ" chev divider />
          </Card>
        </div>

        {/* サポート */}
        <div>
          <SectionHead title="サポート" />
          <Card padding={0}>
            <SettingRow icon="info" label="初期設定をやり直す" chev onClick={onReRunSetup} />
            <SettingRow icon="info" label="使い方ガイド" chev divider />
            <SettingRow icon="external" label="お問い合わせ" chev divider />
          </Card>
        </div>

        <div style={{ padding: 12, textAlign: 'center', fontSize: 10, color: T_m.fg4, fontFamily: T_m.fontMono, letterSpacing: 0.5 }}>
          MT Console
        </div>
      </div>
    </div>
  );
};

const SettingRow = ({ icon, label, value, chev, copyable, danger, divider, onClick }) => (
  <div onClick={onClick} style={{
    padding: '13px 14px', display: 'flex', alignItems: 'center', gap: 12,
    cursor: onClick || chev ? 'pointer' : 'default',
    borderTop: divider ? `1px solid ${T_m.lineSoft}` : 'none',
  }}>
    <div style={{
      width: 28, height: 28, borderRadius: 8, background: T_m.raised,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      <Icon name={icon} size={14} color={danger ? T_m.loss : T_m.fg2} />
    </div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13, color: danger ? T_m.loss : T_m.fg, fontFamily: T_m.fontUi, fontWeight: 500 }}>{label}</div>
      {value && (
        <div style={{ fontSize: 11, color: T_m.fg3, fontFamily: T_m.fontMono, marginTop: 2, letterSpacing: 0.3 }}>
          {value}
        </div>
      )}
    </div>
    {copyable && <Icon name="copy" size={14} color={T_m.fg3} />}
    {chev && <Icon name="chevR" size={14} color={T_m.fg4} />}
  </div>
);

Object.assign(window, { MoreScreen, SettingRow });