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, FileCode } from 'lucide-react'
import StatusBadge from '../components/StatusBadge'

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 [statusFilter, setStatusFilter] = useState('')

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

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

  // Filtered and sorted data (client-side: search + sort only; status handled by backend)
  const processedData = useMemo(() => {
    let result = [...records]
    
    // 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])

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

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

  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>
          
          {/* Status Filter (basic categories — server-side) */}
          <div className="flex items-center gap-2">
            <Filter size={16} className="text-slate-400" />
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="text-sm border border-slate-300 rounded-md px-2 py-2"
            >
              <option value="">全部狀態</option>
              <option value="normal">正常</option>
              <option value="abnormal">異常</option>
              <option value="missing">缺勤</option>
              <option value="holiday">公假</option>
              <option value="leave">請假</option>
            </select>
            
            {statusFilter && (
              <button
                onClick={() => setStatusFilter('')}
                className="p-1 text-slate-400 hover:text-slate-600"
                title="清除篩選"
              >
                <X size={16} />
              </button>
            )}
          </div>
          
          {/* Result count */}
          <div className="text-sm text-slate-500 py-2">
            {processedData.length} 筆記錄
            {statusFilter && (
              <span className="ml-2 text-slate-400">• 已篩選：{statusFilter}</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) => (
                  <tr 
                    key={record._row} 
                    className="hover:bg-slate-50 cursor-pointer"
                    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">
                      <StatusBadge
                        code={record.status_code}
                        text={record.status_text}
                      />
                    </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>
  )
}