/**
 * 城防设置 — 接线状态、安全防务、版本更新、数据源配置
 * 三国术语：设置→城防、连接→接线、配置→防务
 */

import { useState, useCallback } from 'react';
import { api, AgentsStatusData } from '../api';

interface ServiceCheckResult {
  name: string;
  url: string;
  online: boolean;
  detail: string;
  checkedAt: string;
}

export default function SettingsPanel() {
  const [tab, setTab] = useState<'connections' | 'security' | 'version' | 'logs'>('connections');

  // 接线状态巡检
  const [checking, setChecking] = useState(false);
  const [checkResults, setCheckResults] = useState<ServiceCheckResult[]>([]);
  const [lastInspection, setLastInspection] = useState<string>('');

  const runInspection = useCallback(async () => {
    setChecking(true);
    const results: ServiceCheckResult[] = [];
    const now = new Date().toLocaleString('zh-CN', { hour12: false });

    // 1. Gateway 状态
    let gatewayOnline = false;
    let gatewayUrl = 'http://192.168.2.153:18789';
    let gatewayVersion = '-';
    try {
      const status: AgentsStatusData = await api.agentsStatus();
      gatewayOnline = status.gateway.alive;
      gatewayVersion = status.gateway.status || '-';
      gatewayUrl = status.ok ? gatewayUrl : gatewayUrl;
    } catch {
      gatewayOnline = false;
    }
    results.push({
      name: 'OpenClaw Gateway',
      url: gatewayUrl,
      online: gatewayOnline,
      detail: gatewayOnline ? `在线 · ${gatewayVersion}` : '离线',
      checkedAt: now,
    });

    // 2. moziplus 后端
    let backendOnline = false;
    try {
      await api.agentsStatus();
      backendOnline = true;
    } catch {
      backendOnline = false;
    }
    results.push({
      name: 'moziplus 后端',
      url: 'http://192.168.2.154:8088',
      online: backendOnline,
      detail: backendOnline ? '在线' : '离线',
      checkedAt: now,
    });

    setCheckResults(results);
    setLastInspection(now);
    setChecking(false);
  }, []);

  // 静态接线列表
  const connections = [
    { name: 'moziplus 后端', url: 'http://localhost:8088', status: 'connected', note: 'moziplus daemon' },
    { name: 'OpenClaw Gateway', url: 'http://192.168.2.153:18789', status: 'connected', note: '主 Gateway' },
    { name: 'NAS 回测服务', url: 'http://192.168.2.154:8088', status: 'connected', note: 'Docker 回测' },
    { name: 'Gitee 远程仓库', url: 'git@gitee.com:cfdaily/sanguo_moziplus.git', status: 'connected', note: 'Git 同步' },
    { name: 'Redis（M3）', url: '-', status: 'pending', note: 'M3 阶段接入实时推送' },
    { name: '飞书推送（M3）', url: '-', status: 'pending', note: 'M3 阶段接入通知推送' },
  ];

  // 安全防务
  const risks = [
    { level: 'info' as const, title: 'API 无鉴权', desc: 'Dashboard API 默认无 token 鉴权，本地运行无风险', action: 'M3 考虑加入 token 验证' },
    { level: 'ok' as const, title: 'SSH 密钥正常', desc: 'Gitee SSH 密钥配置正确，Git 同步正常', action: '' },
    { level: 'ok' as const, title: '数据库备份', desc: 'SQLite 数据库自动备份已启用', action: '' },
    { level: 'warn' as const, title: 'Python 3.9 版本较旧', desc: 'Python 3.9.6 不支持 X | None 语法，需 from __future__ import annotations', action: '考虑升级到 Python 3.10+' },
  ];

  return (
    <div>
      {/* 城防子页签 */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 20 }}>
        {[
          { key: 'connections' as const, label: '🔌 接线状态' },
          { key: 'security' as const, label: '🛡️ 安全防务' },
          { key: 'version' as const, label: '📦 版本更新' },
          { key: 'logs' as const, label: '📋 城防日志' },
        ].map((t) => (
          <button key={t.key} className={`btn ${tab === t.key ? 'btn-primary' : ''}`} onClick={() => setTab(t.key)}>
            {t.label}
          </button>
        ))}
      </div>

      {/* ========== 接线状态 ========== */}
      {tab === 'connections' && (
        <div>
          {/* 巡视城防 */}
          <div style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 14, padding: 18, marginBottom: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <span style={{ fontWeight: 700, fontSize: 14 }}>🏰 接线状态巡检</span>
              <button
                className="btn btn-action"
                onClick={runInspection}
                disabled={checking}
                style={{ opacity: checking ? 0.6 : 1, cursor: checking ? 'not-allowed' : 'pointer' }}
              >
                {checking ? '⏳ 巡视中…' : '🔍 巡视城防'}
              </button>
            </div>

            {lastInspection && (
              <div style={{ fontSize: 10, color: 'var(--muted)', marginBottom: 10 }}>
                最后巡视：{lastInspection}
              </div>
            )}

            {checkResults.length > 0 && (
              <div>
                {checkResults.map((r, i) => (
                  <div
                    key={i}
                    style={{
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      padding: '12px 0',
                      borderBottom: i < checkResults.length - 1 ? '1px solid var(--line)' : 'none',
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{
                        width: 10, height: 10, borderRadius: '50%',
                        background: r.online ? '#2ecc8a' : '#ff5270',
                        boxShadow: `0 0 6px ${r.online ? '#2ecc8a66' : '#ff527066'}`,
                        display: 'inline-block', flexShrink: 0,
                      }} />
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 13 }}>{r.name}</div>
                        <div style={{ fontSize: 10, color: 'var(--muted)', fontFamily: 'monospace' }}>{r.url}</div>
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <span style={{
                        fontSize: 10, padding: '2px 8px', borderRadius: 4,
                        background: r.online ? '#0a2018' : '#200a0a',
                        color: r.online ? '#2ecc8a' : '#ff5270',
                        border: `1px solid ${r.online ? '#2ecc8a44' : '#ff527044'}`,
                      }}>
                        {r.detail}
                      </span>
                    </div>
                  </div>
                ))}

                {/* 巡视摘要 */}
                <div style={{
                  marginTop: 12, padding: '10px 14px', borderRadius: 8,
                  background: checkResults.every(r => r.online) ? '#0a2018' : '#200a0a',
                  border: `1px solid ${checkResults.every(r => r.online) ? '#2ecc8a44' : '#ff527044'}`,
                  fontSize: 12,
                  color: checkResults.every(r => r.online) ? '#2ecc8a' : '#ff5270',
                }}>
                  {checkResults.every(r => r.online)
                    ? `✅ 全部城门正常 (${checkResults.length}/${checkResults.length})`
                    : `⚠️ ${checkResults.filter(r => !r.online).length} 处城门告急 (${checkResults.filter(r => r.online).length}/${checkResults.length} 正常)`
                  }
                </div>
              </div>
            )}

            {checkResults.length === 0 && !checking && (
              <div style={{ fontSize: 12, color: 'var(--muted)', textAlign: 'center', padding: '16px 0' }}>
                点击「🔍 巡视城防」检查各服务接线状态
              </div>
            )}
          </div>

          {/* 接线列表 */}
          <div style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 14 }}>
            <div style={{ padding: '12px 18px 0', fontSize: 12, fontWeight: 700, color: 'var(--muted)' }}>接线清单</div>
            {connections.map((c, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 18px', borderBottom: i < connections.length - 1 ? '1px solid #0e1320' : 'none' }}>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{c.name}</div>
                  <div style={{ fontSize: 10, color: 'var(--muted)', fontFamily: 'monospace' }}>{c.url}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <span style={{ fontSize: 10, padding: '2px 8px', borderRadius: 4, background: c.status === 'connected' ? '#0a2018' : '#201a08', color: c.status === 'connected' ? 'var(--ok)' : 'var(--warn)', border: `1px solid ${c.status === 'connected' ? '#2ecc8a44' : '#f5c84244'}` }}>
                    {c.status === 'connected' ? '✅ 已接线' : '⏳ 待接入'}
                  </span>
                  <div style={{ fontSize: 10, color: 'var(--muted)', marginTop: 2 }}>{c.note}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ========== 安全防务 ========== */}
      {tab === 'security' && (
        <div>
          {risks.map((r, i) => (
            <div key={i} style={{ background: 'var(--panel)', border: `1px solid ${r.level === 'warn' ? '#f5c84244' : r.level === 'ok' ? '#2ecc8a44' : '#6a9eff44'}`, borderRadius: 12, padding: 14, marginBottom: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                <span style={{ fontWeight: 600, fontSize: 13 }}>
                  {r.level === 'ok' && '✅ '}{r.level === 'warn' && '⚠️ '}{r.level === 'info' && 'ℹ️ '}
                  {r.title}
                </span>
                <span style={{ fontSize: 9, padding: '1px 6px', borderRadius: 3, background: r.level === 'ok' ? '#0a2018' : r.level === 'warn' ? '#201a08' : '#0a1428', color: r.level === 'ok' ? 'var(--ok)' : r.level === 'warn' ? 'var(--warn)' : 'var(--acc)' }}>
                  {r.level === 'ok' ? '正常' : r.level === 'warn' ? '警告' : '提示'}
                </span>
              </div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: r.action ? 6 : 0 }}>{r.desc}</div>
              {r.action && <div style={{ fontSize: 11, color: 'var(--acc)' }}>→ {r.action}</div>}
            </div>
          ))}
        </div>
      )}

      {/* ========== 版本更新 ========== */}
      {tab === 'version' && (
        <div>
          <div style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 14, padding: 18 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div>
                <div style={{ fontSize: 10, color: 'var(--muted)', marginBottom: 4 }}>moziplus</div>
                <div style={{ fontSize: 18, fontWeight: 800 }}>v0.4b</div>
                <div style={{ fontSize: 10, color: 'var(--muted)' }}>M2 开发中</div>
              </div>
              <div>
                <div style={{ fontSize: 10, color: 'var(--muted)', marginBottom: 4 }}>Dashboard</div>
                <div style={{ fontSize: 18, fontWeight: 800 }}>v1.0</div>
                <div style={{ fontSize: 10, color: 'var(--muted)' }}>基于 Edict 前端</div>
              </div>
              <div>
                <div style={{ fontSize: 10, color: 'var(--muted)', marginBottom: 4 }}>OpenClaw</div>
                <div style={{ fontSize: 18, fontWeight: 800 }}>latest</div>
                <div style={{ fontSize: 10, color: 'var(--ok)' }}>✅ 最新版本</div>
              </div>
              <div>
                <div style={{ fontSize: 10, color: 'var(--muted)', marginBottom: 4 }}>Node.js</div>
                <div style={{ fontSize: 18, fontWeight: 800 }}>v22</div>
                <div style={{ fontSize: 10, color: 'var(--ok)' }}>✅ 运行正常</div>
              </div>
            </div>
          </div>

          <div style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 14, padding: 18, marginTop: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 10 }}>📋 更新通道</div>
            <div style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.8 }}>
              <div>📦 安装方式：git clone + PM2</div>
              <div>🔄 更新方式：git pull + npm install + pm2 restart</div>
              <div>📝 远程仓库：git@gitee.com:cfdaily/sanguo_moziplus.git</div>
              <div>🔀 分支：main（稳定）→ develop（开发）</div>
            </div>
          </div>
        </div>
      )}
      {/* ========== 城防日志 ========== */}
      {tab === 'logs' && (
        <div>
          <div style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 14, padding: 18 }}>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>📋 操作日志</div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 12 }}>
              记录系统关键操作和事件（功能待后端支持，当前显示本地日志）
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {JSON.parse(localStorage.getItem('opLogs') || '[]').slice(-20).reverse().map((log: { time: string; action: string; detail: string }, i: number) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'baseline', padding: '6px 0', borderBottom: '1px solid var(--line)' }}>
                  <span style={{ fontSize: 10, color: 'var(--muted)', width: 140, flexShrink: 0 }}>{log.time}</span>
                  <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--acc)', width: 80 }}>{log.action}</span>
                  <span style={{ fontSize: 11, color: 'var(--muted)' }}>{log.detail}</span>
                </div>
              ))}
              {JSON.parse(localStorage.getItem('opLogs') || '[]').length === 0 && (
                <div style={{ fontSize: 12, color: 'var(--muted)', padding: 8 }}>暂无日志记录</div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
