import React, { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import Sidebar from '../sidebar/Sidebar';
import axiosInstance from '../../api/axiosConfig';


const EmployeeList = ({ className = '' }) => {
  const [employees, setEmployees] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    getEmployees();
  }, []);

  const getEmployees = async () => {
    try {
      const response = await axiosInstance.get('http://localhost:5000/employees');
      let employees_data = response.data;
      setEmployees(employees_data);
    } catch (error) {
      console.error('Error fetching employees:', error.response || error.message);
    }
  };

  const handleAddEmployee = () => {
    navigate('/add-employee');
  };

  const onEmployeeClick = useCallback(() => {
    navigate('/employee-profile');
  }, [navigate]);

  return (
    <div className="flex flex-row min-h-screen">
      <Sidebar />
      <div className="flex-grow p-6 bg-gray-100">
        <div className="bg-white p-6 rounded-lg shadow">
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-2xl font-semibold text-gray-800">employees list</h1>
            <button
              className="bg-#0e355b text-d1d5db px-4 py-2 rounded-md text-sm"
              onClick={handleAddEmployee}
            >
              add new employee
            </button>
          </div>
          <div className="flex items-center mb-4">
            <svg
              className="w-5 h-5 mr-2 text-gray-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
              />
            </svg>
            <span className="text-sm text-gray-600">filter</span>
          </div>
          <p className="text-sm text-gray-600 mb-4">total employees: ({employees.length})</p>
          <table className="w-full bg-white">
            <thead>
              <tr className="text-left text-xs uppercase text-gray-600 border-b">
                <th className="py-2">#</th>
                <th className="py-2">Employee Name</th>
                <th className="py-2">Email Address</th>
                <th className="py-2">Details</th>
              </tr>
            </thead>
            <tbody>
              {employees.map((employee, index) => (
                <tr key={employee.id} className="border-b last:border-none">
                  <td className="py-2 text-gray-800">{index + 1}</td>
                  <td className="py-2 text-gray-800">{employee.firstname} {employee.lastname}</td>
                  <td className="py-2 text-gray-800">{employee.email}</td>
                  <td className="py-2 text-gray-800">
                    <span
                      className="text-#4b5563 underline cursor-pointer hover:text-#0e355b transition"
                      onClick={onEmployeeClick}
                    >
                      view details
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default EmployeeList;