'use client'
import { use } from 'react'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { ArrowLeft, Cpu, Wifi, Monitor, Key, FileCode, Upload, Clock, Wrench, CheckCircle, AlertTriangle, Package, FileDown } 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', customer: '北京地质研究院', operator: '张工程师' },
  { id: 2, sn: 'GD30-2025-000002', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已激活', firmware: 'v2.3.5', productionDate: '2025-01-18 09:15', customer: '中国地质大学', operator: '张工程师' },
  { id: 3, sn: 'GD30-2024-000056', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已出厂', firmware: 'v2.3.4', productionDate: '2024-12-20 16:00', customer: '成都理工大学', operator: '李工程师' },
  { id: 4, sn: 'GT20-2025-000045', model: 'GD-20', type: '二维电法仪', status: '已激活', firmware: 'v1.8.5', productionDate: '2025-02-10 11:20', customer: '武汉地质调查中心', operator: '王工程师' },
  { id: 5, sn: 'GT20-2025-000046', model: 'GD-20', type: '二维电法仪', status: '装配中', firmware: 'v1.8.5', productionDate: '2025-03-01 08:45', customer: '-', operator: '王工程师' },
  { id: 6, sn: 'GD30-2024-000078', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已出厂', firmware: 'v2.3.4', productionDate: '2024-11-05 13:30', customer: '长安大学', operator: '张工程师' },
  { id: 7, sn: 'GD10-2024-000033', model: 'GD-10 Supreme', type: '入门级电法仪', status: '已激活', firmware: 'v1.5.2', productionDate: '2024-09-12 10:00', customer: '河海大学', operator: '李工程师' },
  { id: 8, sn: 'GD30-2024-000089', model: 'GD-30 Supreme', type: '高密度电法仪', status: '装配中', firmware: 'v2.3.5', productionDate: '2025-03-05 15:10', customer: '-', operator: '张工程师' },
  { id: 9, sn: 'GT20-2025-000012', model: 'GD-20', type: '二维电法仪', status: '已激活', firmware: 'v1.8.5', productionDate: '2025-01-22 09:30', customer: '中南大学', operator: '王工程师' },
  { id: 10, sn: 'GD30-2024-000102', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已出厂', firmware: 'v2.3.4', productionDate: '2024-10-18 14:00', customer: '吉林大学', operator: '李工程师' },
  { id: 11, sn: 'GD10-2024-000034', model: 'GD-10 Supreme', type: '入门级电法仪', status: '装配中', firmware: 'v1.5.2', productionDate: '2025-03-08 11:45', customer: '-', operator: '王工程师' },
  { id: 12, sn: 'GD30-2024-000145', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已激活', firmware: 'v2.3.5', productionDate: '2024-08-25 16:20', customer: '同济大学', 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: '1D SP, 2D SP, 3D SP, 1D VES, 2D ERT, 3D ERT, 1D IP, 2D IP, 3D IP, 跨孔, 水上', expiry: '2026-01-15', status: '生效' },
  'GD30-2025-000002': { modules: '2D ERT, 3D ERT, 1D IP, 2D IP, 3D IP, 跨孔, 水上', expiry: '2025-12-31', status: '生效' },
  'GT20-2025-000045': { modules: '2D ERT, 3D ERT, 1D IP, 2D IP', expiry: '2025-06-30', status: '生效' },
}

/** Mock: 配置文件 */
const configData: Record<string, { name: string; version: string; uploadDate: string }> = {
  'GD30-2025-000001': { name: 'CFG-GD30-v1.3.0', version: 'v1.3.0', uploadDate: '2025-01-15' },
  'GD30-2025-000002': { name: 'CFG-GD30-v1.3.0', version: 'v1.3.0', uploadDate: '2025-01-18' },
  'GT20-2025-000045': { name: 'CFG-GD20-v1.1.0', version: 'v1.1.0', uploadDate: '2025-02-10' },
}

/** 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 },
  { name: '采集板SN录入（×6）', passed: true },
  { name: '发射板安装检查', passed: true },
  { name: '升压板安装检查', passed: true },
  { name: '线缆连接检查', passed: true },
  { name: '整机通电测试', passed: true },
  { name: 'GPS/北斗模块检测', passed: true },
  { name: 'WiFi通信测试', passed: true },
  { name: '蓝牙通信测试', passed: true },
  { name: '采集通道校准验证', passed: true },
  { name: '发射电压测试', passed: true },
  { name: '电池安装与充电测试', passed: true },
  { name: 'IP66防护检测', passed: true },
  { name: '固件版本校验', passed: true },
  { name: '配置文件写入', passed: true },
  { name: '授权文件写入', passed: true },
  { name: '整机功能测试', passed: true },
  { name: '数据采集验证', passed: true },
  { name: '外观检查', passed: true },
  { name: '标签粘贴', passed: true },
  { name: '配件清点', passed: true },
  { name: '包装检查', passed: true },
]

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 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 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 }}>
            <Key size={16} style={{ color: license ? '#52C41A' : '#FAAD14' }} />
            <span style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>授权项状态</span>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, color: license ? '#52C41A' : '#FAAD14' }}>{license ? license.status : '未授权'}</div>
          {license && <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.35)', marginTop: 2 }}>到期：{license.expiry}</div>}
        </div>
        <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 }}>
            <FileCode size={16} style={{ color: config ? '#52C41A' : 'rgba(0,0,0,0.25)' }} />
            <span style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>配置文件</span>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, color: config ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.25)' }}>{config ? config.version : '未配置'}</div>
          {config && <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.35)', marginTop: 2 }}>{config.name}</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.customer },
              { 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 }}>
            <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>装配 Checklist</h3>
            <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>
          </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) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px', borderRadius: 8, backgroundColor: item.passed ? '#F6FFED' : '#FFF1F0', border: item.passed ? '1px solid #B7EB8F' : '1px solid #FFCCC7' }}>
                <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' }}>{item.name}</span>
                <span style={{ marginLeft: 'auto', fontSize: 12, color: item.passed ? '#52C41A' : '#FF4D4F' }}>{item.passed ? '通过' : '未通过'}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {activeTab === 'license' && (
        <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>
          {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>
                  <span style={{ padding: '2px 10px', borderRadius: 4, fontSize: 12, backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' }}>{license.status}</span>
                </div>
                <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)' }}>该设备暂未配置授权项</div>
            </div>
          )}
        </div>
      )}

      {activeTab === 'config' && (
        <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>
          {config ? (
            <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 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>
            </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>
  )
}
