// Import necessary modules and components
import { Menu, MenuItem, Sidebar } from "react-pro-sidebar";
import "./assets/styles/style.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faMonument,
  faTags,
  faUserTie,
} from "@fortawesome/free-solid-svg-icons";
import { AdminPanelNavBar } from "../../admin/admin_panel_navbar/admin_navbar";
import { SidebarHeader } from "../../components/sidebar_header/sidebar_header";
import { SuperadminPanelTownScreen } from "../sa_panel_town/sa_panel_town_screen/sa_panel_town_screen";
import { SuperadminPanelAdminScreen } from "../sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen";
import { LoadingScreen } from "../../components/loading_screen/loading_screen";
import { ErrorWindow } from "../../components/error_window/error_window";
import { LoadingSpinner } from "../../components/loading_spinner/loading_spinner";
import { SuperAdminSelectedPanel } from "../../../core/constants/selected_panel";
import { useSuperAdminHomePage } from "../../../domain/useCase/useSuperadminHomePage";
import { SuperAdminPanelCategoryScreen } from "../sa_panel_category/sa_panel_category_screen/sa_panel_category_screen";
import { Footer } from "../../components/footer/footer";

// Main component for the Super Admin Home Page
export const SuperAdminHomePage = () => {
  // Destructure state and functions from custom hook
  const {
    collapsed,
    isWindowActive,
    setCollapsed,
    selectedPanel,
    setSelectedPanel,
    setIsWindowActive,
    isLoading,
    error,
    errorMessage,
    statesList,
  } = useSuperAdminHomePage();

  // Show loading screen if data is still loading
  if (isLoading) return <LoadingScreen />;

  // Show error window if there is an error
  if (error)
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          width: "100vw",
          height: "100vh",
        }}
      >
        <LoadingSpinner />
        Redirigiendo...
        <ErrorWindow message={errorMessage} />
      </div>
    );

  return (
    <div className="superdmin-panel-root">
      {/* Sidebar component */}
      <Sidebar
        className="sidebar"
        collapsed={collapsed}
        onMouseOver={() => {
          isWindowActive ? setCollapsed(true) : setCollapsed(false);
        }}
        onMouseOut={() => setCollapsed(true)}
      >
        <SidebarHeader />
        <Menu>
          {/* Menu item for Towns */}
          <MenuItem
            icon={<FontAwesomeIcon icon={faMonument} />}
            onClick={() => setSelectedPanel(SuperAdminSelectedPanel.TOWNS)}
            disabled={isWindowActive}
          >
            Pueblos
          </MenuItem>

          {/* Menu item for Admins */}
          <MenuItem
            icon={<FontAwesomeIcon icon={faUserTie} />}
            onClick={() => setSelectedPanel(SuperAdminSelectedPanel.ADMINS)}
            disabled={isWindowActive}
          >
            Administradores
          </MenuItem>

          {/* Menu item for Categories */}
          <MenuItem
            icon={<FontAwesomeIcon icon={faTags} />}
            onClick={() => setSelectedPanel(SuperAdminSelectedPanel.CATEGORIES)}
            disabled={isWindowActive}
          >
            Categorías
          </MenuItem>
        </Menu>
      </Sidebar>
      <div className="superadmin-panel-body">
        {/* Navigation bar component */}
        <AdminPanelNavBar
          isWindowActive={isWindowActive}
          setIsWindowActive={setIsWindowActive}
        />
        <div className="superadmin-panel-content">
          {/* Conditional rendering based on selected panel */}
          {(() => {
            switch (selectedPanel) {
              case SuperAdminSelectedPanel.TOWNS:
                return (
                  <SuperadminPanelTownScreen
                    windowActive={isWindowActive}
                    setWindowActive={setIsWindowActive}
                    statesList={statesList}
                  />
                );
              case SuperAdminSelectedPanel.ADMINS:
                return (
                  <SuperadminPanelAdminScreen
                    isWindowActive={isWindowActive}
                    setIsWindowActive={setIsWindowActive}
                    statesList={statesList}
                  />
                );
              case SuperAdminSelectedPanel.CATEGORIES:
                return (
                  <SuperAdminPanelCategoryScreen
                    isWindowActive={isWindowActive}
                    setIsWindowActive={setIsWindowActive}
                  />
                );
              default:
                return null;
            }
          })()}
        </div>
        {/* Footer component */}
        <div className="footer-cnt">
          <Footer />
        </div>
      </div>
    </div>
  );
};
