'use client'

import { useState, useEffect, useCallback, useRef } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import Pagination from '@/components/ui/Pagination'
import Badge from '@/components/ui/Badge'

import Button from '@/components/ui/Button'
import Modal from '@/components/ui/Modal'
import type { Asset, PaginatedResult } from '@/types'
import {
  Plus, Upload, Download, Search, ChevronUp, ChevronDown, ChevronsUpDown,
  Eye, Edit, Trash2, Filter, ArrowUpDown, Check,
} from 'lucide-react'

const statusColor: Record<string, 'blue' | 'green' | 'yellow' | 'red' | 'gray'> = {
  '腾讯使用': 'green', '图灵使用': 'blue', '闲置': 'yellow', '备用': 'yellow', '维修中': 'red', '已下线': 'gray',
}

const COLUMNS = [
  { key: 'node_name', label: '节点名称', sortable: true },
  { key: 'business_ip', label: '业务IP', sortable: true },
  { key: 'hdm_ip', label: 'HDM IP', sortable: true },
  { key: 'device_type', label: '设备类型', sortable: true },
  { key: 'manufacturer', label: '厂商', sortable: true },
  { key: 'device_model', label: '设备型号', sortable: true },
  { key: 'serial_number', label: '序列号', sortable: true },
  { key: 'status', label: '状态', sortable: true },
]

export default function AssetsPage() {
  const router = useRouter()
  const [result, setResult] = useState<PaginatedResult<Asset>>({ data: [], total: 0, page: 1, pageSize: 20, totalPages: 0 })
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [sortKey, setSortKey] = useState('node_name')
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set())
  const [deleteTarget, setDeleteTarget] = useState<number | null>(null)
  const [deleting, setDeleting] = useState(false)
  const [exportModalOpen, setExportModalOpen] = useState(false)
  const [exportMode, setExportMode] = useState<'all' | 'selected'>('all')
  const [permissions, setPermissions] = useState<string[]>([])

  // 列头筛选相关状态
  const [tableMode, setTableMode] = useState<'sort' | 'filter'>('sort')
  const [columnFilterValues, setColumnFilterValues] = useState<Record<string, string[]>>({})
  const [openFilterColumn, setOpenFilterColumn] = useState<string | null>(null)
  const [filterOptions, setFilterOptions] = useState<Record<string, string[]>>({})
  const [filterLoading, setFilterLoading] = useState<Record<string, boolean>>({})
  const [filterSearch, setFilterSearch] = useState<Record<string, string>>({})
  const filterDropRef = useRef<HTMLDivElement>(null)

  // 列宽拖拽调整
  const [colWidths, setColWidths] = useState<Record<string, number>>({})
  const [resizingCol, setResizingCol] = useState<string | null>(null)
  const resizeRef = useRef<{ col: string; startX: number; startWidth: number } | null>(null)
  const [hasResized, setHasResized] = useState(false)

  function snapAllColumns() {
    if (hasResized) return
    setHasResized(true)
    const widths: Record<string, number> = {}
    document.querySelectorAll('th[data-col-key]').forEach(th => {
      const key = th.getAttribute('data-col-key')
      if (key) widths[key] = th.getBoundingClientRect().width
    })
    setColWidths(widths)
  }

  function onResizeStart(colKey: string, e: React.MouseEvent) {
    e.preventDefault()
    e.stopPropagation()
    snapAllColumns()
    const th = (e.target as HTMLElement).closest('th')
    const startWidth = th?.getBoundingClientRect().width || 150
    resizeRef.current = { col: colKey, startX: e.clientX, startWidth }
    setResizingCol(colKey)
    document.body.style.userSelect = 'none'
    document.body.style.cursor = 'col-resize'
  }

  useEffect(() => {
    if (!resizingCol) return
    function onMouseMove(e: MouseEvent) {
      if (!resizeRef.current) return
      const { col, startX, startWidth } = resizeRef.current
      setColWidths(prev => ({ ...prev, [col]: Math.max(60, startWidth + (e.clientX - startX)) }))
    }
    function onMouseUp() {
      setResizingCol(null)
      resizeRef.current = null
      document.body.style.userSelect = ''
      document.body.style.cursor = ''
    }
    document.addEventListener('mousemove', onMouseMove)
    document.addEventListener('mouseup', onMouseUp)
    return () => {
      document.removeEventListener('mousemove', onMouseMove)
      document.removeEventListener('mouseup', onMouseUp)
    }
  }, [resizingCol])

  // 关闭筛选下拉
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (filterDropRef.current && !filterDropRef.current.contains(e.target as Node)) {
        setOpenFilterColumn(null)
      }
    }
    document.addEventListener('mousedown', handleClick)
    return () => document.removeEventListener('mousedown', handleClick)
  }, [])

  // 加载某列的唯一值
  const loadColumnOptions = useCallback((field: string) => {
    if (filterOptions[field]) return
    setFilterLoading(prev => ({ ...prev, [field]: true }))
    fetch(`/api/assets/field-values?field=${field}&q=`)
      .then(r => r.json())
      .then(d => {
        if (d.values) setFilterOptions(prev => ({ ...prev, [field]: d.values }))
      })
      .catch(() => {})
      .finally(() => setFilterLoading(prev => ({ ...prev, [field]: false })))
  }, [filterOptions])

  // 列头点击：排序或打开筛选
  function handleColumnClick(key: string, sortable: boolean) {
    if (tableMode === 'sort') {
      if (!sortable) return
      if (sortKey === key) setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')
      else { setSortKey(key); setSortOrder('asc') }
      setPage(1)
    } else {
      if (openFilterColumn === key) {
        setOpenFilterColumn(null)
      } else {
        setOpenFilterColumn(key)
        loadColumnOptions(key)
      }
    }
  }

  // 切换某列的筛选值
  function toggleFilterValue(column: string, value: string) {
    setColumnFilterValues(prev => {
      const current = prev[column] || []
      const next = current.includes(value)
        ? current.filter(v => v !== value)
        : [...current, value]
      const updated = { ...prev, [column]: next }
      if (next.length === 0) delete updated[column]
      return updated
    })
    setPage(1)
  }

  // 清空某列筛选
  function clearColumnFilter(column: string) {
    setColumnFilterValues(prev => {
      const next = { ...prev }
      delete next[column]
      return next
    })
    setPage(1)
  }

  // 排序图标（可点击触发排序/筛选）
  function SortIcon({ colKey, sortable }: { colKey: string; sortable: boolean }) {
    if (!sortable) return null
    const icon = tableMode === 'filter'
      ? <Filter size={12} />
      : sortKey !== colKey
        ? <ChevronsUpDown size={13} />
        : sortOrder === 'asc'
          ? <ChevronUp size={13} className="text-blue-500" />
          : <ChevronDown size={13} className="text-blue-500" />
    return (
      <span
        onClick={(e) => { e.stopPropagation(); handleColumnClick(colKey, sortable) }}
        className={`ml-1 flex-shrink-0 rounded transition-colors cursor-pointer ${tableMode === 'sort' && sortKey === colKey ? 'text-blue-500' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300'}`}
        title={tableMode === 'sort' ? '点击排序' : '点击筛选'}
      >
        {icon}
      </span>
    )
  }

  // 列头是否显示筛选图标（已选值时）
  function FilterIndicator({ colKey }: { colKey: string }) {
    const vals = columnFilterValues[colKey]
    if (!vals || vals.length === 0) return null
    return (
      <span className="ml-0.5 inline-flex items-center justify-center w-4 h-4 rounded-full bg-blue-600 text-white text-[10px] font-bold">
        {vals.length}
      </span>
    )
  }

  // 筛选下拉内容
  function FilterDropdown({ column }: { column: string }) {
    const options = filterOptions[column] || []
    const selected = columnFilterValues[column] || []
    const searchVal = filterSearch[column] || ''
    const loading = filterLoading[column]
    const filtered = searchVal
      ? options.filter(o => o.toLowerCase().includes(searchVal.toLowerCase()))
      : options
    const hasMore = options.length >= 50

    return (
      <div className="absolute top-full left-0 z-50 mt-1 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-xl w-fit min-w-48 max-w-80">
        {/* 搜索框 */}
        <div className="p-2 border-b border-slate-100 dark:border-slate-700">
          <input
            type="text"
            value={searchVal}
            onChange={e => setFilterSearch(prev => ({ ...prev, [column]: e.target.value }))}
            placeholder="搜索..."
            className="w-full px-2 py-1 rounded border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-xs text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-500"
          />
        </div>

        {/* 选项列表 */}
        <div className="max-h-56 overflow-y-auto">
          {loading ? (
            <div className="px-3 py-4 text-xs text-slate-400 text-center">加载中...</div>
          ) : filtered.length === 0 ? (
            <div className="px-3 py-4 text-xs text-slate-400 text-center">无匹配结果</div>
          ) : (
            filtered.map(opt => {
              const checked = selected.includes(opt)
              return (
                <button
                  key={opt}
                  onClick={() => toggleFilterValue(column, opt)}
                  className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors ${
                    checked
                      ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
                      : 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
                  }`}
                >
                  <span className={`w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 ${
                    checked
                      ? 'bg-blue-600 border-blue-600'
                      : 'border-slate-300 dark:border-slate-600'
                  }`}>
                    {checked && <Check size={10} className="text-white" />}
                  </span>
                  <span className="truncate">{opt || '(空)'}</span>
                </button>
              )
            })
          )}
        </div>

        {/* 底部操作 */}
        <div className="px-2 py-1.5 border-t border-slate-100 dark:border-slate-700 flex items-center justify-between">
          <span className="text-[10px] text-slate-400">
            {selected.length > 0 ? `已选 ${selected.length} 项${hasMore ? '（最多50项）' : ''}` : `${options.length} 个值`}
          </span>
          {selected.length > 0 && (
            <button
              onClick={() => { clearColumnFilter(column); setOpenFilterColumn(null) }}
              className="text-[10px] text-blue-600 dark:text-blue-400 hover:underline"
            >
              清除
            </button>
          )}
        </div>
      </div>
    )
  }

  // 切换模式：清除列筛选
  function switchMode(mode: 'sort' | 'filter') {
    setTableMode(mode)
    setOpenFilterColumn(null)
    if (mode === 'sort') {
      // 排序模式不清除筛选状态，保留 columnFilterValues
    }
  }

  useEffect(() => {
    fetch('/api/auth/me').then(r => r.json()).then(d => {
      if (d.user?.permissions) setPermissions(d.user.permissions)
    }).catch(() => {})
  }, [])

  const fetchAssets = useCallback(async () => {
    setLoading(true)
    try {
      const params = new URLSearchParams({
        page: String(page), pageSize: String(pageSize), sortKey, sortOrder,
      })
      if (search) params.set('search', search)
      for (const [field, values] of Object.entries(columnFilterValues)) {
        for (const v of values) {
          params.append(`filter_${field}`, v)
        }
      }
      const res = await fetch(`/api/assets?${params}`)
      if (res.status === 401) { router.push('/login'); return }
      const data = await res.json()
      setResult(data)
    } catch { setResult({ data: [], total: 0, page: 1, pageSize: 20, totalPages: 0 }) }
    finally { setLoading(false) }
  }, [page, pageSize, sortKey, sortOrder, search, columnFilterValues, router])

  useEffect(() => { fetchAssets() }, [fetchAssets])

  function handleSearch(q: string) {
    setSearch(q); setPage(1)
  }

  function handlePageChange(p: number) { setPage(p); setSelectedIds(new Set()) }
  function handlePageSizeChange(s: number) { setPageSize(s); setPage(1) }

  function toggleSelect(id: number) {
    setSelectedIds(prev => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  function toggleAll() {
    const allIds = result.data.map(a => a.id)
    if (selectedIds.size === allIds.length) setSelectedIds(new Set())
    else setSelectedIds(new Set(allIds))
  }

  async function handleDelete(id: number) {
    setDeleting(true)
    try {
      const res = await fetch(`/api/assets/${id}`, { method: 'DELETE' })
      if (res.ok) { setDeleteTarget(null); fetchAssets() }
    } finally { setDeleting(false) }
  }

  function handleExportConfirm() {
    const params = new URLSearchParams()
    if (exportMode === 'selected' && selectedIds.size > 0) {
      params.set('ids', [...selectedIds].join(','))
    } else {
      if (search) params.set('search', search)
      for (const [field, values] of Object.entries(columnFilterValues)) {
        for (const v of values) {
          params.append(`filter_${field}`, v)
        }
      }
    }
    setExportModalOpen(false)
    window.open(`/api/assets/export?${params}`, '_blank')
  }

  const { data, total, totalPages } = result
  const allSelected = data.length > 0 && data.every(a => selectedIds.has(a.id))

  // 是否有任何列筛选激活
  const hasActiveColumnFilters = Object.values(columnFilterValues).some(v => v.length > 0)

  const canExportAll = permissions.includes('*') || permissions.includes('assets:export:all')
  const canExportSelected = permissions.includes('*') || permissions.includes('assets:export:selected')

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">设备管理</h1>
          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
            共 <span className="font-medium">{total}</span> 台设备
            {selectedIds.size > 0 && <span className="ml-2">，已选中 <span className="font-medium text-blue-600">{selectedIds.size}</span> 台</span>}
          </p>
        </div>
        <div className="flex items-center gap-2">
          {selectedIds.size > 0 && permissions.includes('assets:update') && (
            <Link href={`/assets/batch-edit?ids=${[...selectedIds].join(',')}`}>
              <Button variant="secondary" size="sm">批量编辑 {selectedIds.size} 台</Button>
            </Link>
          )}
          {permissions.includes('assets:import') && (
            <Link href="/assets/import"><Button variant="secondary" size="sm"><Upload size={14} />导入</Button></Link>
          )}
          {permissions.includes('assets:import') && (
            <a href="/api/assets/template" download><Button variant="secondary" size="sm"><Download size={14} />模板</Button></a>
          )}
          {canExportSelected && selectedIds.size > 0 && (
            <Button variant="secondary" size="sm" onClick={() => { setExportMode('selected'); setExportModalOpen(true) }}><Download size={14} />导出选中({selectedIds.size})</Button>
          )}
          {canExportAll && (
            <Button variant="secondary" size="sm" onClick={() => { setExportMode('all'); setExportModalOpen(true) }}><Download size={14} />{selectedIds.size > 0 ? '导出全部' : '导出'}</Button>
          )}
          <Link href="/assets/new"><Button size="sm"><Plus size={14} />新增设备</Button></Link>
        </div>
      </div>

      {/* 搜索 + 高级筛选 */}
      <div className="flex items-start gap-3 mb-4">
        <div className="flex-1 flex items-center gap-2">
          <div className="relative flex-1 max-w-sm">
            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
            <input
              type="text"
              value={search}
              onChange={e => setSearch(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && handleSearch(search)}
              placeholder="快速搜索..."
              className="w-full pl-9 pr-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>
          <Button variant="secondary" size="sm" onClick={() => handleSearch(search)}>搜索</Button>
        </div>
        <Link href="/assets/advanced-search">
          <Button variant="secondary" size="sm">
            <Search size={14} />高级查询
          </Button>
        </Link>
      </div>

      {/* 活跃列筛选标签 */}
      {hasActiveColumnFilters && (
        <div className="flex flex-wrap items-center gap-2 mb-4">
          <span className="text-xs text-slate-500 dark:text-slate-400">列筛选:</span>
          {Object.entries(columnFilterValues).filter(([, v]) => v.length > 0).map(([col, vals]) => {
            const colDef = COLUMNS.find(c => c.key === col)
            return (
              <span key={col} className="inline-flex items-center gap-1 px-2 py-1 rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 text-xs">
                <span className="font-medium">{colDef?.label || col}</span>
                <span>: {vals.join(', ')}</span>
                <button onClick={() => clearColumnFilter(col)} className="ml-0.5 hover:text-blue-900 dark:hover:text-blue-200">×</button>
              </span>
            )
          })}
          <button onClick={() => { setColumnFilterValues({}); setPage(1) }}
            className="text-xs text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">清除全部</button>
        </div>
      )}

      {/* 工具栏：每页行数 */}
      <div className="flex items-center justify-end mb-2">
        <div className="flex items-center gap-1.5">
          <span className="text-xs text-slate-500 dark:text-slate-400">每页</span>
          <div className="flex rounded-lg border border-slate-300 dark:border-slate-600 overflow-hidden">
            {[20, 50, 100].map(s => (
              <button
                key={s}
                onClick={() => handlePageSizeChange(s)}
                className={`px-3 py-1 text-xs font-medium transition-colors ${
                  pageSize === s
                    ? 'bg-blue-600 text-white'
                    : 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700'
                }`}
              >
                {s}
              </button>
            ))}
          </div>
          <span className="text-xs text-slate-500 dark:text-slate-400">行</span>
        </div>
      </div>

      {/* 表格 */}
      <div className="overflow-x-auto rounded-lg border border-slate-200 dark:border-slate-700">
        <table className="w-full text-sm" style={{ tableLayout: hasResized ? 'fixed' : 'auto' }}>
          <thead className="bg-slate-50 dark:bg-slate-800">
            <tr>
              {/* 模式切换 + 全选 */}
              <th className="px-4 py-3 w-10 text-center">
                <input type="checkbox" checked={allSelected} onChange={toggleAll}
                  className="rounded border-slate-300 dark:border-slate-600" />
              </th>
              {COLUMNS.map(col => (
                <th key={col.key} data-col-key={col.key} className="px-4 py-3 text-center relative" style={colWidths[col.key] ? { width: colWidths[col.key] } : undefined}>
                  <div className="relative flex flex-col">
                    <div className="flex items-center justify-center gap-0.5">
                      {/* 左侧：模式切换按钮 */}
                      <button
                        onClick={() => switchMode(tableMode === 'sort' ? 'filter' : 'sort')}
                        className={`p-0.5 rounded transition-colors flex-shrink-0 ${
                          tableMode === 'sort' && col.sortable
                            ? 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300'
                            : tableMode === 'filter'
                              ? 'text-blue-500 bg-blue-50 dark:bg-blue-900/30'
                              : 'text-slate-300'
                        }`}
                        title={tableMode === 'sort' ? '切换到筛选模式' : '切换到排序模式'}
                      >
                        <ArrowUpDown size={12} />
                      </button>
                      {/* 中间：列标题 */}
                      <button
                        className={`font-medium min-w-0 break-all ${
                          col.sortable
                            ? 'cursor-pointer hover:text-slate-900 dark:hover:text-slate-100'
                            : 'cursor-default'
                        } ${
                          openFilterColumn === col.key
                            ? 'text-blue-600 dark:text-blue-400'
                            : tableMode === 'filter'
                              ? 'text-blue-600 dark:text-blue-400 cursor-pointer'
                              : 'text-slate-600 dark:text-slate-300'
                        }`}
                        onClick={() => handleColumnClick(col.key, col.sortable)}
                      >
                        {col.label}
                      </button>
                      {/* 右侧：排序/筛选图标 */}
                      <SortIcon colKey={col.key} sortable={col.sortable} />
                      <FilterIndicator colKey={col.key} />
                    </div>
                    {openFilterColumn === col.key && (
                      <div ref={filterDropRef}>
                        <FilterDropdown column={col.key} />
                      </div>
                    )}
                  </div>
                  {/* 右侧：拖拽手柄（宽点击区 + 细可见线） */}
                  <div
                    className="absolute top-1/2 right-0 -translate-y-1/2 h-4 w-2 cursor-col-resize z-10 flex items-center justify-center group"
                    onMouseDown={(e) => onResizeStart(col.key, e)}
                  >
                    <div className="w-px h-full bg-slate-300 dark:bg-slate-600 group-hover:bg-blue-400 transition-colors" />
                  </div>
                </th>
              ))}
              <th className="px-4 py-3 text-center font-medium text-slate-600 dark:text-slate-300" style={{ width: 120 }}>操作</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
            {loading ? (
              <tr><td colSpan={COLUMNS.length + 2} className="px-4 py-12 text-center text-slate-500 dark:text-slate-400">加载中...</td></tr>
            ) : data.length === 0 ? (
              <tr><td colSpan={COLUMNS.length + 2} className="px-4 py-12 text-center text-slate-500 dark:text-slate-400">暂无数据</td></tr>
            ) : data.map(row => (
              <tr key={row.id} className="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
                <td className="px-4 py-3 text-center">
                  <input type="checkbox" checked={selectedIds.has(row.id)} onChange={() => toggleSelect(row.id)}
                    className="rounded border-slate-300 dark:border-slate-600" />
                </td>
                <td className="px-4 py-3 font-medium text-center break-all">
                  <Link href={`/assets/${row.id}`} className="text-blue-600 dark:text-blue-400 hover:underline">{row.node_name || '-'}</Link>
                </td>
                <td className="px-4 py-3 text-slate-700 dark:text-slate-300 text-center break-all">{row.business_ip || '-'}</td>
                <td className="px-4 py-3 text-slate-700 dark:text-slate-300 text-center break-all">{row.hdm_ip ? <a href={`http://${row.hdm_ip}`} target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">{row.hdm_ip}</a> : '-'}</td>
                <td className="px-4 py-3 text-slate-700 dark:text-slate-300 text-center break-all">{row.device_type}</td>
                <td className="px-4 py-3 text-slate-700 dark:text-slate-300 text-center break-all">{row.manufacturer || '-'}</td>
                <td className="px-4 py-3 text-slate-700 dark:text-slate-300 text-center break-all">{row.device_model || '-'}</td>
                <td className="px-4 py-3 text-slate-700 dark:text-slate-300 text-center break-all">{row.serial_number || '-'}</td>
                <td className="px-4 py-3 text-center"><Badge color={statusColor[String(row.status ?? '')] || 'gray'}>{row.status ?? '-'}</Badge></td>
                <td className="px-4 py-3 text-center">
                  <div className="flex items-center gap-1">
                    <Link href={`/assets/${row.id}`}
                      className="p-1.5 rounded-lg text-slate-500 hover:text-blue-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                      <Eye size={16} />
                    </Link>
                    <Link href={`/assets/${row.id}/edit`}
                      className="p-1.5 rounded-lg text-slate-500 hover:text-green-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                      <Edit size={16} />
                    </Link>
                    <button onClick={() => setDeleteTarget(row.id)}
                      className="p-1.5 rounded-lg text-slate-500 hover:text-red-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                      <Trash2 size={16} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* 分页 */}
      <div className="mt-4 flex justify-center">
        <Pagination page={page} totalPages={totalPages} onPageChange={handlePageChange} />
      </div>

      {/* 删除确认 */}
      <Modal open={deleteTarget !== null} onClose={() => setDeleteTarget(null)} title="确认删除">
        <p className="text-slate-700 dark:text-slate-300">确定要删除这台设备吗？此操作不可撤销。</p>
        <div className="flex justify-end gap-3 mt-4">
          <Button variant="secondary" onClick={() => setDeleteTarget(null)}>取消</Button>
          <Button variant="danger" loading={deleting} onClick={() => deleteTarget && handleDelete(deleteTarget)}>确认删除</Button>
        </div>
      </Modal>

      {/* 导出确认 */}
      <Modal open={exportModalOpen} onClose={() => setExportModalOpen(false)} title={exportMode === 'selected' ? '导出选中设备' : '导出全部设备'}>
        {exportMode === 'selected' ? (
          <p className="text-slate-700 dark:text-slate-300 mb-3">
            即将导出已选中的 <span className="font-medium">{selectedIds.size}</span> 台设备的资产数据。
          </p>
        ) : (
          <>
            <p className="text-slate-700 dark:text-slate-300 mb-3">
              即将导出 <span className="font-medium">{total}</span> 台设备的资产数据。
            </p>
            {(Object.keys(columnFilterValues).length > 0 || search) && (
              <p className="text-sm text-slate-500 dark:text-slate-400">当前筛选条件将一并应用，仅导出匹配的数据。</p>
            )}
          </>
        )}
        <div className="flex justify-end gap-3 mt-4">
          <Button variant="secondary" onClick={() => setExportModalOpen(false)}>取消</Button>
          <Button onClick={handleExportConfirm}><Download size={14} />确认导出</Button>
        </div>
      </Modal>
    </div>
  )
}