'use client'
import { useState, useMemo } from 'react'
import Link from 'next/link'
import { Download, Plus, Search, ChevronLeft, ChevronRight, Monitor, Cpu, Wifi, Power, Tag } from 'lucide-react'

const devicesData = [
  { id: 1, sn: 'GD30-2025-000001', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已激活', firmware: 'v2.3.5', productionDate: '2025-01-15 14:30', customer: '北京地质研究院', batch: 'B2025-01' },
  { id: 2, sn: 'GD30-2025-000002', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已激活', firmware: 'v2.3.5', productionDate: '2025-01-18 09:15', customer: '中国地质大学', batch: 'B2025-01' },
  { id: 3, sn: 'GD30-2024-000056', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已出厂', firmware: 'v2.3.4', productionDate: '2024-12-20 16:00', customer: '成都理工大学', batch: 'B2024-12' },
  { id: 4, sn: 'GT20-2025-000045', model: 'GD-20', type: '二维电法仪', status: '已激活', firmware: 'v1.8.5', productionDate: '2025-02-10 11:20', customer: '武汉地质调查中心', batch: 'B2025-02' },
  { id: 5, sn: 'GT20-2025-000046', model: 'GD-20', type: '二维电法仪', status: '装配中', firmware: 'v1.8.5', productionDate: '2025-03-01 08:45', customer: '-', batch: 'B2025-03' },
  { id: 6, sn: 'GD30-2024-000078', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已出厂', firmware: 'v2.3.4', productionDate: '2024-11-05 13:30', customer: '长安大学', batch: 'B2024-11' },
  { id: 7, sn: 'GD10-2024-000033', model: 'GD-10 Supreme', type: '入门级电法仪', status: '已激活', firmware: 'v1.5.2', productionDate: '2024-09-12 10:00', customer: '河海大学', batch: 'B2024-09' },
  { id: 8, sn: 'GD30-2024-000089', model: 'GD-30 Supreme', type: '高密度电法仪', status: '装配中', firmware: 'v2.3.5', productionDate: '2025-03-05 15:10', customer: '-', batch: 'B2025-03' },
  { id: 9, sn: 'GT20-2025-000012', model: 'GD-20', type: '二维电法仪', status: '已激活', firmware: 'v1.8.5', productionDate: '2025-01-22 09:30', customer: '中南大学', batch: 'B2025-01' },
  { id: 10, sn: 'GD30-2024-000102', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已出厂', firmware: 'v2.3.4', productionDate: '2024-10-18 14:00', customer: '吉林大学', batch: 'B2024-10' },
  { id: 11, sn: 'GD10-2024-000034', model: 'GD-10 Supreme', type: '入门级电法仪', status: '装配中', firmware: 'v1.5.2', productionDate: '2025-03-08 11:45', customer: '-', batch: 'B2025-03' },
  { id: 12, sn: 'GD30-2024-000145', model: 'GD-30 Supreme', type: '高密度电法仪', status: '已激活', firmware: 'v2.3.5', productionDate: '2024-08-25 16:20', customer: '同济大学', batch: 'B2024-08' },
]

const modelOptions = ['全部', 'GD-30 Supreme', 'GD-20', 'GD-10 Supreme']
const statusOptions = ['全部', '已激活', '已出厂', '装配中']

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={14} style={{ color: '#52C41A' }} />
    case '已出厂': return <Monitor size={14} style={{ color: '#FA8C16' }} />
    case '装配中': return <Cpu size={14} style={{ color: '#4a7c59' }} />
    default: return null
  }
}

export default function DevicesPage() {
  const [filterModel, setFilterModel] = useState('全部')
  const [filterStatus, setFilterStatus] = useState('全部')
  const [filterDate, setFilterDate] = useState('')
  const [searchText, setSearchText] = useState('')
  const [selectedBatch, setSelectedBatch] = useState('全部')
  const [currentPage, setCurrentPage] = useState(1)
  const pageSize = 8

  // 从数据中提取所有批次并按时间倒序排列，统计每个批次的设备数量
  const batchList = useMemo(() => {
    const batchMap = new Map<string, number>()
    devicesData.forEach(d => {
      batchMap.set(d.batch, (batchMap.get(d.batch) || 0) + 1)
    })
    return Array.from(batchMap.entries())
      .sort((a, b) => b[0].localeCompare(a[0]))
      .map(([batch, count]) => ({ batch, count }))
  }, [])

  const filtered = devicesData.filter(d => {
    if (selectedBatch !== '全部' && d.batch !== selectedBatch) return false
    if (filterModel !== '全部' && d.model !== filterModel) return false
    if (filterStatus !== '全部' && d.status !== filterStatus) return false
    if (filterDate && !d.productionDate.startsWith(filterDate)) return false
    if (searchText && !d.sn.toLowerCase().includes(searchText.toLowerCase())) return false
    return true
  })
  const totalPages = Math.ceil(filtered.length / pageSize)
  const paged = filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize)

  const handleBatchSelect = (batch: string) => {
    setSelectedBatch(batch)
    setCurrentPage(1)
  }

  return (
    <div style={{ padding: 24 }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <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 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>
          <Link href="/registration" style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', fontSize: 14, textDecoration: 'none' }}>
            <Plus size={16} />登记设备
          </Link>
        </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={filterStatus} onChange={e => { setFilterStatus(e.target.value); setCurrentPage(1) }} style={{ width: '100%', padding: '6px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
              {statusOptions.map(s => <option key={s} value={s}>{s}</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="date" value={filterDate} onChange={e => { setFilterDate(e.target.value); setCurrentPage(1) }} style={{ width: '100%', padding: '6px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
          </div>
          <div style={{ flex: 1 }}>
            <label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>SN搜索</label>
            <input type="text" value={searchText} onChange={e => { setSearchText(e.target.value); setCurrentPage(1) }} placeholder="输入设备SN号" 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>

      {/* Main content: Batch sidebar + Device cards */}
      <div style={{ display: 'flex', gap: 20 }}>
        {/* Batch sidebar */}
        <div style={{ width: 200, flexShrink: 0, backgroundColor: '#fff', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', padding: 16, alignSelf: 'flex-start' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 16 }}>
            <Tag size={15} style={{ color: '#4a7c59' }} />
            <span style={{ fontSize: 14, fontWeight: 600, color: 'rgba(0,0,0,0.85)' }}>生产批次</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <button
              onClick={() => handleBatchSelect('全部')}
              style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '8px 12px', borderRadius: 6, border: 'none', cursor: 'pointer', fontSize: 13, textAlign: 'left',
                backgroundColor: selectedBatch === '全部' ? '#eef5f0' : 'transparent',
                color: selectedBatch === '全部' ? '#4a7c59' : 'rgba(0,0,0,0.65)',
                fontWeight: selectedBatch === '全部' ? 600 : 400,
              }}
            >
              <span>全部批次</span>
              <span style={{
                fontSize: 12, padding: '1px 8px', borderRadius: 10,
                backgroundColor: selectedBatch === '全部' ? '#4a7c59' : '#f0f0f0',
                color: selectedBatch === '全部' ? '#fff' : 'rgba(0,0,0,0.45)',
              }}>{devicesData.length}</span>
            </button>
            {batchList.map(({ batch, count }) => (
              <button
                key={batch}
                onClick={() => handleBatchSelect(batch)}
                style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '8px 12px', borderRadius: 6, border: 'none', cursor: 'pointer', fontSize: 13, textAlign: 'left',
                  backgroundColor: selectedBatch === batch ? '#eef5f0' : 'transparent',
                  color: selectedBatch === batch ? '#4a7c59' : 'rgba(0,0,0,0.65)',
                  fontWeight: selectedBatch === batch ? 600 : 400,
                }}
              >
                <span>{batch}</span>
                <span style={{
                  fontSize: 12, padding: '1px 8px', borderRadius: 10,
                  backgroundColor: selectedBatch === batch ? '#4a7c59' : '#f0f0f0',
                  color: selectedBatch === batch ? '#fff' : 'rgba(0,0,0,0.45)',
                }}>{count}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Right content area */}
        <div style={{ flex: 1, minWidth: 0 }}>
          {/* Device Cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 24 }}>
            {paged.map(device => (
              <div key={device.id} style={{ backgroundColor: '#fff', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' }}>
                <div style={{ padding: 20 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                    <span style={{ fontSize: 15, fontWeight: 600, color: 'rgba(0,0,0,0.85)' }}>{device.sn}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                    {getStatusIcon(device.status)}
                    <span style={{ ...getStatusStyle(device.status), padding: '2px 8px', borderRadius: 4, fontSize: 12 }}>{device.status}</span>
                    <span style={{ fontSize: 11, padding: '2px 8px', borderRadius: 4, backgroundColor: '#f5f5f5', color: 'rgba(0,0,0,0.45)', border: '1px solid #e8e8e8' }}>{device.batch}</span>
                  </div>
                  <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.65)', lineHeight: 2 }}>
                    <div>型号：{device.model} {device.type}</div>
                    <div>主机版本：{device.firmware}</div>
                    <div>生产日期：{device.productionDate}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', borderTop: '1px solid #F0F0F0' }}>
                  <Link href={`/devices/${device.sn}`} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, padding: '10px 0', fontSize: 13, color: '#4a7c59', textDecoration: 'none', cursor: 'pointer' }}>
                    详情
                  </Link>
                  {device.status === '已激活' && (
                    <>
                      <div style={{ width: 1, backgroundColor: '#F0F0F0' }} />
                      <button style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, padding: '10px 0', fontSize: 13, color: '#FF4D4F', border: 'none', background: 'none', cursor: 'pointer' }}>
                        <Power size={13} />下线
                      </button>
                    </>
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* Pagination */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>
              显示 {filtered.length > 0 ? (currentPage - 1) * pageSize + 1 : 0}-{Math.min(currentPage * pageSize, filtered.length)} / 共 {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 || totalPages === 0} style={{ padding: '4px 8px', border: '1px solid #D9D9D9', borderRadius: 4, backgroundColor: '#fff', cursor: currentPage === totalPages || totalPages === 0 ? 'not-allowed' : 'pointer', opacity: currentPage === totalPages || totalPages === 0 ? 0.4 : 1 }}><ChevronRight size={16} /></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
