/**
 * ConfigPageContainer — orchestrates tab navigation and routing.
 *
 * Manages the TabList, routes tab selection events, and coordinates which
 * tab content is displayed. Delegates rendering of individual tabs to
 * specialized tab components.
 *
 * This component separates concerns: routing logic (useTabRouter) is isolated
 * from rendering, and each tab is a focused, domain-specific component.
 */

import { useMemo } from "react";
import { Tab, TabList, makeStyles, tokens } from "@fluentui/react-components";
import { useTabRouter, type ConfigTabId } from "../../hooks/useTabRouter";
import { ActionsTab } from "./ActionsTab";
import { FiltersTab } from "./FiltersTab";
import { JailsTab } from "./JailsTab";
import { RegexTesterTab } from "./RegexTesterTab";
import { ServerTab } from "./ServerTab";

const useStyles = makeStyles({
  tabPanel: {
    display: "none",
  },
  tabPanelVisible: {
    display: "block",
    marginTop: tokens.spacingVerticalL,
    animationName: "fadeInUp",
    animationDuration: tokens.durationNormal,
    animationTimingFunction: tokens.curveDecelerateMid,
    animationFillMode: "both",
  },
});

/**
 * Container component for the configuration page.
 *
 * Renders the tab navigation bar and switches between tab content based on
 * the currently selected tab. Tab state is managed by useTabRouter and
 * synchronized with browser history.
 *
 * @returns JSX element with tab bar and active tab content.
 */
export function ConfigPageContainer(): React.JSX.Element {
  const styles = useStyles();
  const { activeTab, activeItem, selectTab } = useTabRouter();

  // Map tab IDs to their corresponding components.
  const tabComponents = useMemo(
    () => ({
      jails: <JailsTab initialJail={activeItem ?? undefined} />,
      filters: <FiltersTab />,
      actions: <ActionsTab />,
      server: <ServerTab />,
      regex: <RegexTesterTab />,
    }),
    [activeItem],
  );

  return (
    <>
      <TabList
        selectedValue={activeTab}
        onTabSelect={(_e, d): void => {
          selectTab(d.value as ConfigTabId);
        }}
      >
        <Tab value="jails">Jails</Tab>
        <Tab value="filters">Filters</Tab>
        <Tab value="actions">Actions</Tab>
        <Tab value="server">Server</Tab>
        <Tab value="regex">Regex Tester</Tab>
      </TabList>

      <div className={activeTab === "jails" ? styles.tabPanelVisible : styles.tabPanel}>
        {tabComponents.jails}
      </div>

      <div className={activeTab === "filters" ? styles.tabPanelVisible : styles.tabPanel}>
        {tabComponents.filters}
      </div>

      <div className={activeTab === "actions" ? styles.tabPanelVisible : styles.tabPanel}>
        {tabComponents.actions}
      </div>

      <div className={activeTab === "server" ? styles.tabPanelVisible : styles.tabPanel}>
        {tabComponents.server}
      </div>

      <div className={activeTab === "regex" ? styles.tabPanelVisible : styles.tabPanel}>
        {tabComponents.regex}
      </div>
    </>
  );
}
