import type { ServerMetrics } from '../../types';
import { formatBytes, formatUptime, formatPercent, formatLatencyMs } from '../../utils/format';
import './ServerDetail.css';

interface ServerDetailProps {
  metrics: ServerMetrics;
  serverName: string;
  onClose: () => void;
}

export const ServerDetail = ({ metrics, serverName, onClose }: ServerDetailProps) => {
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>{serverName} - 详细信息</h2>
          <button className="btn-close" onClick={onClose}>×</button>
        </div>
        
        <div className="modal-body">
          <section className="detail-section">
            <h3 className="detail-category-heading">系统与环境</h3>
            <div className="system-info-container">
              {/* 系统基本信息 */}
              <div className="system-info-group">
                <h4 className="info-group-title">基本信息</h4>
                <div className="system-info-grid system-info-grid--cols-3">
                  <div className="system-info-item">
                    <div className="system-info-content">
                      <span className="system-info-label">主机名</span>
                      <span className="system-info-value">{metrics.hostname}</span>
                    </div>
                  </div>
                  <div className="system-info-item">
                    <div className="system-info-content">
                      <span className="system-info-label">操作系统</span>
                      <span className="system-info-value">{metrics.os.distro}</span>
                    </div>
                  </div>

                  <div className="system-info-item">
                    <div className="system-info-content">
                      <span className="system-info-label">架构</span>
                      <span className="system-info-value">{metrics.os.architecture}</span>
                    </div>
                  </div>

                  <div className="system-info-item system-info-item-full">
                    <div className="system-info-content">
                      <span className="system-info-label">内核版本</span>
                      <span className="system-info-value system-info-value-long">{metrics.os.kernel}</span>
                    </div>
                  </div>

                </div>
              </div>

              {/* 运行时信息 */}
              <div className="system-info-group">
                <h4 className="info-group-title">运行时信息</h4>
                <div className="system-info-grid system-info-grid--cols-3">
                  <div className="system-info-item system-info-item-highlight">
                    <div className="system-info-content">
                      <span className="system-info-label">运行时间</span>
                      <span className="system-info-value highlight">{formatUptime(metrics.uptimeSeconds)}</span>
                    </div>
                  </div>
                  <div className="system-info-item">
                    <div className="system-info-content">
                      <span className="system-info-label">进程数量</span>
                      <span className="system-info-value">{metrics.system.processCount}</span>
                    </div>
                  </div>
                  {metrics.system.loggedInUsers !== undefined && (
                    <div className="system-info-item">
                      <div className="system-info-content">
                        <span className="system-info-label">登录会话</span>
                        <span className="system-info-value">{metrics.system.loggedInUsers}</span>
                      </div>
                    </div>
                  )}
                  {metrics.system.tcpConnections !== undefined && (
                    <div className="system-info-item">
                      <div className="system-info-content">
                        <span className="system-info-label">TCP 连接数</span>
                        <span className="system-info-value">{metrics.system.tcpConnections}</span>
                      </div>
                    </div>
                  )}
                  {metrics.system.packageCount > 0 && (
                    <div className="system-info-item">
                      <div className="system-info-content">
                        <span className="system-info-label">已安装软件包</span>
                        <span className="system-info-value">{metrics.system.packageCount} <span className="system-info-sub">({metrics.system.packageManager})</span></span>
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* 性能指标 */}
              <div className="system-info-group">
                <h4 className="info-group-title">性能指标</h4>
                <div className="system-info-grid system-info-grid--cols-3">
                  <div className="system-info-item">
                    <div className="system-info-content">
                      <span className="system-info-label">磁盘读取</span>
                      <span className="system-info-value">{metrics.system.diskReadSpeed.toFixed(2)} MB/s</span>
                    </div>
                  </div>
                  <div className="system-info-item">
                    <div className="system-info-content">
                      <span className="system-info-label">磁盘写入</span>
                      <span className="system-info-value">{metrics.system.diskWriteSpeed.toFixed(2)} MB/s</span>
                    </div>
                  </div>
                  {metrics.system.temperature && metrics.system.temperature > 0 && (
                    <div className="system-info-item system-info-item-temperature">
                      <div className="system-info-content">
                        <span className="system-info-label">系统温度</span>
                        <span className="system-info-value temperature-value">{metrics.system.temperature.toFixed(1)}°C</span>
                      </div>
                    </div>
                  )}
                  {(metrics.system.networkRxSpeed !== undefined || metrics.system.networkTxSpeed !== undefined) && (
                    <>
                      <div className="system-info-item">
                        <div className="system-info-content">
                          <span className="system-info-label">网络下载</span>
                          <span className="system-info-value">{(metrics.system.networkRxSpeed || 0).toFixed(2)} MB/s</span>
                        </div>
                      </div>
                      <div className="system-info-item">
                        <div className="system-info-content">
                          <span className="system-info-label">网络上传</span>
                          <span className="system-info-value">{(metrics.system.networkTxSpeed || 0).toFixed(2)} MB/s</span>
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>

              {/* 延迟信息 */}
              {metrics.latency && (
                <div className="system-info-group">
                  <h4 className="info-group-title">网络延迟（采集端测量）</h4>
                  <p className="latency-section-hint">
                    下列指标均在采集器所在机器上探测：第一项为到监控中心 gRPC 地址的 TCP
                    建连时间；外网三项为采集端对公网站点的 TCP（:80 / :443）建连耗时，非 ICMP ping。
                  </p>
                  <div className="system-info-grid system-info-grid--cols-4">
                    <div className="system-info-item system-info-item-highlight">
                      <div className="system-info-content system-info-content--stack">
                        <span className="system-info-label">采集器到监控中心</span>
                        <span className="system-info-sublabel">与 CENTRAL_GRPC 的 TCP 连通</span>
                        <span className="system-info-value highlight">
                          {formatLatencyMs(metrics.latency.clientToServer)}
                        </span>
                      </div>
                    </div>
                    {metrics.latency.external && (
                      <>
                        <div className="system-info-item">
                          <div className="system-info-content system-info-content--stack">
                            <span className="system-info-label">百度 (baidu.com)</span>
                            <span className="system-info-sublabel">采集端 TCP 探测</span>
                            <span className="system-info-value">
                              {metrics.latency.external['baidu.com'] || '超时'}
                            </span>
                          </div>
                        </div>
                        <div className="system-info-item">
                          <div className="system-info-content system-info-content--stack">
                            <span className="system-info-label">谷歌 (google.com)</span>
                            <span className="system-info-sublabel">采集端 TCP 探测</span>
                            <span className="system-info-value">
                              {metrics.latency.external['google.com'] || '超时'}
                            </span>
                          </div>
                        </div>
                        <div className="system-info-item">
                          <div className="system-info-content system-info-content--stack">
                            <span className="system-info-label">GitHub (github.com)</span>
                            <span className="system-info-sublabel">采集端 TCP 探测</span>
                            <span className="system-info-value">
                              {metrics.latency.external['github.com'] || '超时'}
                            </span>
                          </div>
                        </div>
                      </>
                    )}
                  </div>
                </div>
              )}
            </div>
          </section>

          <section className="detail-section">
            <h3 className="detail-category-heading">处理器与内存</h3>
            <div className="detail-subsection">
              <h4 className="detail-subheading">处理器</h4>
              <div className="detail-plain">
                <div className="detail-grid detail-grid--cpu">
                  <div className="detail-item detail-item--span-full">
                    <span className="item-label">型号</span>
                    <span className="item-value">{metrics.cpu.model}</span>
                  </div>
                  <div className="detail-item">
                    <span className="item-label">核心数</span>
                    <span className="item-value">{metrics.cpu.cores}</span>
                  </div>
                  <div className="detail-item">
                    <span className="item-label">使用率</span>
                    <span className="item-value emphasize">{formatPercent(metrics.cpu.usagePercent)}</span>
                  </div>
                  {metrics.cpu.temperature && metrics.cpu.temperature > 0 && (
                    <div className="detail-item">
                      <span className="item-label">温度</span>
                      <span className="item-value">{metrics.cpu.temperature.toFixed(1)}°C</span>
                    </div>
                  )}
                  {metrics.cpu.loadAverages && metrics.cpu.loadAverages.length > 0 && (
                    <>
                      <div className="detail-item">
                        <span className="item-label">负载 (1 / 5 / 15 min)</span>
                        <span className="item-value">{metrics.cpu.loadAverages.map((l) => l.toFixed(2)).join(' / ')}</span>
                      </div>
                      {metrics.cpu.cores > 0 && (
                        <div className="detail-item">
                          <span className="item-label">相对核心（1 min 负载）</span>
                          <span className="item-value">
                            {formatPercent(Math.min((metrics.cpu.loadAverages[0] / metrics.cpu.cores) * 100, 100))}{' '}
                            <span className="item-sub">
                              （{metrics.cpu.loadAverages[0].toFixed(2)} / {metrics.cpu.cores} 核）
                            </span>
                          </span>
                        </div>
                      )}
                    </>
                  )}
                </div>
              </div>
              {metrics.cpu.perCoreUsage && metrics.cpu.perCoreUsage.length > 0 && (
                <div className="per-core-plain">
                  <h4 className="detail-subheading detail-subheading--inline">各核心使用率</h4>
                  <div className="per-core-grid">
                    {metrics.cpu.perCoreUsage.map((core) => (
                      <div key={core.core} className="per-core-chip">
                        <span className="per-core-name">核心 {core.core}</span>
                        <span className="per-core-pct">{formatPercent(core.percent)}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            <div className="detail-subsection">
              <h4 className="detail-subheading">内存</h4>
              <div className="detail-plain">
                <div className="detail-grid">
                  <div className="detail-item">
                    <span className="item-label">使用率</span>
                    <span className="item-value emphasize">{formatPercent(metrics.memory.usedPercent)}</span>
                  </div>
                  <div className="detail-item">
                    <span className="item-label">总容量</span>
                    <span className="item-value">{formatBytes(metrics.memory.totalBytes)}</span>
                  </div>
                  <div className="detail-item">
                    <span className="item-label">已使用</span>
                    <span className="item-value">{formatBytes(metrics.memory.usedBytes)}</span>
                  </div>
                  <div className="detail-item">
                    <span className="item-label">可用</span>
                    <span className="item-value">{formatBytes(metrics.memory.freeBytes)}</span>
                  </div>
                  {(metrics.memory.swapTotalBytes !== undefined ||
                    metrics.memory.swapType !== undefined) && (
                    <>
                      <div className="detail-item">
                        <span className="item-label">Swap 总量</span>
                        <span className="item-value">
                          {formatBytes(metrics.memory.swapTotalBytes ?? 0)}
                        </span>
                      </div>
                      <div className="detail-item">
                        <span className="item-label">Swap 已用</span>
                        <span className="item-value">
                          {formatBytes(metrics.memory.swapUsedBytes ?? 0)}
                          {metrics.memory.swapUsedPercent !== undefined && (
                            <span className="item-sub"> ({formatPercent(metrics.memory.swapUsedPercent)})</span>
                          )}
                        </span>
                      </div>
                      <div className="detail-item">
                        <span className="item-label">Swap 可用</span>
                        <span className="item-value">
                          {formatBytes(metrics.memory.swapFreeBytes ?? 0)}
                        </span>
                      </div>
                      <div className="detail-item">
                        <span className="item-label">Swap 类型</span>
                        <span className="item-value">{metrics.memory.swapType ?? '—'}</span>
                      </div>
                    </>
                  )}
                </div>
              </div>
            </div>
          </section>

          <section className="detail-section">
            <h3 className="detail-category-heading">存储与磁盘</h3>
            <ul className="storage-plain-list">
              {metrics.storage.map((disk, index) => (
                <li key={index} className="storage-plain-row">
                  <div className="storage-plain-head">
                    <span className="storage-mount">{disk.mount}</span>
                    <span className="storage-pct">{formatPercent(disk.usedPercent)}</span>
                  </div>
                  <div className="storage-meta">
                    已用 {formatBytes(disk.usedBytes)} / 共 {formatBytes(disk.totalBytes)} · 可用{' '}
                    {formatBytes(disk.freeBytes)}
                  </div>
                </li>
              ))}
            </ul>
          </section>

          {metrics.gpu && metrics.gpu.length > 0 && metrics.gpu[0].status !== 'not_available' && (
            <section className="detail-section">
              <h3 className="detail-category-heading">图形设备</h3>
              {metrics.gpu.map((gpu, index) => (
                <div key={index} className="gpu-item">
                  <div className="gpu-header">
                    <strong>{gpu.name}</strong>
                    <span className={`gpu-status ${gpu.status}`}>{gpu.status}</span>
                  </div>
                  <div className="detail-grid">
                    <div className="detail-item">
                      <span className="item-label">利用率</span>
                      <span className="item-value emphasize">{formatPercent(gpu.utilizationPercent)}</span>
                    </div>
                    <div className="detail-item">
                      <span className="item-label">显存总量</span>
                      <span className="item-value">{gpu.memoryTotalMB} MB</span>
                    </div>
                    <div className="detail-item">
                      <span className="item-label">显存使用</span>
                      <span className="item-value">{gpu.memoryUsedMB} MB</span>
                    </div>
                    {gpu.temperature && gpu.temperature > 0 && (
                      <div className="detail-item">
                        <span className="item-label">温度</span>
                        <span className="item-value">{gpu.temperature.toFixed(1)}°C</span>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </section>
          )}

          {metrics.network && metrics.network.length > 0 && (
            <section className="detail-section">
              <h3 className="detail-category-heading">网络</h3>
              <div className="network-compact" role="table" aria-label="网络接口">
                <div className="network-compact__head" role="row">
                  <span role="columnheader">接口</span>
                  <span role="columnheader">IP</span>
                  <span role="columnheader">MAC</span>
                  <span role="columnheader">接收</span>
                  <span role="columnheader">发送</span>
                </div>
                {metrics.network.map((iface, index) => (
                  <div key={index} className="network-compact__row" role="row">
                    <strong className="network-compact__iface" role="cell">
                      {iface.name}
                    </strong>
                    <span
                      className={
                        iface.ipAddress && iface.ipAddress !== 'N/A'
                          ? 'network-compact__ip network-compact__ip--ok'
                          : 'network-compact__placeholder'
                      }
                      role="cell"
                    >
                      {iface.ipAddress && iface.ipAddress !== 'N/A' ? iface.ipAddress : '—'}
                    </span>
                    <span
                      className="network-compact__mac"
                      role="cell"
                      title={iface.macAddress || undefined}
                    >
                      {iface.macAddress || '—'}
                    </span>
                    <span className="network-compact__num" role="cell" title="接收流量">
                      {formatBytes(iface.rxBytes)}
                    </span>
                    <span className="network-compact__num" role="cell" title="发送流量">
                      {formatBytes(iface.txBytes)}
                    </span>
                  </div>
                ))}
              </div>
            </section>
          )}

          {((metrics.system.topProcesses && metrics.system.topProcesses.length > 0) ||
            (metrics.system.dockerStats && metrics.system.dockerStats.available)) && (
            <section className="detail-section">
              <h3 className="detail-category-heading">进程与服务</h3>
              {metrics.system.topProcesses && metrics.system.topProcesses.length > 0 && (
                <div className="detail-subsection">
                  <h4 className="detail-subheading">资源占用较高的进程（前 10）</h4>
                  <div className="process-compact" role="table" aria-label="进程占用">
                    <div className="process-compact__head" role="row">
                      <span role="columnheader">#</span>
                      <span role="columnheader">进程</span>
                      <span role="columnheader">PID</span>
                      <span role="columnheader">CPU</span>
                      <span role="columnheader">内存</span>
                    </div>
                    {metrics.system.topProcesses.map((proc, index) => (
                      <div key={index} className="process-compact__row" role="row">
                        <span className="process-compact__rank" role="cell">
                          {index + 1}
                        </span>
                        <span className="process-compact__name" role="cell" title={proc.name}>
                          {proc.name}
                        </span>
                        <span className="process-compact__pid" role="cell">
                          {proc.pid}
                        </span>
                        <span className="process-compact__num" role="cell">
                          {proc.cpu}%
                        </span>
                        <span className="process-compact__num process-compact__mem" role="cell">
                          {proc.memory}%
                          <span className="process-compact__mem-abs"> {proc.memoryMB.toFixed(1)} MB</span>
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {metrics.system.dockerStats && metrics.system.dockerStats.available && (
                <div className="detail-subsection">
                  <h4 className="detail-subheading">Docker</h4>
                  {metrics.system.dockerStats.version && (
                    <div className="detail-grid">
                      <div className="detail-item">
                        <span className="item-label">Docker 版本</span>
                        <span className="item-value">{metrics.system.dockerStats.version}</span>
                      </div>
                      <div className="detail-item">
                        <span className="item-label">运行中的容器</span>
                        <span className="item-value">{metrics.system.dockerStats.running}</span>
                      </div>
                      <div className="detail-item">
                        <span className="item-label">停止的容器</span>
                        <span className="item-value">{metrics.system.dockerStats.stopped}</span>
                      </div>
                      <div className="detail-item">
                        <span className="item-label">镜像数量</span>
                        <span className="item-value">{metrics.system.dockerStats.imageCount}</span>
                      </div>
                    </div>
                  )}

                  {metrics.system.dockerStats.runningNames && metrics.system.dockerStats.runningNames.length > 0 && (
                    <div className="docker-containers-section">
                      <h4 className="detail-subheading detail-subheading--minor">运行中的容器</h4>
                      <div className="docker-names-list">
                        {metrics.system.dockerStats.runningNames.map((name, index) => (
                          <span key={index} className="docker-name-tag running">
                            {name}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}

                  {metrics.system.dockerStats.stoppedNames && metrics.system.dockerStats.stoppedNames.length > 0 && (
                    <div className="docker-containers-section">
                      <h4 className="detail-subheading detail-subheading--minor">停止的容器</h4>
                      <div className="docker-names-list">
                        {metrics.system.dockerStats.stoppedNames.map((name, index) => (
                          <span key={index} className="docker-name-tag stopped">
                            {name}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}

                  {metrics.system.dockerStats.imageNames && metrics.system.dockerStats.imageNames.length > 0 && (
                    <div className="docker-containers-section">
                      <h4 className="detail-subheading detail-subheading--minor">镜像列表</h4>
                      <div className="docker-names-list">
                        {metrics.system.dockerStats.imageNames.map((name, index) => (
                          <span key={index} className="docker-name-tag image">
                            {name}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}
            </section>
          )}

          {metrics.system.systemLogs && metrics.system.systemLogs.length > 0 && (
            <section className="detail-section">
              <h3 className="detail-category-heading">诊断与日志</h3>
              <h4 className="detail-subheading">系统日志</h4>
              <div className="logs-container">
                {metrics.system.systemLogs.map((log, index) => (
                  <div key={index} className="log-line">
                    {log}
                  </div>
                ))}
              </div>
            </section>
          )}
        </div>
      </div>
    </div>
  );
};