'use client';
import { Employee } from './EmployeesContent';

interface Props {
  employees: Employee[];
  total: number;
  onView: (e: Employee) => void;
  onEdit: (e: Employee) => void;
  onDelete: ((e: Employee) => void) | null;
}

export default function EmployeeTable({ employees, total, onView, onEdit, onDelete }: Props) {
  // Helper function to get status badge color
  const getStatusBadge = (status: string) => {
    const styles: Record<string, string> = {
      'Active': 'bg-green-100 text-green-700',
      'On Leave': 'bg-orange-100 text-orange-700',
      'Probation': 'bg-blue-100 text-blue-700',
      'Inactive': 'bg-red-100 text-red-600',
      'Pending Activation': 'bg-yellow-100 text-yellow-700',
    };
    return styles[status] || 'bg-gray-100 text-gray-600';
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
      {/* Desktop table */}
      <div className="hidden md:block overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="bg-gray-50 border-b border-gray-100">
              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Employee</th>
              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Emp ID</th>
              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Department</th>
              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Role</th>
              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Status</th>
              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Actions</th>
            </tr>
          </thead>
          <tbody>
            {employees.length === 0 ? (
              <tr>
                <td colSpan={6} className="text-center py-12 text-gray-400 text-sm">
                  <i className="ri-user-line text-4xl mb-2 block"></i>
                  No employees found
                </td>
              </tr>
            ) : (
              employees.map((emp, i) => (
                <tr key={emp.id} className={`border-b border-gray-50 hover:bg-pink-50/20 transition-colors ${i % 2 === 0 ? '' : 'bg-gray-50/30'}`}>
                  <td className="px-5 py-3">
                    <div className="flex items-center gap-3">
                      <div className="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0" style={{ background: '#b828a0' }}>
                        {emp.avatar || emp.name?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
                      </div>
                      <div>
                        <p className="text-sm font-semibold text-gray-800">{emp.name}</p>
                        <p className="text-xs text-gray-400">{emp.email}</p>
                      </div>
                    </div>
                  </td>
                  <td className="px-5 py-3">
                    <span className="text-sm text-gray-700 font-mono bg-pink-50 px-2 py-0.5 rounded-lg border border-pink-100">
                      {emp.employeeNumber || emp.id.slice(0, 8)}
                    </span>
                  </td>
                  <td className="px-5 py-3">
                    <span className="text-xs px-2 py-1 rounded-full font-medium bg-pink-100 text-pink-700 whitespace-nowrap">
                      {emp.dept}
                    </span>
                  </td>
                  <td className="px-5 py-3 text-sm text-gray-700">{emp.role}</td>
                  <td className="px-5 py-3">
                    <span className={`text-xs px-2 py-1 rounded-full font-medium ${getStatusBadge(emp.status)}`}>
                      {emp.status}
                    </span>
                  </td>
                  <td className="px-5 py-3">
                    <div className="flex items-center gap-1">
                      <button 
                        onClick={() => onView(emp)} 
                        title="View" 
                        className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-pink-100 cursor-pointer transition-colors" 
                        style={{ color: '#b828a0' }}
                      >
                        <i className="ri-eye-line text-sm"></i>
                      </button>
                      <button 
                        onClick={() => onEdit(emp)} 
                        title="Edit" 
                        className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-blue-100 text-blue-600 cursor-pointer transition-colors"
                      >
                        <i className="ri-edit-line text-sm"></i>
                      </button>
                      {onDelete && (
                        <button 
                          onClick={() => onDelete(emp)} 
                          title="Delete" 
                          className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-red-100 text-red-500 cursor-pointer transition-colors"
                        >
                          <i className="ri-delete-bin-line text-sm"></i>
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {/* Mobile card view */}
      <div className="md:hidden divide-y divide-gray-100">
        {employees.length === 0 ? (
          <div className="text-center py-12 text-gray-400 text-sm">
            <i className="ri-user-line text-4xl mb-2 block"></i>
            No employees found.
          </div>
        ) : (
          employees.map((emp) => (
            <div key={emp.id} className="p-4 hover:bg-pink-50/20 transition-colors">
              <div className="flex items-start justify-between gap-3">
                <div className="flex items-center gap-3 flex-1 min-w-0">
                  <div className="w-10 h-10 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0" style={{ background: '#b828a0' }}>
                    {emp.avatar || emp.name?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
                  </div>
                  <div className="min-w-0">
                    <p className="text-sm font-semibold text-gray-800 truncate">{emp.name}</p>
                    <p className="text-xs text-gray-400 truncate">{emp.email}</p>
                    <div className="flex items-center gap-2 mt-1 flex-wrap">
                      <span className="text-xs font-mono bg-pink-50 px-1.5 py-0.5 rounded border border-pink-100 text-gray-700">
                        {emp.employeeNumber || emp.id.slice(0, 8)}
                      </span>
                      <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${getStatusBadge(emp.status)}`}>
                        {emp.status}
                      </span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-1 flex-shrink-0">
                  <button onClick={() => onView(emp)} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-pink-100 cursor-pointer transition-colors" style={{ color: '#b828a0' }}>
                    <i className="ri-eye-line text-sm"></i>
                  </button>
                  <button onClick={() => onEdit(emp)} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-blue-100 text-blue-600 cursor-pointer transition-colors">
                    <i className="ri-edit-line text-sm"></i>
                  </button>
                  {onDelete && (
                    <button onClick={() => onDelete(emp)} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-red-100 text-red-500 cursor-pointer transition-colors">
                      <i className="ri-delete-bin-line text-sm"></i>
                    </button>
                  )}
                </div>
              </div>
              <div className="mt-2 flex items-center gap-2 flex-wrap">
                <span className="text-xs px-2 py-0.5 rounded-full bg-pink-100 text-pink-700">{emp.dept}</span>
                <span className="text-xs text-gray-500">{emp.role}</span>
              </div>
            </div>
          ))
        )}
      </div>

      {/* Footer */}
      <div className="px-5 py-3 flex items-center justify-between border-t border-gray-100 bg-gray-50/30">
        <p className="text-sm text-gray-500">
          Showing <strong className="text-gray-700">{employees.length}</strong> of <strong className="text-gray-700">{total}</strong> employees
        </p>
        {employees.length > 0 && (
          <div className="text-xs text-gray-400">
            {employees.filter(e => e.status === 'Active').length} Active
          </div>
        )}
      </div>
    </div>
  );
}