/**
 * 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, logging, database config + flush logs
 *   Map          — map color threshold configuration
 *   Regex Tester — live pattern tester
 *   Export       — raw file editors for jail, filter, and action files
 */

import { useState } from "react";
import { Tab, TabList, Text, makeStyles, tokens } from "@fluentui/react-components";
import {
  ActionsTab,
  FiltersTab,
  JailsTab,
  LogTab,
  MapTab,
  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"
  | "map"
  | "regex"
  | "log";

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

  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="map">Map</Tab>
        <Tab value="regex">Regex Tester</Tab>
        <Tab value="log">Log</Tab>
      </TabList>

      <div className={styles.tabContent} key={tab}>
        {tab === "jails" && <JailsTab />}
        {tab === "filters" && <FiltersTab />}
        {tab === "actions" && <ActionsTab />}
        {tab === "server" && <ServerTab />}
        {tab === "map" && <MapTab />}
        {tab === "regex" && <RegexTesterTab />}
        {tab === "log" && <LogTab />}
      </div>
    </div>
  );
}