/**
 * Configuration page — fail2ban jail and server configuration editor.
 *
 * Renders the top-level tab bar and delegates rendering to the appropriate
 * tab component from {@link ../components/config}.
 *
 * Tabs:
 *   Jails        — per-jail config accordion with inline editing
 *   Filters      — structured filter.d form editor
 *   Actions      — structured action.d form editor
 *   Server       — server-level settings, map thresholds, service health + log viewer
 *   Regex Tester — live pattern tester
 *   Export       — raw file editors for jail, filter, and action files
 */

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { Tab, TabList, Text, makeStyles, tokens } from "@fluentui/react-components";
import {
  ActionsTab,
  FiltersTab,
  JailsTab,
  RegexTesterTab,
  ServerTab,
} from "../components/config";

// ---------------------------------------------------------------------------
// Page-level styles (tab shell only — component styles live in configStyles.ts)
// ---------------------------------------------------------------------------

const useStyles = makeStyles({
  page: {
    padding: tokens.spacingVerticalXXL,
    maxWidth: "1100px",
  },
  header: {
    marginBottom: tokens.spacingVerticalL,
  },
  tabContent: {
    marginTop: tokens.spacingVerticalL,
    animationName: "fadeInUp",
    animationDuration: tokens.durationNormal,
    animationTimingFunction: tokens.curveDecelerateMid,
    animationFillMode: "both",
  },
  infoText: {
    color: tokens.colorNeutralForeground3,
    fontStyle: "italic",
  },
});


type TabValue =
  | "jails"
  | "filters"
  | "actions"
  | "server"
  | "regex";

export function ConfigPage(): React.JSX.Element {
  const styles = useStyles();
  const location = useLocation();
  const [tab, setTab] = useState<TabValue>("jails");

  useEffect(() => {
    const state = location.state as { tab?: string; jail?: string } | null;
    if (state?.tab === "jails") {
      setTab("jails");
    }
  }, [location.state]);

  return (
    <div className={styles.page}>
      <div className={styles.header}>
        <Text as="h1" size={700} weight="semibold" block>
          Configuration
        </Text>
        <Text as="p" size={300} className={styles.infoText}>
          Inspect and edit fail2ban jail configuration, global settings, and
          server parameters.
        </Text>
      </div>

      <TabList
        selectedValue={tab}
        onTabSelect={(_e, d) => {
          setTab(d.value as TabValue);
        }}
      >
        <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={styles.tabContent} key={tab}>
        {tab === "jails" && (
          <JailsTab
            initialJail={(location.state as { jail?: string } | null)?.jail}
          />
        )}
        {tab === "filters" && <FiltersTab />}
        {tab === "actions" && <ActionsTab />}
        {tab === "server" && <ServerTab />}
        {tab === "regex" && <RegexTesterTab />}
      </div>
    </div>
  );
}