const Table = ({ columns, data, isLoading = false, className = '', onRowClick, selectedItems, onSelectAll, onSelectItem }) => {
  const handleRowClick = (e, row) => {
    // Prevent triggering row click if clicking a button, link, or input
    if (e.target.closest('button') || e.target.closest('a') || e.target.closest('input')) {
      return;
    }
    if (onRowClick) {
      onRowClick(row);
    }
  }

  const isSelected = (id) => selectedItems?.includes(id);
  if (isLoading) {
    return (
      <div className="w-full h-32 flex items-center justify-center">
        <div className="animate-spin text-[#2AA8B8] text-3xl">⏳</div>
      </div>
    )
  }

  if (data.length === 0) {
    return (
      <div className="w-full py-12 text-center text-gray-500 dark:text-gray-400">
        <p className="text-lg">No data found</p>
      </div>
    )
  }

  return (
    <div className={`overflow-x-auto rounded-xl border border-[#B2E0E8]/50 dark:border-slate-700 ${className}`}>
      <table className="w-full">
        <thead>
          <tr className="bg-gradient-to-r from-[#2AA8B8] to-[#1E8E9E]">
            {selectedItems && (
              <th className="px-6 py-3.5 w-4">
                <input
                  type="checkbox"
                  onChange={(e) => onSelectAll?.(e.target.checked)}
                  checked={data.length > 0 && selectedItems.length === data.length}
                  className="accent-[#F5A623]"
                />
              </th>
            )}
            {columns.map((col) => (
              <th
                key={col.key}
                className="px-6 py-3.5 text-left text-sm font-bold text-white tracking-wide uppercase"
              >
                {col.label}
              </th>
            ))}
          </tr>
        </thead>

        <tbody className="divide-y divide-[#E8F4F6] dark:divide-slate-700">
          {data.map((row, idx) => (
            <tr
              key={idx}
              className={`
                transition-colors
                ${idx % 2 === 0 ? 'bg-white dark:bg-slate-900' : 'bg-[#F8FCFD] dark:bg-slate-800/50'}
                hover:bg-[#E8F7F9] dark:hover:bg-[#2AA8B8]/10
                ${onRowClick ? 'cursor-pointer' : ''}
              `}
              onClick={(e) => handleRowClick(e, row)}
            >
              {selectedItems && (
                <td className="px-6 py-4">
                  <input
                    type="checkbox"
                    checked={isSelected(row.user_id || row.id)}
                    onChange={(e) => onSelectItem?.(row.user_id || row.id, e.target.checked)}
                    className="accent-[#F5A623]"
                  />
                </td>
              )}
              {columns.map((col) => (
                <td
                  key={col.key}
                  className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300"
                >
                  {col.render ? col.render(row[col.key], row) : row[col.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default Table
