import React from "react";
import { useTranslation } from "react-i18next";
import AppsIcon from "@mui/icons-material/AppsRounded";
import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
import {
  useNavigationState,
  useNavigationActions,
} from "@app/contexts/NavigationContext";
import { useSidebarNavigation } from "@app/hooks/useSidebarNavigation";
import { handleUnlessSpecialClick } from "@app/utils/clickHandlers";
import QuickAccessButton from "@app/components/shared/quickAccessBar/QuickAccessButton";

interface AllToolsNavButtonProps {
  activeButton: string;
  setActiveButton: (id: string) => void;
}

const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({
  activeButton,
  setActiveButton,
}) => {
  const { t } = useTranslation();
  const {
    handleReaderToggle,
    handleBackToTools,
    selectedToolKey,
    leftPanelView,
  } = useToolWorkflow();
  const { hasUnsavedChanges } = useNavigationState();
  const { actions: navigationActions } = useNavigationActions();
  const { getHomeNavigation } = useSidebarNavigation();

  const performNavigation = () => {
    setActiveButton("tools");
    // Preserve existing behavior used in QuickAccessBar header
    handleReaderToggle();
    handleBackToTools();
  };

  const handleClick = () => {
    if (hasUnsavedChanges) {
      navigationActions.requestNavigation(performNavigation);
      return;
    }
    performNavigation();
  };

  // Do not highlight All Tools when a specific tool is open (indicator is shown)
  const isActive =
    activeButton === "tools" &&
    !selectedToolKey &&
    leftPanelView === "toolPicker";

  const navProps = getHomeNavigation();

  const handleNavClick = (e: React.MouseEvent) => {
    if (hasUnsavedChanges) {
      e.preventDefault();
      navigationActions.requestNavigation(performNavigation);
      return;
    }
    handleUnlessSpecialClick(e, handleClick);
  };

  return (
    <div className="mt-4 mb-2">
      <QuickAccessButton
        icon={<AppsIcon sx={{ fontSize: isActive ? "1.875rem" : "1.5rem" }} />}
        label={t("quickAccess.allTools", "Tools")}
        isActive={isActive}
        onClick={handleNavClick}
        href={navProps.href}
        ariaLabel={t("quickAccess.allTools", "Tools")}
        textClassName="all-tools-text"
        component="a"
      />
    </div>
  );
};

export default AllToolsNavButton;
