aars/frontend/src/pages/attendance/List.jsx

import { useState, useEffect, useMemo } from 'react'
import { Link } from 'react-router-dom'
import api from '../../api'
import toast from 'react-hot-toast'
import { Search, Eye, ChevronUp, ChevronDown, Filter, X, AlertCircle, Clock, FileCode } from 'lucide-react'

const handleExportHTML = (section) => {
  const token = localStorage.getItem('aars_token')
  if (token) {
    window.open(`/api/report/${section}/html?token=${token}`, '_blank')
  }
}

export default function AttendanceList() {
  const [records, setRecords] = useState([])
  const [headers, setHeaders] = useState([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [sortKey, setSortKey] = useState(null)
  const [sortDir, setSortDir] = useState('asc')
  const [filterKey, setFilterKey] = useState('')
  const [filterValue, setFilterValue] = useState('')
  const [latenessRecords, setLatenessRecords] = useState([])

  useEffect(() => {
    fetchRecords()
    fetchLateness()
  }, [])

  const fetchRecords = async () => {
    setLoading(true)
    try {
      const { data } = await api.get('/api/attendance?page=1&page_size=1000')
      setRecords(data.data || [])
      
      if (data.data && data.data.length > 0) {
        const keys = Object.keys(data.data[0]).filter(k => k !== '_row')
        setHeaders(keys)
      }
    } catch (err) {
      toast.error('Failed to load records')
    } finally {
      setLoading(false)
    }
  }

  const fetchLateness = async () => {
    try {
      const { data } = await api.get('/api/attendance/lateness/records')
      setLatenessRecords(data || [])
    } catch (err) {
      console.error('Failed to load lateness data:', err)
    }
  }

  // Create a map of late records for quick lookup
  const latenessMap = useMemo(() => {
    const map = {}
    latenessRecords.forEach(rec => {
      const key = `${rec.staff}-${rec.date}`
      map[key] = rec
    })
    return map
  }, [latenessRecords])

  // Filtered and sorted data
  const processedData = useMemo(() => {
    let result = [...records]
    
    // Filter
    if (filterKey && filterValue) {
      result = result.filter(r => {
        const val = String(r[filterKey] || '').toLowerCase()
        return val.includes(filterValue.toLowerCase())
      })
    }
    
    // Search
    if (search) {
      const searchLower = search.toLowerCase()
      result = result.filter(r =>
        Object.values(r).some(v => 
          v && String(v).toLowerCase().includes(searchLower)
        )
      )
    }
    
    // Sort
    if (sortKey) {
      result.sort((a, b) => {
        const aVal = a[sortKey] || ''
        const bVal = b[sortKey] || ''
        const aNum = Number(aVal)
        const bNum = Number(bVal)
        
        let cmp = 0
        if (!isNaN(aNum) && !isNaN(bNum)) {
          cmp = aNum - bNum
        } else {
          cmp = String(aVal).localeCompare(String(bVal))
        }
        return sortDir === 'asc' ? cmp : -cmp
      })
    }
    
    return result
  }, [records, search, sortKey, sortDir, filterKey, filterValue])

  const handleSort = (key) => {
    if (sortKey === key) {
      setSortDir(sortDir === 'asc' ? 'desc' : 'asc')
    } else {
      setSortKey(key)
      setSortDir('asc')
    }
  }

  const handleFilter = (key) => {
    setFilterKey(key)
    setFilterValue('')
  }

  const clearFilter = () => {
    setFilterKey('')
    setFilterValue('')
  }

  const getSortIcon = (key) => {
    if (sortKey !== key) return null
    return sortDir === 'asc' ? <ChevronUp size={14} /> : <ChevronDown size={14} />
  }

  // Get lateness info for a record
  const getLatenessInfo = (record) => {
    // Find staff name and date columns
    const staffKey = Object.keys(record).find(k => 
      k.toLowerCase().includes('staff') || k.toLowerCase().includes('name') || k.toLowerCase().includes('員工')
    )
    const dateKey = Object.keys(record).find(k => 
      k.toLowerCase().includes('date') || k.toLowerCase().includes('日期')
    )
    
    if (!staffKey || !dateKey) return null
    
    const staff = record[staffKey]
    const date = record[dateKey]
    
    if (!staff || !date) return null
    
    const key = `${staff}-${String(date).slice(0, 10)}`
    return latenessMap[key]
  }

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold text-slate-900">出勤記錄 Attendance</h1>
        <div className="flex gap-2">
          <button
            onClick={() => handleExportHTML('attendance')}
            className="flex items-center gap-2 px-4 py-2 bg-slate-700 text-white text-sm rounded-md hover:bg-slate-800"
          >
            <FileCode size={16} />
            匯出 HTML Report
          </button>
          <Link
            to="/upload"
            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700"
          >
            上傳 Excel
          </Link>
        </div>
      </div>

      {/* Filters */}
      <div className="card p-3">
        <div className="flex flex-wrap gap-3">
          {/* Search */}
          <div className="relative flex-1 min-w-[200px]">
            <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)}
              placeholder="搜尋所有欄位..."
              className="w-full pl-9 pr-4 py-2 text-sm border border-slate-300 rounded-md"
            />
          </div>
          
          {/* Column Filter */}
          <div className="flex items-center gap-2">
            <Filter size={16} className="text-slate-400" />
            <select
              value={filterKey}
              onChange={(e) => handleFilter(e.target.value)}
              className="text-sm border border-slate-300 rounded-md px-2 py-2"
            >
              <option value="">篩選欄位</option>
              {headers.slice(0, 6).map(h => (
                <option key={h} value={h}>{h}</option>
              ))}
            </select>
            
            {filterKey && (
              <>
                <input
                  type="text"
                  value={filterValue}
                  onChange={(e) => setFilterValue(e.target.value)}
                  placeholder="輸入篩選值..."
                  className="text-sm border border-slate-300 rounded-md px-2 py-2 w-32"
                />
                <button onClick={clearFilter} className="p-1 text-slate-400 hover:text-slate-600">
                  <X size={16} />
                </button>
              </>
            )}
          </div>
          
          {/* Result count */}
          <div className="text-sm text-slate-500 py-2">
            {processedData.length} 筆記錄
            {latenessRecords.length > 0 && (
              <span className="ml-2 text-orange-600">
                • {latenessRecords.length} 筆遲到
              </span>
            )}
          </div>
        </div>
      </div>

      {/* Table */}
      <div className="card overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="bg-slate-100 border-b border-slate-200">
              <tr>
                <th className="px-3 py-2 text-left text-xs font-semibold text-slate-600 w-12">#</th>
                {headers.slice(0, 6).map(h => (
                  <th 
                    key={h} 
                    className="px-3 py-2 text-left text-xs font-semibold text-slate-600 cursor-pointer hover:bg-slate-200"
                    onClick={() => handleSort(h)}
                  >
                    <div className="flex items-center gap-1">
                      {h}
                      {getSortIcon(h)}
                    </div>
                  </th>
                ))}
                <th className="px-3 py-2 text-center text-xs font-semibold text-slate-600 w-20">狀態</th>
                <th className="px-3 py-2 text-right text-xs font-semibold text-slate-600 w-16">操作</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {loading ? (
                <tr>
                  <td colSpan={9} className="px-3 py-6 text-center text-slate-400">
                    載入中...
                  </td>
                </tr>
              ) : processedData.length === 0 ? (
                <tr>
                  <td colSpan={9} className="px-3 py-6 text-center text-slate-400">
                    沒有記錄
                  </td>
                </tr>
              ) : (
                processedData.map((record) => {
                  const lateInfo = getLatenessInfo(record)
                  const isLate = lateInfo && lateInfo.minutes_late > 0
                  
                  return (
                    <tr 
                      key={record._row} 
                      className={`hover:bg-slate-50 cursor-pointer ${isLate ? 'bg-orange-50' : ''}`}
                      onClick={() => window.location.href = `/attendance/${record._row}`}
                    >
                      <td className="px-3 py-2 text-xs text-slate-400">{record._row}</td>
                      {headers.slice(0, 6).map(h => (
                        <td key={h} className="px-3 py-2 text-slate-700 max-w-xs truncate">
                          {record[h] !== null && record[h] !== undefined ? String(record[h]) : '-'}
                        </td>
                      ))}
                      <td className="px-3 py-2 text-center">
                        {isLate ? (
                          <div className="flex items-center justify-center gap-1 text-orange-600" title={`遲到 ${lateInfo.minutes_late} 分鐘`}>
                            <AlertCircle size={14} />
                            <span className="text-xs font-medium">{lateInfo.minutes_late}分</span>
                          </div>
                        ) : (
                          <div className="flex items-center justify-center gap-1 text-green-600">
                            <Clock size={14} />
                            <span className="text-xs">正常</span>
                          </div>
                        )}
                      </td>
                      <td className="px-3 py-2 text-right" onClick={(e) => e.stopPropagation()}>
                        <Link
                          to={`/attendance/${record._row}`}
                          className="p-1 text-slate-400 hover:text-primary-600 inline-block"
                        >
                          <Eye size={16} />
                        </Link>
                      </td>
                    </tr>
                  )
                })
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}