'use client'
import { use } from 'react'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { ArrowLeft, Cpu, Wifi, Monitor, Key, FileCode, Camera, Clock, X, CheckCircle, AlertTriangle, Package, ChevronLeft, ChevronRight, ZoomIn, Download, Edit, Check } from 'lucide-react'

/** Mock: 所有设备数据 */
const allDevices = [
  { id: 1, sn: 'GD30-2025-000001', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已激活', firmware: 'v2.3.5', productionDate: '2025-01-15 14:30', operator: '张工程师' },
  { id: 2, sn: 'GD30-2025-000002', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已激活', firmware: 'v2.3.5', productionDate: '2025-01-18 09:15', operator: '张工程师' },
  { id: 3, sn: 'GD30-2024-000056', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已出厂', firmware: 'v2.3.4', productionDate: '2024-12-20 16:00', operator: '李工程师' },
  { id: 4, sn: 'GT20-2025-000045', model: 'GD-20', type: '二维电法仪', status: '已激活', firmware: 'v1.8.5', productionDate: '2025-02-10 11:20',  operator: '王工程师' },
  { id: 5, sn: 'GT20-2025-000046', model: 'GD-20', type: '二维电法仪', status: '装配中', firmware: 'v1.8.5', productionDate: '2025-03-01 08:45', operator: '王工程师' },
  { id: 6, sn: 'GD30-2024-000078', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已出厂', firmware: 'v2.3.4', productionDate: '2024-11-05 13:30', operator: '张工程师' },
  { id: 7, sn: 'GD10-2024-000033', model: 'GD-10 Supreme', type: '入门级电法仪', status: '已激活', firmware: 'v1.5.2', productionDate: '2024-09-12 10:00', operator: '李工程师' },
  { id: 8, sn: 'GD30-2024-000089', model: 'GD-30 Supreme', type: '高密度电法仪', status: '装配中', firmware: 'v2.3.5', productionDate: '2025-03-05 15:10',operator: '张工程师' },
  { id: 9, sn: 'GT20-2025-000012', model: 'GD-20', type: '二维电法仪', status: '已激活', firmware: 'v1.8.5', productionDate: '2025-01-22 09:30', operator: '王工程师' },
  { id: 10, sn: 'GD30-2024-000102', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已出厂', firmware: 'v2.3.4', productionDate: '2024-10-18 14:00', operator: '李工程师' },
  { id: 11, sn: 'GD10-2024-000034', model: 'GD-10 Supreme', type: '入门级电法仪', status: '装配中', firmware: 'v1.5.2', productionDate: '2025-03-08 11:45', operator: '王工程师' },
  { id: 12, sn: 'GD30-2024-000145', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已激活', firmware: 'v2.3.5', productionDate: '2024-08-25 16:20', operator: '张工程师' },
]

/** Mock: 装机BOM清单 */
const bomData: Record<string, { name: string; sn: string; model: string; calibration: string }[]> = {
  'GD30-2025-000001': [
    { name: '主协板', sn: 'MB25011501', model: 'MB-V2.1', calibration: '-' },
    { name: '采集板', sn: 'RX25011000', model: 'RX-V2.1', calibration: '合格' },
    { name: '采集板', sn: 'RX25011000', model: 'RX-V2.1', calibration: '合格' },
    { name: '发射板', sn: 'TX25012000', model: 'TX-V2.1', calibration: '-' },
    { name: '升压板', sn: 'BO25020100', model: 'BP600-V2.1', calibration: '-' },
  ],
}

/** Mock: 授权信息 */
const licenseData: Record<string, { modules: string; expiry: string; status: string }> = {
  'GD30-2025-000001': { modules: '一维自电/电阻率/激电测试模块, 二维自电/电阻率/激电测试模块, 三维自电/电阻率/激电测试模块, 水上, 跨孔, 电流法', expiry: '2026-01-15', status: '生效' },
  'GD30-2025-000002': { modules: '一维自电/电阻率/激电测试模块, 二维自电/电阻率/激电测试模块, 三维自电/电阻率/激电测试模块, 水上, 跨孔, 电流法', expiry: '2025-12-31', status: '生效' },
  'GT20-2025-000045': { modules: '一维自电/电阻率/激电测试模块, 二维自电/电阻率/激电测试模块, 三维自电/电阻率/激电测试模块', expiry: '2025-06-30', status: '生效' },
}

/** Mock: 配置文件（含详细参数） */
interface ConfigDetail {
  name: string
  version: string
  uploadDate: string
  params: {
    transmission: { maxVoltage: string; maxCurrent: string; waveformPattern: string; pulseWidths: string[]; waveforms: string[]; fullWaveform: boolean }
    acquisition: { channels: number; sampleRates: string[]; voltageRanges: string[] }
    protection: { overVoltage: { enabled: boolean; threshold: string }; overCurrent: { enabled: boolean; threshold: string }; shortCircuit: boolean; overTemp: { enabled: boolean; threshold: string } }
    network: { wifiSsidPrefix: string }
  }
}
const configData: Record<string, ConfigDetail> = {
  'GD30-2025-000001': {
    name: 'CFG-GD30-v1.3.0', version: 'v1.3.0', uploadDate: '2025-01-15',
    params: {
      transmission: { maxVoltage: '1500V', maxCurrent: '10A', waveformPattern: '0+0-、+0-0、+-', pulseWidths: ['0.25s', '0.5s', '1s', '2s', '4s', '8s', '16s', '32s', '64s'], waveforms: ['0+0-', '+0-0', '+-'], fullWaveform: true },
      acquisition: { channels: 12, sampleRates: ['50Hz', '60Hz', '100Hz', '1000Hz'], voltageRanges: ['±2.5V', '±80V', '±600V'] },
      protection: { overVoltage: { enabled: true, threshold: '1600V' }, overCurrent: { enabled: true, threshold: '12A' }, shortCircuit: true, overTemp: { enabled: true, threshold: '75°C' } },
      network: { wifiSsidPrefix: 'GD30-Supreme' },
    },
  },
  'GD30-2025-000002': {
    name: 'CFG-GD30-v1.3.0', version: 'v1.3.0', uploadDate: '2025-01-18',
    params: {
      transmission: { maxVoltage: '1500V', maxCurrent: '10A', waveformPattern: '0+0-、+0-0、+-', pulseWidths: ['0.25s', '0.5s', '1s', '2s', '4s', '8s', '16s', '32s', '64s'], waveforms: ['0+0-', '+0-0', '+-'], fullWaveform: true },
      acquisition: { channels: 12, sampleRates: ['50Hz', '60Hz', '100Hz', '1000Hz'], voltageRanges: ['±2.5V', '±80V', '±600V'] },
      protection: { overVoltage: { enabled: true, threshold: '1600V' }, overCurrent: { enabled: true, threshold: '12A' }, shortCircuit: true, overTemp: { enabled: true, threshold: '75°C' } },
      network: { wifiSsidPrefix: 'GD30-Supreme' },
    },
  },
  'GT20-2025-000045': {
    name: 'CFG-GD20-v1.1.0', version: 'v1.1.0', uploadDate: '2025-02-10',
    params: {
      transmission: { maxVoltage: '800V', maxCurrent: '5A', waveformPattern: '0+0-、+0-0', pulseWidths: ['0.25s', '0.5s', '1s', '2s', '4s', '8s'], waveforms: ['0+0-', '+0-0'], fullWaveform: false },
      acquisition: { channels: 6, sampleRates: ['50Hz', '60Hz'], voltageRanges: ['±2.5V', '±80V'] },
      protection: { overVoltage: { enabled: true, threshold: '900V' }, overCurrent: { enabled: true, threshold: '6A' }, shortCircuit: true, overTemp: { enabled: true, threshold: '70°C' } },
      network: { wifiSsidPrefix: 'GD20' },
    },
  },
}

/** Mock: 操作日志 */
const operationLogs = [
  { date: '2025-01-15 14:30', action: '设备登记', operator: '张工程师', detail: '完成设备登记，型号 GD-30 Supreme' },
  { date: '2025-01-15 15:00', action: '装配完成', operator: '张工程师', detail: '装配 Checklist 全部通过' },
  { date: '2025-01-15 16:00', action: '授权项写入', operator: '系统', detail: '写入全模块授权项' },
  { date: '2025-01-15 16:05', action: '配置写入', operator: '系统', detail: '写入配置文件 CFG-GD30-v1.3.0' },
  { date: '2025-01-15 16:10', action: '固件校验', operator: '系统', detail: '固件版本 v2.3.5 校验通过' },
  { date: '2025-01-16 09:00', action: '出厂检测', operator: '李工程师', detail: '出厂检测通过，设备状态变更为已出厂' },
]

/** Mock: 装配 Checklist（含照片和记录） */
const checklistData = [
  { name: '主板SN扫码绑定', passed: true, photos: ['https://picsum.photos/seed/mb1/800/600', 'https://picsum.photos/seed/mb2/800/600'], note: '主板SN MB25011501 扫码绑定成功，条码清晰可读' },
  { name: '采集板SN录入（×6）', passed: true, photos: ['https://picsum.photos/seed/rx1/800/600', 'https://picsum.photos/seed/rx2/800/600', 'https://picsum.photos/seed/rx3/800/600'], note: '6块采集板全部录入完成，SN号已核对一致' },
  { name: '发射板安装检查', passed: true, photos: ['https://picsum.photos/seed/tx1/800/600'], note: '发射板安装到位，螺丝紧固力矩达标' },
  { name: '升压板安装检查', passed: true, photos: ['https://picsum.photos/seed/bp1/800/600'], note: '升压板安装完成，接线端子牢固' },
  { name: '线缆连接检查', passed: true, photos: ['https://picsum.photos/seed/cable1/800/600', 'https://picsum.photos/seed/cable2/800/600'], note: '所有线缆连接正确，无松动现象' },
  { name: '整机通电测试', passed: true, photos: ['https://picsum.photos/seed/power1/800/600'], note: '通电正常，各指示灯状态正确' },
  { name: 'GPS/北斗模块检测', passed: true, photos: ['https://picsum.photos/seed/gps1/800/600'], note: 'GPS/北斗信号接收正常，定位精度达标' },
  { name: 'WiFi通信测试', passed: true, photos: [], note: 'WiFi连接稳定，信号强度 -45dBm' },
  { name: '蓝牙通信测试', passed: true, photos: [], note: '蓝牙配对成功，数据传输正常' },
  { name: '采集通道校准验证', passed: true, photos: ['https://picsum.photos/seed/cal1/800/600', 'https://picsum.photos/seed/cal2/800/600'], note: '所有采集通道校准偏差 < 0.1%，符合标准' },
  { name: '发射电压测试', passed: true, photos: ['https://picsum.photos/seed/volt1/800/600'], note: '发射电压 800V 测试通过，波形正常' },
  { name: '电池安装与充电测试', passed: true, photos: ['https://picsum.photos/seed/bat1/800/600'], note: '电池安装到位，充电电流正常' },
  { name: 'IP66防护检测', passed: true, photos: ['https://picsum.photos/seed/ip1/800/600', 'https://picsum.photos/seed/ip2/800/600'], note: 'IP66防护等级测试通过，密封良好' },
  { name: '固件版本校验', passed: true, photos: [], note: '固件版本 v2.3.5 校验通过' },
  { name: '配置文件写入', passed: true, photos: [], note: '配置文件 CFG-GD30-v1.3.0 写入成功' },
  { name: '授权文件写入', passed: true, photos: [], note: '全模块授权项写入完成' },
  { name: '整机功能测试', passed: true, photos: ['https://picsum.photos/seed/func1/800/600'], note: '整机功能测试全部通过' },
  { name: '数据采集验证', passed: true, photos: ['https://picsum.photos/seed/data1/800/600', 'https://picsum.photos/seed/data2/800/600'], note: '数据采集验证通过，采集数据与标准值一致' },
  { name: '外观检查', passed: true, photos: ['https://picsum.photos/seed/look1/800/600'], note: '外观无划痕、无变形，表面处理合格' },
  { name: '标签粘贴', passed: true, photos: ['https://picsum.photos/seed/label1/800/600'], note: 'SN标签、型号标签、安全标签粘贴完成' },
  { name: '配件清点', passed: true, photos: ['https://picsum.photos/seed/acc1/800/600'], note: '配件清单核对完成，数量一致' },
  { name: '包装检查', passed: true, photos: ['https://picsum.photos/seed/pack1/800/600', 'https://picsum.photos/seed/pack2/800/600'], note: '包装完好，防震材料到位' },
]

function getStatusStyle(status: string) {
  switch (status) {
    case '已激活': return { backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' }
    case '已出厂': return { backgroundColor: '#FFF7E6', color: '#FA8C16', border: '1px solid #FFD591' }
    case '装配中': return { backgroundColor: '#eef5f0', color: '#4a7c59', border: '1px solid #a3c4ad' }
    default: return { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #D9D9D9' }
  }
}

function getStatusIcon(status: string) {
  switch (status) {
    case '已激活': return <Wifi size={16} style={{ color: '#52C41A' }} />
    case '已出厂': return <Monitor size={16} style={{ color: '#FA8C16' }} />
    case '装配中': return <Cpu size={16} style={{ color: '#4a7c59' }} />
    default: return null
  }
}

export default function DeviceDetailPage({ params }: { params: Promise<{ sn: string }> }) {
  const { sn } = use(params)
  const router = useRouter()
  const [activeTab, setActiveTab] = useState('overview')
  const [expandedItem, setExpandedItem] = useState<number | null>(null)
  const [lightbox, setLightbox] = useState<{ photos: string[]; index: number } | null>(null)
  const [licenseEditOpen, setLicenseEditOpen] = useState(false)
  const [configEditOpen, setConfigEditOpen] = useState(false)

  const device = allDevices.find(d => d.sn === sn)
  const bom = bomData[sn] || []
  const license = licenseData[sn]
  const config = configData[sn]

  if (!device) {
    return (
      <div style={{ padding: 24, textAlign: 'center', paddingTop: 120 }}>
        <AlertTriangle size={48} style={{ color: '#FAAD14', marginBottom: 16 }} />
        <h2 style={{ fontSize: 20, fontWeight: 600, marginBottom: 8 }}>设备未找到</h2>
        <p style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)', marginBottom: 24 }}>SN号 {sn} 对应的设备不存在</p>
        <button onClick={() => router.push('/devices')} style={{ padding: '8px 24px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>返回设备列表</button>
      </div>
    )
  }

  const tabs = [
    { key: 'overview', label: '概览' },
    { key: 'bom', label: '装机清单' },
    { key: 'checklist', label: '装配记录' },
    { key: 'license', label: '授权项信息' },
    { key: 'config', label: '配置文件' },
    { key: 'logs', label: '操作日志' },
  ]

  return (
    <div style={{ padding: 24 }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
        <button onClick={() => router.push('/devices')} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer' }}>
          <ArrowLeft size={16} />
        </button>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <h2 style={{ fontSize: 20, fontWeight: 600, margin: 0 }}>{device.sn}</h2>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              {getStatusIcon(device.status)}
              <span style={{ ...getStatusStyle(device.status), padding: '2px 10px', borderRadius: 4, fontSize: 12 }}>{device.status}</span>
            </div>
          </div>
          <p style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)', margin: '4px 0 0' }}>{device.model} · {device.type}</p>
        </div>
      </div>

      {/* Info Cards Row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <Package size={16} style={{ color: '#4a7c59' }} />
            <span style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>板卡数量</span>
          </div>
          <div style={{ fontSize: 22, fontWeight: 600, color: '#4a7c59' }}>{bom.length}</div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid #F0F0F0', marginBottom: 24 }}>
        {tabs.map(tab => (
          <button key={tab.key} onClick={() => setActiveTab(tab.key)} style={{
            padding: '10px 20px', fontSize: 14, cursor: 'pointer', border: 'none', backgroundColor: 'transparent',
            borderBottom: activeTab === tab.key ? '2px solid #4a7c59' : '2px solid transparent',
            color: activeTab === tab.key ? '#4a7c59' : 'rgba(0,0,0,0.65)', fontWeight: activeTab === tab.key ? 600 : 400,
          }}>{tab.label}</button>
        ))}
      </div>

      {/* Tab Content */}
      {activeTab === 'overview' && (
        <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
          <h3 style={{ fontSize: 16, fontWeight: 600, margin: '0 0 20px' }}>基本信息</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { label: '设备SN', value: device.sn },
              { label: '设备型号', value: device.model },
              { label: '设备类型', value: device.type },
              { label: '固件版本', value: device.firmware },
              { label: '生产日期', value: device.productionDate },
              { label: '登记人', value: device.operator },
              { label: '设备状态', value: device.status, isStatus: true },
            ].map(item => (
              <div key={item.label}>
                <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>{item.label}</div>
                {item.isStatus ? (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    {getStatusIcon(item.value)}
                    <span style={{ ...getStatusStyle(item.value), padding: '2px 8px', borderRadius: 4, fontSize: 12 }}>{item.value}</span>
                  </div>
                ) : (
                  <div style={{ fontSize: 14, color: item.value === '-' ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0.85)', fontWeight: 500 }}>{item.value}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {activeTab === 'bom' && (
        <div style={{ backgroundColor: '#fff', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' }}>
          <div style={{ padding: '16px 20px', borderBottom: '1px solid #F0F0F0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>装机清单 BOM</h3>
            <span style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>共 {bom.length} 项</span>
          </div>
          {bom.length > 0 ? (
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
                <tr style={{ backgroundColor: '#FAFAFA' }}>
                  {['序号', '物料名称', '板卡SN', '型号', '校准状态'].map(h => (
                    <th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: 13, fontWeight: 600, color: 'rgba(0,0,0,0.85)', borderBottom: '1px solid #F0F0F0' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {bom.map((item, i) => (
                  <tr key={i} style={{ borderBottom: '1px solid #F0F0F0' }}>
                    <td style={{ padding: '12px 16px', fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>{i + 1}</td>
                    <td style={{ padding: '12px 16px', fontSize: 13 }}>{item.name}</td>
                    <td style={{ padding: '12px 16px', fontSize: 13, fontWeight: 500 }}>{item.sn}</td>
                    <td style={{ padding: '12px 16px', fontSize: 13, color: 'rgba(0,0,0,0.65)' }}>{item.model}</td>
                    <td style={{ padding: '12px 16px' }}>
                      {item.calibration === '-' ? (
                        <span style={{ fontSize: 12, color: 'rgba(0,0,0,0.25)' }}>无需校准</span>
                      ) : (
                        <span style={{ padding: '2px 8px', borderRadius: 4, fontSize: 12, backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' }}>{item.calibration}</span>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <div style={{ padding: 40, textAlign: 'center', color: 'rgba(0,0,0,0.25)', fontSize: 14 }}>暂无装机清单数据</div>
          )}
        </div>
      )}

      {activeTab === 'checklist' && (
        <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <div>
              <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>装配记录</h3>
              <p style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', margin: '4px 0 0' }}>点击项目查看照片和装配记录详情</p>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>
                通过 <span style={{ color: '#52C41A', fontWeight: 600 }}>{checklistData.filter(c => c.passed).length}</span>/{checklistData.length}
              </span>
              <button
                onClick={() => {
                  const rows = checklistData.map((item, i) => [
                    i + 1,
                    item.name,
                    item.passed ? '通过' : '未通过',
                    item.note || '-',
                    item.photos.length > 0 ? `${item.photos.length}张` : '无',
                  ])
                  const header = ['序号', '检查项', '结果', '装配记录', '照片数量']
                  const csvContent = '\uFEFF' + [header, ...rows].map(r => r.map(c => `"${c}"`).join(',')).join('\n')
                  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
                  const url = URL.createObjectURL(blob)
                  const a = document.createElement('a')
                  a.href = url
                  a.download = `装配记录_${sn}.csv`
                  a.click()
                  URL.revokeObjectURL(url)
                }}
                style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 14px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 13 }}
              >
                <Download size={14} />导出记录
              </button>
            </div>
          </div>
          <div style={{ height: 6, backgroundColor: '#F0F0F0', borderRadius: 3, marginBottom: 20, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${(checklistData.filter(c => c.passed).length / checklistData.length) * 100}%`, backgroundColor: '#52C41A', borderRadius: 3 }} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {checklistData.map((item, i) => {
              const isExpanded = expandedItem === i
              return (
                <div key={i}>
                  <div
                    onClick={() => setExpandedItem(isExpanded ? null : i)}
                    style={{
                      display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px', borderRadius: isExpanded ? '8px 8px 0 0' : 8,
                      backgroundColor: item.passed ? '#F6FFED' : '#FFF1F0', border: item.passed ? '1px solid #B7EB8F' : '1px solid #FFCCC7',
                      borderBottom: isExpanded ? 'none' : undefined, cursor: 'pointer', transition: 'background-color 0.15s',
                    }}
                  >
                    <div style={{ width: 20, height: 20, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: item.passed ? '#52C41A' : '#FF4D4F', flexShrink: 0 }}>
                      <CheckCircle size={14} color="#fff" />
                    </div>
                    <div style={{ width: 28, height: 28, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600, backgroundColor: item.passed ? '#eef5f0' : '#FFF2F0', color: item.passed ? '#4a7c59' : '#FF4D4F', flexShrink: 0 }}>{i + 1}</div>
                    <span style={{ fontSize: 14, color: item.passed ? '#4a7c59' : '#FF4D4F', flex: 1 }}>{item.name}</span>
                    {item.photos.length > 0 && (
                      <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'rgba(0,0,0,0.45)', padding: '2px 8px', borderRadius: 4, backgroundColor: 'rgba(0,0,0,0.04)' }}>
                        <Camera size={12} />{item.photos.length}张照片
                      </span>
                    )}
                    <span style={{ fontSize: 12, color: item.passed ? '#52C41A' : '#FF4D4F' }}>{item.passed ? '通过' : '未通过'}</span>
                    <ChevronRight size={14} style={{ color: 'rgba(0,0,0,0.25)', transform: isExpanded ? 'rotate(90deg)' : 'none', transition: 'transform 0.15s' }} />
                  </div>
                  {isExpanded && (
                    <div style={{
                      padding: 16, backgroundColor: item.passed ? '#FCFFF8' : '#FFFAFA',
                      border: item.passed ? '1px solid #B7EB8F' : '1px solid #FFCCC7', borderTop: 'none',
                      borderRadius: '0 0 8px 8px',
                    }}>
                      {item.note && (
                        <div style={{ marginBottom: item.photos.length > 0 ? 12 : 0 }}>
                          <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)', marginBottom: 4 }}>装配记录</div>
                          <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.85)', lineHeight: 1.6 }}>{item.note}</div>
                        </div>
                      )}
                      {item.photos.length > 0 && (
                        <div>
                          <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)', marginBottom: 8 }}>装配照片</div>
                          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                            {item.photos.map((photo, pi) => (
                              <div
                                key={pi}
                                onClick={(e) => { e.stopPropagation(); setLightbox({ photos: item.photos, index: pi }) }}
                                style={{
                                  width: 100, height: 75, borderRadius: 6, overflow: 'hidden', cursor: 'pointer',
                                  border: '1px solid #e8e8e8', position: 'relative',
                                }}
                              >
                                <img src={photo} alt={`${item.name} 照片${pi + 1}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                <div style={{
                                  position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                                  transition: 'background-color 0.15s',
                                }}
                                  onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.backgroundColor = 'rgba(0,0,0,0.3)'; (e.currentTarget.querySelector('svg') as SVGElement).style.opacity = '1' }}
                                  onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.backgroundColor = 'rgba(0,0,0,0)'; (e.currentTarget.querySelector('svg') as SVGElement).style.opacity = '0' }}
                                >
                                  <ZoomIn size={20} color="#fff" style={{ opacity: 0, transition: 'opacity 0.15s' }} />
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                      {!item.note && item.photos.length === 0 && (
                        <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.25)' }}>暂无装配记录和照片</div>
                      )}
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        </div>
      )}

      {/* Photo Lightbox */}
      {lightbox && (
        <div
          onClick={() => setLightbox(null)}
          style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.85)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        >
          <button onClick={() => setLightbox(null)} style={{ position: 'absolute', top: 16, right: 16, background: 'none', border: 'none', cursor: 'pointer', padding: 8 }}>
            <X size={24} color="#fff" />
          </button>
          <div style={{ position: 'absolute', bottom: 20, color: '#fff', fontSize: 14 }}>
            {lightbox.index + 1} / {lightbox.photos.length}
          </div>
          {lightbox.photos.length > 1 && (
            <>
              <button
                onClick={(e) => { e.stopPropagation(); setLightbox({ ...lightbox, index: (lightbox.index - 1 + lightbox.photos.length) % lightbox.photos.length }) }}
                style={{ position: 'absolute', left: 16, background: 'rgba(255,255,255,0.15)', border: 'none', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
              >
                <ChevronLeft size={24} color="#fff" />
              </button>
              <button
                onClick={(e) => { e.stopPropagation(); setLightbox({ ...lightbox, index: (lightbox.index + 1) % lightbox.photos.length }) }}
                style={{ position: 'absolute', right: 16, background: 'rgba(255,255,255,0.15)', border: 'none', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
              >
                <ChevronRight size={24} color="#fff" />
              </button>
            </>
          )}
          <img
            onClick={(e) => e.stopPropagation()}
            src={lightbox.photos[lightbox.index]}
            alt="装配照片"
            style={{ maxWidth: '85vw', maxHeight: '85vh', borderRadius: 8, objectFit: 'contain' }}
          />
        </div>
      )}

      {activeTab === 'license' && (
        <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>授权项信息</h3>
            <button onClick={() => setLicenseEditOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 14px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 13, color: '#4a7c59' }}>
              <Edit size={14} />修改授权项
            </button>
          </div>
          {license ? (
            <div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginBottom: 24 }}>
               
                <div>
                  <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>到期时间</div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{license.expiry}</div>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 8 }}>授权项模块</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {license.modules.split(', ').map(m => (
                    <span key={m} style={{ padding: '4px 12px', borderRadius: 6, fontSize: 13, backgroundColor: '#eef5f0', color: '#4a7c59', border: '1px solid #a3c4ad' }}>{m}</span>
                  ))}
                </div>
              </div>
            </div>
          ) : (
            <div style={{ padding: 40, textAlign: 'center' }}>
              <Key size={32} style={{ color: 'rgba(0,0,0,0.15)', marginBottom: 12 }} />
              <div style={{ fontSize: 14, color: 'rgba(0,0,0,0.25)', marginBottom: 16 }}>该设备暂未配置授权项</div>
              <button onClick={() => setLicenseEditOpen(true)} style={{ padding: '8px 20px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>配置授权项</button>
            </div>
          )}
        </div>
      )}

      {/* License Edit Drawer */}
      {licenseEditOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 50 }}>
          <div onClick={() => setLicenseEditOpen(false)} style={{ position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.45)' }} />
          <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 560, backgroundColor: '#fff', boxShadow: '-2px 0 8px rgba(0,0,0,0.15)', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 24px', borderBottom: '1px solid #F0F0F0' }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>修改授权项 — {sn}</h3>
              <button onClick={() => setLicenseEditOpen(false)} style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 4 }}><X size={20} /></button>
            </div>
            <div style={{ flex: 1, overflow: 'auto', padding: 24 }}>
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontSize: 14, fontWeight: 500, marginBottom: 8 }}>到期时间</label>
                <input type="date" defaultValue={license?.expiry || ''} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
              </div>
              <div style={{ marginBottom: 12 }}>
                <label style={{ display: 'block', fontSize: 14, fontWeight: 500, marginBottom: 8 }}>授权模块</label>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {['一维自电/电阻率/激电测试模块', '二维自电/电阻率/激电测试模块', '三维自电/电阻率/激电测试模块', '水上', '跨孔', '电流法'].map(m => {
                    const isSelected = license?.modules.includes(m) ?? false
                    return (
                      <label key={m} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 6, backgroundColor: isSelected ? '#eef5f0' : '#FAFAFA', border: isSelected ? '1px solid #a3c4ad' : '1px solid #F0F0F0', cursor: 'pointer' }}>
                        <div style={{ width: 16, height: 16, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: isSelected ? '#4a7c59' : '#fff', border: isSelected ? 'none' : '1px solid #D9D9D9' }}>
                          {isSelected && <Check size={11} color="#fff" />}
                        </div>
                        <span style={{ fontSize: 13, color: isSelected ? '#4a7c59' : 'rgba(0,0,0,0.65)' }}>{m}</span>
                      </label>
                    )
                  })}
                </div>
              </div>
            </div>
            <div style={{ padding: '16px 24px', borderTop: '1px solid #F0F0F0', display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
              <button onClick={() => setLicenseEditOpen(false)} style={{ padding: '8px 20px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>取消</button>
              <button onClick={() => setLicenseEditOpen(false)} style={{ padding: '8px 20px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>保存</button>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'config' && (
        <div>
          {config ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* 基本信息 */}
              <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                  <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>配置文件</h3>
                  <button onClick={() => setConfigEditOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 14px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 13, color: '#4a7c59' }}>
                    <Edit size={14} />修改参数
                  </button>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
                  <div>
                    <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>配置名称</div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{config.name}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>版本</div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{config.version}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>写入日期</div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{config.uploadDate}</div>
                  </div>
                </div>
              </div>

              {/* 发射参数 */}
              <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
                <h3 style={{ fontSize: 15, fontWeight: 600, margin: '0 0 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 4, height: 16, borderRadius: 2, backgroundColor: '#4a7c59', display: 'inline-block' }} />
                  发射参数
                </h3>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
                  <div>
                    <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>最大发射电压</div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{config.params.transmission.maxVoltage}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>最大发射电流</div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{config.params.transmission.maxCurrent}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>发射波形</div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{config.params.transmission.waveformPattern}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>支持全波形测量</div>
                    <span style={{
                      padding: '2px 10px', borderRadius: 4, fontSize: 12,
                      backgroundColor: config.params.transmission.fullWaveform ? '#F6FFED' : '#FAFAFA',
                      color: config.params.transmission.fullWaveform ? '#52C41A' : 'rgba(0,0,0,0.45)',
                      border: config.params.transmission.fullWaveform ? '1px solid #B7EB8F' : '1px solid #D9D9D9',
                    }}>{config.params.transmission.fullWaveform ? '支持' : '不支持'}</span>
                  </div>
                </div>
                <div style={{ marginTop: 16 }}>
                  <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 8 }}>发射脉宽</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {config.params.transmission.pulseWidths.map(pw => (
                      <span key={pw} style={{ padding: '3px 10px', borderRadius: 4, fontSize: 12, backgroundColor: '#eef5f0', color: '#4a7c59', border: '1px solid #a3c4ad' }}>{pw}</span>
                    ))}
                  </div>
                </div>
                <div style={{ marginTop: 12 }}>
                  <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 8 }}>发射波形</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {config.params.transmission.waveforms.map(wf => (
                      <span key={wf} style={{ padding: '3px 10px', borderRadius: 4, fontSize: 12, backgroundColor: '#f5f5f5', color: 'rgba(0,0,0,0.65)', border: '1px solid #e8e8e8', fontFamily: 'monospace' }}>{wf}</span>
                    ))}
                  </div>
                </div>
              </div>

              {/* 采集参数 */}
              <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
                <h3 style={{ fontSize: 15, fontWeight: 600, margin: '0 0 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 4, height: 16, borderRadius: 2, backgroundColor: '#597EF7', display: 'inline-block' }} />
                  采集参数
                </h3>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
                  <div>
                    <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>支持通道数</div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{config.params.acquisition.channels} 通道</div>
                  </div>
                </div>
                <div style={{ marginTop: 16 }}>
                  <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 8 }}>采样率</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {config.params.acquisition.sampleRates.map(sr => (
                      <span key={sr} style={{ padding: '3px 10px', borderRadius: 4, fontSize: 12, backgroundColor: '#F0F5FF', color: '#597EF7', border: '1px solid #ADC6FF' }}>{sr}</span>
                    ))}
                  </div>
                </div>
                <div style={{ marginTop: 12 }}>
                  <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 8 }}>电压测量范围</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {config.params.acquisition.voltageRanges.map(vr => (
                      <span key={vr} style={{ padding: '3px 10px', borderRadius: 4, fontSize: 12, backgroundColor: '#F0F5FF', color: '#597EF7', border: '1px solid #ADC6FF' }}>{vr}</span>
                    ))}
                  </div>
                </div>
              </div>

              {/* 保护参数 */}
              <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
                <h3 style={{ fontSize: 15, fontWeight: 600, margin: '0 0 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 4, height: 16, borderRadius: 2, backgroundColor: '#FA8C16', display: 'inline-block' }} />
                  保护参数
                </h3>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
                  {[
                    { label: '过压保护', enabled: config.params.protection.overVoltage.enabled, value: config.params.protection.overVoltage.threshold },
                    { label: '过流保护', enabled: config.params.protection.overCurrent.enabled, value: config.params.protection.overCurrent.threshold },
                    { label: '短路保护', enabled: config.params.protection.shortCircuit, value: null },
                    { label: '高温保护', enabled: config.params.protection.overTemp.enabled, value: config.params.protection.overTemp.threshold },
                  ].map(item => (
                    <div key={item.label} style={{ padding: 14, borderRadius: 8, backgroundColor: item.enabled ? '#FFFBE6' : '#FAFAFA', border: item.enabled ? '1px solid #FFE58F' : '1px solid #F0F0F0' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                        <div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: item.enabled ? '#52C41A' : '#D9D9D9' }} />
                        <span style={{ fontSize: 13, color: 'rgba(0,0,0,0.65)' }}>{item.label}</span>
                      </div>
                      <div style={{ fontSize: 13, fontWeight: 500, color: item.enabled ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.25)' }}>
                        {item.enabled ? (item.value ? `阈值 ${item.value}` : '已启用') : '未启用'}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* 网络参数 */}
              <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
                <h3 style={{ fontSize: 15, fontWeight: 600, margin: '0 0 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 4, height: 16, borderRadius: 2, backgroundColor: '#52C41A', display: 'inline-block' }} />
                  网络参数
                </h3>
                <div>
                  <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 6 }}>WiFi SSID 前缀</div>
                  <div style={{ fontSize: 14, fontWeight: 500, fontFamily: 'monospace', padding: '4px 10px', backgroundColor: '#f5f5f5', borderRadius: 4, display: 'inline-block' }}>{config.params.network.wifiSsidPrefix}</div>
                </div>
              </div>
            </div>
          ) : (
            <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, margin: '0 0 20px' }}>配置文件</h3>
              <div style={{ padding: 40, textAlign: 'center' }}>
                <FileCode size={32} style={{ color: 'rgba(0,0,0,0.15)', marginBottom: 12 }} />
                <div style={{ fontSize: 14, color: 'rgba(0,0,0,0.25)' }}>该设备暂未写入配置文件</div>
                <button onClick={() => setConfigEditOpen(true)} style={{ marginTop: 16, padding: '8px 20px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>配置参数</button>
              </div>
            </div>
          )}
        </div>
      )}

      {/* Config Edit Drawer */}
      {configEditOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 50 }}>
          <div onClick={() => setConfigEditOpen(false)} style={{ position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.45)' }} />
          <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 560, backgroundColor: '#fff', boxShadow: '-2px 0 8px rgba(0,0,0,0.15)', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 24px', borderBottom: '1px solid #F0F0F0' }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>修改配置参数 — {sn}</h3>
              <button onClick={() => setConfigEditOpen(false)} style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 4 }}><X size={20} /></button>
            </div>
            <div style={{ flex: 1, overflow: 'auto', padding: 24 }}>
              {config && (
                <>
                  <div style={{ marginBottom: 8, fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>当前配置：{config.name} ({config.version})</div>

                  <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 12, marginTop: 16, paddingBottom: 8, borderBottom: '1px solid #F0F0F0' }}>发射参数</h4>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 20 }}>
                    <div>
                      <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>最大发射电压</label>
                      <select defaultValue={config.params.transmission.maxVoltage} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
                        {['500V', '800V', '1000V', '1200V', '1500V'].map(v => <option key={v} value={v}>{v}</option>)}
                      </select>
                    </div>
                    <div>
                      <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>最大发射电流</label>
                      <select defaultValue={config.params.transmission.maxCurrent} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
                        {['2A', '5A', '8A', '10A', '15A'].map(v => <option key={v} value={v}>{v}</option>)}
                      </select>
                    </div>
                    <div>
                      <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>发射波形</label>
                      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                        {['0+0-', '+0-0', '+-'].map(w => {
                          const selected = config.params.transmission.waveforms.includes(w)
                          return (
                            <span key={w} style={{ padding: '6px 14px', borderRadius: 6, fontSize: 13, border: selected ? '1px solid #4a7c59' : '1px solid #D9D9D9', backgroundColor: selected ? '#eef5f0' : '#fff', color: selected ? '#4a7c59' : 'rgba(0,0,0,0.65)' }}>{w}</span>
                          )
                        })}
                      </div>
                    </div>
                    <div>
                      <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>
                        <input type="checkbox" defaultChecked={config.params.transmission.fullWaveform} />全波形测量
                      </label>
                    </div>
                  </div>

                  <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #F0F0F0' }}>采集参数</h4>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 20 }}>
                    <div>
                      <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>支持通道数</label>
                      <select defaultValue={String(config.params.acquisition.channels)} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
                        {['1', '6', '12'].map(v => <option key={v} value={v}>{v}</option>)}
                      </select>
                    </div>
                  </div>

                  <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #F0F0F0' }}>保护参数</h4>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 20 }}>
                    <div>
                      <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>
                        <input type="checkbox" defaultChecked={config.params.protection.overVoltage.enabled} />过压保护
                      </label>
                      <input defaultValue={config.params.protection.overVoltage.threshold} placeholder="阈值" style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
                    </div>
                    <div>
                      <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>
                        <input type="checkbox" defaultChecked={config.params.protection.overCurrent.enabled} />过流保护
                      </label>
                      <input defaultValue={config.params.protection.overCurrent.threshold} placeholder="阈值" style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
                    </div>
                    <div>
                      <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'rgba(0,0,0,0.65)' }}>
                        <input type="checkbox" defaultChecked={config.params.protection.shortCircuit} />短路保护
                      </label>
                    </div>
                    <div>
                      <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>
                        <input type="checkbox" defaultChecked={config.params.protection.overTemp.enabled} />高温保护
                      </label>
                      <input defaultValue={config.params.protection.overTemp.threshold} placeholder="阈值" style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
                    </div>
                  </div>

                  <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #F0F0F0' }}>网络参数</h4>
                  <div style={{ marginBottom: 16 }}>
                    <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>WiFi SSID 前缀</label>
                    <input defaultValue={config.params.network.wifiSsidPrefix} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
                  </div>
                </>
              )}
            </div>
            <div style={{ padding: '16px 24px', borderTop: '1px solid #F0F0F0', display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
              <button onClick={() => setConfigEditOpen(false)} style={{ padding: '8px 20px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>取消</button>
              <button onClick={() => setConfigEditOpen(false)} style={{ padding: '8px 20px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>保存修改</button>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'logs' && (
        <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
          <h3 style={{ fontSize: 16, fontWeight: 600, margin: '0 0 20px' }}>操作日志</h3>
          <div style={{ position: 'relative', paddingLeft: 24 }}>
            {/* Timeline line */}
            <div style={{ position: 'absolute', left: 7, top: 8, bottom: 8, width: 2, backgroundColor: '#F0F0F0' }} />
            {operationLogs.map((log, i) => (
              <div key={i} style={{ position: 'relative', paddingBottom: i < operationLogs.length - 1 ? 24 : 0 }}>
                {/* Timeline dot */}
                <div style={{ position: 'absolute', left: -20, top: 6, width: 12, height: 12, borderRadius: '50%', backgroundColor: i === 0 ? '#4a7c59' : '#D9D9D9', border: '2px solid #fff' }} />
                <div style={{ marginLeft: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
                    <span style={{ fontSize: 14, fontWeight: 500, color: 'rgba(0,0,0,0.85)' }}>{log.action}</span>
                    <span style={{ fontSize: 12, padding: '1px 8px', borderRadius: 4, backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #F0F0F0' }}>{log.operator}</span>
                  </div>
                  <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 2 }}>{log.detail}</div>
                  <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.35)', display: 'flex', alignItems: 'center', gap: 4 }}>
                    <Clock size={12} />{log.date}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}
