'use client'
import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Plus, X, Info, GripVertical, Trash2, Edit } from 'lucide-react'

const modelsData = [
  { id: 1, name: 'GD-30 Supreme', code: 'GD30', status: '在产', description: '高端三维电法仪', createDate: '2023-06-01' },
  { id: 2, name: 'GD-20 Supreme', code: 'GD20', status: '在产', description: '中端二维电法仪', createDate: '2023-08-15' },
  { id: 3, name: 'GD-10 Supreme', code: 'GD10', status: '停产', description: '入门级电法仪', createDate: '2022-03-10' },
]

const checklistTemplates: Record<string, { id: number; name: string; required: boolean }[]> = {
  GD30: [
    { id: 1, name: '主协板安装检查', required: true },
    { id: 2, name: '采集板安装检查（×6）', required: true },
    { id: 3, name: '发射板安装检查', required: true },
    { id: 4, name: '升压板安装检查', required: true },
    { id: 5, name: '线缆连接检查', required: true },
    { id: 6, name: '整机通电测试', required: true },
    { id: 7, name: '通信功能测试', required: true },
    { id: 8, name: '采集通道校准', required: true },
    { id: 9, name: '外观检查', required: false },
    { id: 10, name: '包装检查', required: false },
  ],
  GD20: [
    { id: 1, name: '主协板安装检查', required: true },
    { id: 2, name: '采集板安装检查（×4）', required: true },
    { id: 3, name: '发射板安装检查', required: true },
    { id: 4, name: '线缆连接检查', required: true },
    { id: 5, name: '整机通电测试', required: true },
    { id: 6, name: '通信功能测试', required: true },
    { id: 7, name: '采集通道校准', required: true },
    { id: 8, name: '外观检查', required: false },
  ],
  GD10: [
    { id: 1, name: '主协板安装检查', required: true },
    { id: 2, name: '采集板安装检查（×2）', required: true },
    { id: 3, name: '线缆连接检查', required: true },
    { id: 4, name: '整机通电测试', required: true },
    { id: 5, name: '通信功能测试', required: true },
    { id: 6, name: '外观检查', required: false },
  ],
}

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 ModelsPage() {
  const router = useRouter()
  const [modelDrawer, setModelDrawer] = useState(false)
  const [checklistDrawer, setChecklistDrawer] = useState(false)
  const [checklistTab, setChecklistTab] = useState('GD30')
  const [modelForm, setModelForm] = useState({ name: '', code: '', status: '在产' })
  const [checklistForm, setChecklistForm] = useState({ model: 'GD30', items: [{ name: '', required: true }] })

  const addChecklistItem = () => {
    setChecklistForm({ ...checklistForm, items: [...checklistForm.items, { name: '', required: true }] })
  }

  const removeChecklistItem = (index: number) => {
    setChecklistForm({ ...checklistForm, items: checklistForm.items.filter((_, i) => i !== index) })
  }

  const updateChecklistItem = (index: number, field: string, value: string | boolean) => {
    const items = [...checklistForm.items]
    items[index] = { ...items[index], [field]: value }
    setChecklistForm({ ...checklistForm, items })
  }

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}>
        <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>

      {/* 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>

      {/* Model Table */}
      <div style={{ backgroundColor: '#fff', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden', marginBottom: 32 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderBottom: '1px solid #F0F0F0' }}>
          <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>设备型号列表</h3>
          <button onClick={() => setModelDrawer(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>
        <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>
            {modelsData.map(model => (
              <tr key={model.id} style={{ borderBottom: '1px solid #F0F0F0' }}>
                <td style={{ padding: '12px 16px', fontSize: 14, fontWeight: 500 }}>{model.name}</td>
                <td style={{ padding: '12px 16px', fontSize: 14, color: 'rgba(0,0,0,0.65)' }}>{model.code}</td>
                <td style={{ padding: '12px 16px', fontSize: 14, color: 'rgba(0,0,0,0.65)' }}>{model.description}</td>
                <td style={{ padding: '12px 16px' }}>
                  <span style={{ ...getStatusStyle(model.status), padding: '2px 8px', borderRadius: 4, fontSize: 12 }}>{model.status}</span>
                </td>
                <td style={{ padding: '12px 16px', fontSize: 14, color: 'rgba(0,0,0,0.65)' }}>{model.createDate}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Checklist Templates */}
      <div style={{ backgroundColor: '#fff', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderBottom: '1px solid #F0F0F0' }}>
          <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>装配 Checklist 模板</h3>
          <button onClick={() => setChecklistDrawer(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 style={{ display: 'flex', borderBottom: '1px solid #F0F0F0' }}>
          {Object.keys(checklistTemplates).map(tab => (
            <button key={tab} onClick={() => setChecklistTab(tab)} style={{
              padding: '10px 20px', fontSize: 14, cursor: 'pointer', border: 'none', backgroundColor: 'transparent',
              borderBottom: checklistTab === tab ? '2px solid #4a7c59' : '2px solid transparent',
              color: checklistTab === tab ? '#4a7c59' : 'rgba(0,0,0,0.65)', fontWeight: checklistTab === tab ? 600 : 400,
            }}>{tab}</button>
          ))}
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ backgroundColor: '#FAFAFA' }}>
              <th style={{ padding: '12px 16px', textAlign: 'left', fontSize: 14, fontWeight: 600, color: 'rgba(0,0,0,0.85)', borderBottom: '1px solid #F0F0F0', width: 60 }}>序号</th>
              <th style={{ padding: '12px 16px', textAlign: 'left', fontSize: 14, fontWeight: 600, color: 'rgba(0,0,0,0.85)', borderBottom: '1px solid #F0F0F0' }}>项目名称</th>
              <th style={{ padding: '12px 16px', textAlign: 'left', fontSize: 14, fontWeight: 600, color: 'rgba(0,0,0,0.85)', borderBottom: '1px solid #F0F0F0', width: 80 }}>必填</th>
            </tr>
          </thead>
          <tbody>
            {(checklistTemplates[checklistTab] || []).map((item, i) => (
              <tr key={item.id} style={{ borderBottom: '1px solid #F0F0F0' }}>
                <td style={{ padding: '10px 16px', fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <GripVertical size={14} style={{ color: 'rgba(0,0,0,0.25)', cursor: 'grab' }} />
                    {i + 1}
                  </div>
                </td>
                <td style={{ padding: '10px 16px', fontSize: 14 }}>{item.name}</td>
                <td style={{ padding: '10px 16px' }}>
                  {item.required && <span style={{ fontSize: 12, color: '#FF4D4F' }}>必填</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* New Model Drawer */}
      {modelDrawer && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 50 }}>
          <div onClick={() => setModelDrawer(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={() => setModelDrawer(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 }}><span style={{ color: '#FF4D4F' }}>*</span> 型号名称</label>
                <input value={modelForm.name} onChange={e => setModelForm({ ...modelForm, name: e.target.value })} placeholder="如 GD-30 Supreme" style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontSize: 14, fontWeight: 500, marginBottom: 8 }}><span style={{ color: '#FF4D4F' }}>*</span> 型号编码</label>
                <input value={modelForm.code} onChange={e => setModelForm({ ...modelForm, code: e.target.value })} placeholder="如 GD30" style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontSize: 14, fontWeight: 500, marginBottom: 8 }}>状态</label>
                <div style={{ display: 'flex', gap: 12 }}>
                  {['在产', '停产'].map(s => (
                    <button key={s} onClick={() => setModelForm({ ...modelForm, status: s })} style={{ padding: '6px 20px', borderRadius: 6, fontSize: 14, cursor: 'pointer', border: modelForm.status === s ? '1px solid #4a7c59' : '1px solid #D9D9D9', backgroundColor: modelForm.status === s ? '#eef5f0' : '#fff', color: modelForm.status === s ? '#4a7c59' : 'rgba(0,0,0,0.65)' }}>{s}</button>
                  ))}
                </div>
              </div>
            </div>
            <div style={{ padding: '16px 24px', borderTop: '1px solid #F0F0F0', display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
              <button onClick={() => setModelDrawer(false)} style={{ padding: '8px 20px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>取消</button>
              <button onClick={() => setModelDrawer(false)} style={{ padding: '8px 20px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>保存</button>
            </div>
          </div>
        </div>
      )}

      {/* New Checklist Drawer */}
      {checklistDrawer && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 50 }}>
          <div onClick={() => setChecklistDrawer(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 }}>新增 Checklist 模板</h3>
              <button onClick={() => setChecklistDrawer(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 }}><span style={{ color: '#FF4D4F' }}>*</span> 设备型号</label>
                <select value={checklistForm.model} onChange={e => setChecklistForm({ ...checklistForm, model: e.target.value })} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
                  {Object.keys(checklistTemplates).map(m => <option key={m} value={m}>{m}</option>)}
                </select>
              </div>
              <div style={{ marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                  <label style={{ fontSize: 14, fontWeight: 500 }}>检查项列表</label>
                  <button onClick={addChecklistItem} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 12px', border: '1px solid #4a7c59', borderRadius: 6, backgroundColor: '#fff', color: '#4a7c59', cursor: 'pointer', fontSize: 13 }}>
                    <Plus size={14} />添加
                  </button>
                </div>
                {checklistForm.items.map((item, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                    <input value={item.name} onChange={e => updateChecklistItem(i, 'name', e.target.value)} placeholder={`检查项 ${i + 1}`} style={{ flex: 1, padding: '6px 10px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 13, boxSizing: 'border-box' }} />
                    <label style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, flexShrink: 0 }}>
                      <input type="checkbox" checked={item.required} onChange={e => updateChecklistItem(i, 'required', e.target.checked)} />必填
                    </label>
                    <button onClick={() => removeChecklistItem(i)} style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 4, color: '#FF4D4F' }}><Trash2 size={14} /></button>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ padding: '16px 24px', borderTop: '1px solid #F0F0F0', display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
              <button onClick={() => setChecklistDrawer(false)} style={{ padding: '8px 20px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>取消</button>
              <button onClick={() => setChecklistDrawer(false)} style={{ padding: '8px 20px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', cursor: 'pointer', fontSize: 14 }}>保存</button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}