'use client'
import { useState, Suspense } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { Plus, Search, Info, ChevronLeft, ChevronRight, X, Download, Trash2, Eye, Edit, ArrowLeft } from 'lucide-react'
import { useApi } from '@/lib/hooks'

interface ConfigItem {
  id: number; name: string; model: string; version: string; create_time: string; status: string
  voltage: string; current: string; duty_cycle: string; pulse_width: string
  channels: number; sample_rate: string; voltage_range: string; waveform: string; ssid: string
}

const modelOptions = ['全部', 'GD-30 Supreme', 'GD-20 Supreme', 'GD-10 Supreme']
const versionOptions = ['全部', 'v1.0.0', 'v1.1.0', 'v1.2.0', 'v1.3.0']

function getStatusStyle(status: string) {
  switch (status) {
    case '生效': return { backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' }
    case '已停用': return { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #D9D9D9' }
    default: return { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #D9D9D9' }
  }
}

export default function ConfigFilesPage() {
  return (
    <Suspense fallback={<div style={{ padding: 24 }}>加载中...</div>}>
      <ConfigFilesContent />
    </Suspense>
  )
}

function ConfigFilesContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const modelParam = searchParams.get('model') || ''
  const { data: configData, loading, refetch } = useApi<ConfigItem[]>('/api/config-files', [])

  const modelNameMap: Record<string, string> = {
    'GD-30 Supreme': 'GD-30 Supreme',
    'GD-20 Supreme': 'GD-20 Supreme',
    'GD-10 Supreme': 'GD-10 Supreme',
  }
  const initialModelFilter = modelParam ? (modelNameMap[modelParam] || modelParam) : '全部'
  const isFromModels = !!modelParam
  const versionOptions = ['全部', ...Array.from(new Set(configData.map(c => c.version)))]

  const [filterModel, setFilterModel] = useState(initialModelFilter)
  const [filterVersion, setFilterVersion] = useState('全部')
  const [filterKeyword, setFilterKeyword] = useState('')
  const [currentPage, setCurrentPage] = useState(1)
  const [drawerOpen, setDrawerOpen] = useState(false)
  const [detailDrawer, setDetailDrawer] = useState<ConfigItem | null>(null)
  const [form, setForm] = useState({
    model: 'GD-30 Supreme', version: '', voltage: '1500V', current: '10A',
    dutyCycle: ['0+0-'] as string[], pulseWidth: '0.25s/0.5s/1s/2s/4s/8s/16s/32s/64s',
    channels: '12', sampleRate: '50Hz、60Hz/50Hz、60Hz、100Hz、1000Hz', voltageRange: '±2.5V、±80V/±80V、±600V',
    waveform: '支持', ssid: '',
  })
  const pageSize = 5

  if (loading) return <div style={{ padding: 24 }}>加载中...</div>

  const filtered = configData.filter(c => {
    if (filterModel !== '全部' && c.model !== filterModel) return false
    if (filterVersion !== '全部' && c.version !== filterVersion) return false
    if (filterKeyword && !c.name.toLowerCase().includes(filterKeyword.toLowerCase())) return false
    return true
  })
  const totalPages = Math.ceil(filtered.length / pageSize)
  const paged = filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize)

  return (
    <div style={{ padding: 24 }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {isFromModels && (
            <button onClick={() => router.back()} 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>
            <h2 style={{ fontSize: 20, fontWeight: 600, margin: 0 }}>{isFromModels ? `配置文件管理 — ${modelParam}` : '配置文件管理'}</h2>
            <p style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)', margin: '4px 0 0' }}>管理设备型号配置文件</p>
          </div>
        </div>
        <button onClick={() => setDrawerOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>
          <Plus size={16} />新建配置
        </button>
      </div>

      {/* Info Banner */}
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: 16, backgroundColor: '#eef5f0', borderRadius: 8, marginBottom: 24, border: '1px solid #a3c4ad' }}>
        <Info size={18} style={{ color: '#4a7c59', flexShrink: 0, marginTop: 2 }} />
        <div style={{ fontSize: 14, color: '#4a7c59', lineHeight: 1.6 }}>
          配置文件按设备型号绑定适配。每个型号可以有多个版本的配置文件，设备出厂时会自动关联对应型号的最新生效配置。
        </div>
      </div>

      {/* Filter */}
      <div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 20, marginBottom: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16 }}>
          <div style={{ flex: 1 }}>
            <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>适配型号</label>
            <select value={filterModel} onChange={e => { setFilterModel(e.target.value); setCurrentPage(1) }} style={{ width: '100%', padding: '6px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
              {modelOptions.map(m => <option key={m} value={m}>{m}</option>)}
            </select>
          </div>
          <div style={{ flex: 1 }}>
            <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>配置版本</label>
            <select value={filterVersion} onChange={e => { setFilterVersion(e.target.value); setCurrentPage(1) }} style={{ width: '100%', padding: '6px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
              {versionOptions.map(v => <option key={v} value={v}>{v}</option>)}
            </select>
          </div>
          <div style={{ flex: 1 }}>
            <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>关键字</label>
            <input type="text" value={filterKeyword} onChange={e => { setFilterKeyword(e.target.value); setCurrentPage(1) }} placeholder="搜索配置文件名" style={{ width: '100%', padding: '6px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
          </div>
          <button onClick={() => setCurrentPage(1)} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 16px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14, flexShrink: 0 }}>
            <Search size={14} />查询
          </button>
        </div>
      </div>

      {/* Table */}
      <div style={{ backgroundColor: '#fff', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ backgroundColor: '#FAFAFA' }}>
              {['配置文件', '适配型号', '版本', '创建时间', '状态', '操作'].map(h => (
                <th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: 14, fontWeight: 600, color: 'rgba(0,0,0,0.85)', borderBottom: '1px solid #F0F0F0' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {paged.map(row => (
              <tr key={row.id} style={{ borderBottom: '1px solid #F0F0F0' }}>
                <td style={{ padding: '12px 16px', fontSize: 14, fontWeight: 500, color: '#4a7c59' }}>{row.name}</td>
                <td style={{ padding: '12px 16px', fontSize: 14, color: 'rgba(0,0,0,0.65)' }}>{row.model}</td>
                <td style={{ padding: '12px 16px', fontSize: 14 }}>{row.version}</td>
                <td style={{ padding: '12px 16px', fontSize: 14, color: 'rgba(0,0,0,0.65)' }}>{row.create_time}</td>
                <td style={{ padding: '12px 16px' }}>
                  <span style={{ ...getStatusStyle(row.status), padding: '2px 8px', borderRadius: 4, fontSize: 12 }}>{row.status}</span>
                </td>
                <td style={{ padding: '12px 16px' }}>
                  <div style={{ display: 'flex', gap: 10 }}>
                    <button onClick={() => setDetailDrawer(row)} style={{ color: '#4a7c59', cursor: 'pointer', border: 'none', background: 'none', fontSize: 13, display: 'flex', alignItems: 'center', gap: 3 }}><Eye size={13} />详情</button>
                    <button style={{ color: '#4a7c59', cursor: 'pointer', border: 'none', background: 'none', fontSize: 13, display: 'flex', alignItems: 'center', gap: 3 }}><Edit size={13} />编辑</button>
                    <button style={{ color: '#4a7c59', cursor: 'pointer', border: 'none', background: 'none', fontSize: 13, display: 'flex', alignItems: 'center', gap: 3 }}><Download size={13} />下载</button>
                    <button style={{ color: '#FF4D4F', cursor: 'pointer', border: 'none', background: 'none', fontSize: 13, display: 'flex', alignItems: 'center', gap: 3 }}><Trash2 size={13} />删除</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px', borderTop: '1px solid #F0F0F0' }}>
          <span style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>共 {filtered.length} 条</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <button onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} style={{ padding: '4px 8px', border: '1px solid #D9D9D9', borderRadius: 4, backgroundColor: '#fff', cursor: currentPage === 1 ? 'not-allowed' : 'pointer', opacity: currentPage === 1 ? 0.4 : 1 }}><ChevronLeft size={16} /></button>
            {Array.from({ length: totalPages }, (_, i) => (
              <button key={i} onClick={() => setCurrentPage(i + 1)} style={{ width: 32, height: 32, borderRadius: 4, fontSize: 14, border: currentPage === i + 1 ? '1px solid #4a7c59' : '1px solid #D9D9D9', color: currentPage === i + 1 ? '#4a7c59' : 'rgba(0,0,0,0.65)', backgroundColor: currentPage === i + 1 ? '#eef5f0' : '#fff', cursor: 'pointer' }}>{i + 1}</button>
            ))}
            <button onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages} style={{ padding: '4px 8px', border: '1px solid #D9D9D9', borderRadius: 4, backgroundColor: '#fff', cursor: currentPage === totalPages ? 'not-allowed' : 'pointer', opacity: currentPage === totalPages ? 0.4 : 1 }}><ChevronRight size={16} /></button>
          </div>
        </div>
      </div>

      {/* Detail Drawer */}
      {detailDrawer && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 50 }}>
          <div onClick={() => setDetailDrawer(null)} style={{ position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.45)' }} />
          <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 520, 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 }}>配置详情 — {detailDrawer.name}</h3>
              <button onClick={() => setDetailDrawer(null)} style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 4 }}><X size={20} /></button>
            </div>
            <div style={{ flex: 1, overflow: 'auto', padding: 24 }}>
              {/* 基本信息 */}
              <div style={{ padding: 16, backgroundColor: '#FAFAFA', borderRadius: 8, marginBottom: 16, border: '1px solid #F0F0F0' }}>
                <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>基本信息</h4>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 13 }}>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>配置文件：</span><span style={{ color: '#4a7c59', fontWeight: 500 }}>{detailDrawer.name}</span></div>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>适配型号：</span>{detailDrawer.model}</div>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>版本：</span>{detailDrawer.version}</div>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>状态：</span><span style={{ ...getStatusStyle(detailDrawer.status), padding: '1px 6px', borderRadius: 4, fontSize: 12 }}>{detailDrawer.status}</span></div>
                  <div style={{ gridColumn: '1 / -1' }}><span style={{ color: 'rgba(0,0,0,0.45)' }}>创建时间：</span>{detailDrawer.create_time}</div>
                </div>
              </div>
              {/* 发射参数 */}
              <div style={{ padding: 16, backgroundColor: '#FAFAFA', borderRadius: 8, marginBottom: 16, border: '1px solid #F0F0F0' }}>
                <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>发射参数</h4>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 13 }}>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>最大发射电压：</span>{detailDrawer.voltage}</div>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>最大发射电流：</span>{detailDrawer.current}</div>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>发射波形：</span>{detailDrawer.duty_cycle}</div>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>脉宽范围：</span>{detailDrawer.pulse_width}</div>
                </div>
              </div>
              {/* 采集参数 */}
              <div style={{ padding: 16, backgroundColor: '#FAFAFA', borderRadius: 8, marginBottom: 16, border: '1px solid #F0F0F0' }}>
                <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>采集参数</h4>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 13 }}>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>支持通道数：</span>{detailDrawer.channels}</div>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>采样率：</span>{detailDrawer.sample_rate}</div>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>电压测量量程：</span>{detailDrawer.voltage_range}</div>
                  <div><span style={{ color: 'rgba(0,0,0,0.45)' }}>全波形采集：</span>{detailDrawer.waveform}</div>
                </div>
              </div>
              {/* 网络参数 */}
              <div style={{ padding: 16, backgroundColor: '#FAFAFA', borderRadius: 8, border: '1px solid #F0F0F0' }}>
                <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>网络参数</h4>
                <div style={{ fontSize: 13 }}>
                  <span style={{ color: 'rgba(0,0,0,0.45)' }}>WiFi SSID 前缀：</span>{detailDrawer.ssid}
                </div>
              </div>
            </div>
            <div style={{ padding: '16px 24px', borderTop: '1px solid #F0F0F0', display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
              <button style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '8px 20px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}><Download size={14} />下载</button>
              <button onClick={() => setDetailDrawer(null)} style={{ padding: '8px 20px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>关闭</button>
            </div>
          </div>
        </div>
      )}

      {/* New Config Drawer */}
      {drawerOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 50 }}>
          <div onClick={() => setDrawerOpen(false)} style={{ position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.45)' }} />
          <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 520, 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 }}>新建配置文件</h3>
              <button onClick={() => setDrawerOpen(false)} style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 4 }}><X size={20} /></button>
            </div>
            <div style={{ flex: 1, overflow: 'auto', padding: 24 }}>
              {/* 基本信息 */}
              <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 16, paddingBottom: 8, borderBottom: '1px solid #F0F0F0' }}>基本信息</h4>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
                <div>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}><span style={{ color: '#FF4D4F' }}>*</span> 适配型号</label>
                  <select value={form.model} onChange={e => setForm({ ...form, model: e.target.value })} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
                    <option value="GD-10 Supreme">GD-10 Supreme</option>
                    <option value="GD-20 Supreme">GD-20 Supreme</option>
                    <option value="GD-30 Supreme">GD-30 Supreme</option>
                  </select>
                </div>
                <div>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}><span style={{ color: '#FF4D4F' }}>*</span> 配置版本</label>
                  <input value={form.version} onChange={e => setForm({ ...form, version: e.target.value })} placeholder="如 v1.3.0" 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: 16, paddingBottom: 8, borderBottom: '1px solid #F0F0F0' }}>发射参数</h4>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
                <div>
                  <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>最大发射电压</label>
                  <select value={form.voltage} onChange={e => setForm({ ...form, voltage: e.target.value })} 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 value={form.current} onChange={e => setForm({ ...form, current: e.target.value })} 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 => (
                      <label key={w} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 14px', borderRadius: 6, fontSize: 13, cursor: 'pointer', border: form.dutyCycle.includes(w) ? '1px solid #4a7c59' : '1px solid #D9D9D9', backgroundColor: form.dutyCycle.includes(w) ? '#eef5f0' : '#fff', color: form.dutyCycle.includes(w) ? '#4a7c59' : 'rgba(0,0,0,0.65)' }}>
                        <input type="checkbox" checked={form.dutyCycle.includes(w)} onChange={e => { setForm({ ...form, dutyCycle: e.target.checked ? [...form.dutyCycle, w] : form.dutyCycle.filter(x => x !== w) }) }} style={{ display: 'none' }} />
                        {w}
                      </label>
                    ))}
                  </div>
                </div>
                <div>
                  <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>脉宽宽度</label>
                  <select value={form.pulseWidth} onChange={e => setForm({ ...form, pulseWidth: e.target.value })} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
                    {['0.25s/0.5s/1s/2s/4s/8s', '0.25s/0.5s/1s/2s/4s/8s/16s/32s/54s'].map(v => <option key={v} value={v}>{v}</option>)}
                  </select>
                </div>
              </div>

              {/* 采集参数 */}
              <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 16, paddingBottom: 8, borderBottom: '1px solid #F0F0F0' }}>采集参数</h4>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
                <div>
                  <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>支持通道数</label>
                  <select value={form.channels} onChange={e => setForm({ ...form, channels: e.target.value })} 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>
                  <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>采样率</label>
                  <select value={form.sampleRate} onChange={e => setForm({ ...form, sampleRate: e.target.value })} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
                    {['50Hz/60Hz', '50Hz/60Hz/100Hz/1000Hz'].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 value={form.voltageRange} onChange={e => setForm({ ...form, voltageRange: e.target.value })} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
                    {['±2.5V', '±2.5V/±80V', '±80V/±600V'].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 value={form.waveform} onChange={e => setForm({ ...form, waveform: e.target.value })} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
                    <option value="支持">支持</option>
                    <option value="不支持">不支持</option>
                  </select>
                </div>
              </div>

              {/* 网络参数 */}
              <h4 style={{ fontSize: 14, fontWeight: 600, marginBottom: 16, 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 value={form.ssid} onChange={e => setForm({ ...form, ssid: e.target.value })} placeholder="如 GD30" 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={() => setDrawerOpen(false)} style={{ padding: '8px 20px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>取消</button>
              <button onClick={async () => {
                if (!form.version) return
                const name = `CFG-${form.model.split(' ')[0].replace('GD-', 'GD')}-${form.version}`
                await fetch('/api/config-files', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, model: form.model, version: form.version, create_time: new Date().toISOString().slice(0, 16).replace('T', ' '), status: '生效', voltage: form.voltage, current: form.current, duty_cycle: form.dutyCycle.join('、'), pulse_width: form.pulseWidth, channels: parseInt(form.channels), sample_rate: form.sampleRate, voltage_range: form.voltageRange, waveform: form.waveform, ssid: form.ssid }) })
                refetch(); setDrawerOpen(false)
              }} style={{ padding: '8px 20px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>保存</button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
