'use client'
import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Download, Plus, X, Eye, Upload, Clock, Wrench, CheckCircle, ChevronRight, GripVertical } from 'lucide-react'

const tabs = ['全部', '主协板', '采集板', '发射板', '升压板']

const boardsData = [
  { id: 1, type: '主协板', model: 'MCB-3000', firmwareVersion: 'v2.1.0', productionDate: '2024-03-15', status: '在产' },
  { id: 2, type: '主协板', model: 'MCB-2000', firmwareVersion: 'v1.8.5', productionDate: '2023-11-20', status: '在产' },
  { id: 3, type: '采集板', model: 'ACB-6000', firmwareVersion: 'v3.0.2', productionDate: '2024-01-10', status: '在产' },
  { id: 4, type: '采集板', model: 'ACB-5000', firmwareVersion: 'v2.5.1', productionDate: '2023-09-05', status: '停产' },
  { id: 5, type: '发射板', model: 'TXB-1000', firmwareVersion: 'v1.2.0', productionDate: '2024-02-28', status: '在产' },
  { id: 6, type: '发射板', model: 'TXB-800', firmwareVersion: 'v1.0.3', productionDate: '2023-06-15', status: '停产' },
  { id: 7, type: '升压板', model: 'BST-500', firmwareVersion: 'v1.1.0', productionDate: '2024-04-01', status: '在产' },
  { id: 8, type: '升压板', model: 'BST-300', firmwareVersion: 'v0.9.8', productionDate: '2023-08-22', status: '停产' },
]

const upgradeHistory = [
  { version: 'v2.1.0', date: '2024-03-10', operator: '张工', note: '修复通信协议兼容性问题' },
  { version: 'v2.0.0', date: '2024-01-15', operator: '李工', note: '新增多通道采集支持' },
  { version: 'v1.8.5', date: '2023-11-01', operator: '张工', note: '优化功耗管理' },
]

const calibrationHistory = [
  { date: '2024-03-01', result: '合格', operator: '王工', nextDate: '2025-03-01' },
  { date: '2023-03-05', result: '合格', operator: '王工', nextDate: '2024-03-05' },
]

const serviceHistory = [
  { date: '2024-02-15', type: '例行保养', operator: '赵工', description: '清洁接口，检查焊点' },
  { date: '2023-08-20', type: '例行保养', operator: '赵工', description: '更换散热硅脂' },
]

const repairHistory = [
  { date: '2024-01-20', issue: '通信异常', operator: '李工', result: '更换通信芯片，已修复' },
]

function getStatusStyle(status: string) {
  switch (status) {
    case '在产': return { backgroundColor: '#eef5f0', color: '#4a7c59', border: '1px solid #a3c4ad' }
    case '停产': return { backgroundColor: '#FFFBE6', color: '#FAAD14', border: '1px solid #FFE58F' }
    default: return { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #D9D9D9' }
  }
}

export default function BoardsPage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState('全部')
  const [detailDrawer, setDetailDrawer] = useState<typeof boardsData[0] | null>(null)
  const [addDrawer, setAddDrawer] = useState(false)
  const [detailTab, setDetailTab] = useState('basic')
  const [formData, setFormData] = useState({ type: '主协板', model: '', firmwareVersion: '', productionDate: '' })

  const filteredBoards = activeTab === '全部' ? boardsData : boardsData.filter(b => b.type === activeTab)

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
          <div>
            <h2 style={{ fontSize: 20, fontWeight: 600, margin: 0 }}>板卡型号管理</h2>
            <p style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)', margin: '4px 0 0' }}>管理所有板卡型号及固件版本</p>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <button onClick={() => {}} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>
              <Download size={16} />导出
            </button>
            <button onClick={() => setAddDrawer(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>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid #F0F0F0', marginBottom: 24 }}>
        {tabs.map(tab => (
          <button key={tab} onClick={() => setActiveTab(tab)} style={{
            padding: '10px 20px', fontSize: 14, cursor: 'pointer', border: 'none', backgroundColor: 'transparent',
            borderBottom: activeTab === tab ? '2px solid #4a7c59' : '2px solid transparent',
            color: activeTab === tab ? '#4a7c59' : 'rgba(0,0,0,0.65)', fontWeight: activeTab === tab ? 600 : 400,
          }}>{tab}</button>
        ))}
      </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>
            {filteredBoards.map(board => (
              <tr key={board.id} style={{ borderBottom: '1px solid #F0F0F0' }}>
                <td style={{ padding: '12px 16px', fontSize: 14 }}>{board.type}</td>
                <td style={{ padding: '12px 16px', fontSize: 14, fontWeight: 500 }}>{board.model}</td>
                <td style={{ padding: '12px 16px', fontSize: 14 }}>{board.firmwareVersion}</td>
                <td style={{ padding: '12px 16px', fontSize: 14, color: 'rgba(0,0,0,0.65)' }}>{board.productionDate}</td>
                <td style={{ padding: '12px 16px' }}>
                  <span style={{ ...getStatusStyle(board.status), padding: '2px 8px', borderRadius: 4, fontSize: 12 }}>{board.status}</span>
                </td>
                <td style={{ padding: '12px 16px' }}>
                  <div style={{ display: 'flex', gap: 12 }}>
                    <button onClick={() => { setDetailDrawer(board); setDetailTab('basic') }} style={{ color: '#4a7c59', cursor: 'pointer', border: 'none', background: 'none', fontSize: 14, display: 'flex', alignItems: 'center', gap: 4 }}>
                      <Eye size={14} />详情
                    </button>
                    <button onClick={() => router.push(`/firmware?board=${board.model}`)} style={{ color: '#4a7c59', cursor: 'pointer', border: 'none', background: 'none', fontSize: 14, display: 'flex', alignItems: 'center', gap: 4 }}>
                      <Upload size={14} />固件
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </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: 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 }}>板卡详情 - {detailDrawer.model}</h3>
              <button onClick={() => setDetailDrawer(null)} style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 4 }}><X size={20} /></button>
            </div>
            {/* Detail Tabs */}
            <div style={{ display: 'flex', borderBottom: '1px solid #F0F0F0' }}>
              {[
                { key: 'basic', label: '基本信息' },
                { key: 'upgrade', label: '升级历史' },
                { key: 'calibration', label: '校准历史' },
                { key: 'service', label: '保养历史' },
                { key: 'repair', label: '维修历史' },
              ].map(t => (
                <button key={t.key} onClick={() => setDetailTab(t.key)} style={{
                  padding: '10px 16px', fontSize: 13, cursor: 'pointer', border: 'none', backgroundColor: 'transparent',
                  borderBottom: detailTab === t.key ? '2px solid #4a7c59' : '2px solid transparent',
                  color: detailTab === t.key ? '#4a7c59' : 'rgba(0,0,0,0.65)', fontWeight: detailTab === t.key ? 600 : 400,
                }}>{t.label}</button>
              ))}
            </div>
            <div style={{ flex: 1, overflow: 'auto', padding: 24 }}>
              {detailTab === 'basic' && (
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                  {[
                    { label: '板卡类型', value: detailDrawer.type },
                    { label: '型号', value: detailDrawer.model },
                    { label: '固件版本', value: detailDrawer.firmwareVersion },
                    { label: '生产日期', value: detailDrawer.productionDate },
                    { label: '状态', value: detailDrawer.status },
                  ].map(item => (
                    <div key={item.label}>
                      <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)', marginBottom: 4 }}>{item.label}</div>
                      <div style={{ fontSize: 14, color: 'rgba(0,0,0,0.85)' }}>
                        {item.label === '状态' ? (
                          <span style={{ ...getStatusStyle(item.value), padding: '2px 8px', borderRadius: 4, fontSize: 12 }}>{item.value}</span>
                        ) : item.value}
                      </div>
                    </div>
                  ))}
                </div>
              )}
              {detailTab === 'upgrade' && (
                <div>
                  {upgradeHistory.map((h, i) => (
                    <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: '1px solid #F0F0F0' }}>
                      <div style={{ width: 32, height: 32, borderRadius: '50%', backgroundColor: '#eef5f0', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <Upload size={14} style={{ color: '#4a7c59' }} />
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>{h.version}</div>
                        <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>{h.note}</div>
                        <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.35)', marginTop: 4 }}>{h.date} · {h.operator}</div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
              {detailTab === 'calibration' && (
                <div>
                  {calibrationHistory.map((h, i) => (
                    <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: '1px solid #F0F0F0' }}>
                      <div style={{ width: 32, height: 32, borderRadius: '50%', backgroundColor: '#F6FFED', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <CheckCircle size={14} style={{ color: '#52C41A' }} />
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>校准结果: <span style={{ color: '#52C41A' }}>{h.result}</span></div>
                        <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>下次校准: {h.nextDate}</div>
                        <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.35)', marginTop: 4 }}>{h.date} · {h.operator}</div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
              {detailTab === 'service' && (
                <div>
                  {serviceHistory.map((h, i) => (
                    <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: '1px solid #F0F0F0' }}>
                      <div style={{ width: 32, height: 32, borderRadius: '50%', backgroundColor: '#eef5f0', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <Wrench size={14} style={{ color: '#4a7c59' }} />
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>{h.type}</div>
                        <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>{h.description}</div>
                        <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.35)', marginTop: 4 }}>{h.date} · {h.operator}</div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
              {detailTab === 'repair' && (
                <div>
                  {repairHistory.map((h, i) => (
                    <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: '1px solid #F0F0F0' }}>
                      <div style={{ width: 32, height: 32, borderRadius: '50%', backgroundColor: '#FFF2F0', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <Wrench size={14} style={{ color: '#FF4D4F' }} />
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>故障: {h.issue}</div>
                        <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>{h.result}</div>
                        <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.35)', marginTop: 4 }}>{h.date} · {h.operator}</div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Add Board Drawer */}
      {addDrawer && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 50 }}>
          <div onClick={() => setAddDrawer(false)} style={{ position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.45)' }} />
          <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 480, 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={() => setAddDrawer(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>
                <select value={formData.type} onChange={e => setFormData({ ...formData, type: e.target.value })} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, outline: 'none' }}>
                  {['主协板', '采集板', '发射板', '升压板'].map(t => <option key={t} value={t}>{t}</option>)}
                </select>
              </div>
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontSize: 14, fontWeight: 500, marginBottom: 8 }}>型号</label>
                <input value={formData.model} onChange={e => setFormData({ ...formData, model: e.target.value })} placeholder="请输入型号" style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, outline: 'none', boxSizing: 'border-box' }} />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontSize: 14, fontWeight: 500, marginBottom: 8 }}>固件版本</label>
                <input value={formData.firmwareVersion} onChange={e => setFormData({ ...formData, firmwareVersion: e.target.value })} placeholder="请输入固件版本" style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, outline: 'none', boxSizing: 'border-box' }} />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontSize: 14, fontWeight: 500, marginBottom: 8 }}>生产日期</label>
                <input type="date" value={formData.productionDate} onChange={e => setFormData({ ...formData, productionDate: e.target.value })} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, outline: 'none', boxSizing: 'border-box' }} />
              </div>
            </div>
            <div style={{ padding: '16px 24px', borderTop: '1px solid #F0F0F0', display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
              <button onClick={() => setAddDrawer(false)} style={{ padding: '8px 20px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>取消</button>
              <button onClick={() => setAddDrawer(false)} style={{ padding: '8px 20px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>确定</button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
