import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Breadcrumb } from "react-bootstrap";
import { AuthService, EmployeeService } from "../../services";

const Permission = () => {
  const navigate = useNavigate();
  const [employees, setEmployees] = useState([]);
  const [keyword, setKeyword] = useState("");
  const [showInactive, setShowInactive] = useState(false);

  useEffect(() => {
    if (!AuthService.canViewEmployees() && !AuthService.canAddOrEditEmployees()) {
      window.alert("You haven't login yet OR this user does not have access to this page. Please change an admin account to login.");
      AuthService.logout();
      navigate("/login");
      return;
    }

    EmployeeService.getAllEmployees().then((data) => {
      setEmployees(data?.data || []);
    });
  }, []);

  const goToEdit = (id) => {
    navigate(`/employees/edit/${id}`);
  };

  const displayedEmployees = (employees || [])
    .filter((item) => (showInactive ? true : item?.status === "active"))
    .filter((item) => (item?.name || "").toLowerCase().includes(keyword.toLowerCase()));

  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
          <Breadcrumb.Item active>Permission</Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
          <h4>Permission</h4>
        </div>
      </div>

      <div className="app-main-content-list-container list-page">
        <div className="app-main-content-list-func-container">
          <div className="list row mb-4">
            <div className="col-md-12">
              <div className="mb-3">
                Filter By Name:{" "}
                <input type="text" value={keyword} onChange={(e) => setKeyword(e.currentTarget.value)} />
              </div>
              <div className="mb-3">
                <input
                  className="me-2"
                  type="checkbox"
                  checked={showInactive === true}
                  onChange={() => setShowInactive(!showInactive)}
                />
                Show Inactive Employees
              </div>
              <table className="personnel-info-table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Preferred Name</th>
                    <th>Username</th>
                    <th>Status</th>
                    <th>Roles</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {displayedEmployees.map((employee) => (
                    <tr key={employee?.id}>
                      <td>{employee?.name}</td>
                      <td>{employee?.name_cn}</td>
                      <td>{employee?.username}</td>
                      <td>{employee?.status}</td>
                      <td>{employee?.roles?.join(", ")}</td>
                      <td>
                        <button
                          className="btn btn-primary btn-sm me-2"
                          onClick={() => goToEdit(employee?.id)}
                          disabled={!AuthService.canAddOrEditEmployees()}
                        >
                          Edit
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Permission;
