/**
 * Configuration page — fail2ban jail and server configuration editor.
 *
 * Top-level page component for the configuration interface. Renders page layout
 * and delegates tab routing to {@link ConfigPageContainer}.
 *
 * 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
 *
 * Configuration content is wrapped with SectionErrorBoundary to prevent
 * one tab or editor from crashing the entire page.
 */

import { Text, makeStyles, tokens } from "@fluentui/react-components";
import { SectionErrorBoundary } from "../components/SectionErrorBoundary";
import { ConfigPageContainer } from "../components/config/ConfigPageContainer";

const useStyles = makeStyles({
  page: {
    padding: tokens.spacingVerticalXXL,
    maxWidth: "1100px",
  },
  header: {
    marginBottom: tokens.spacingVerticalL,
  },
  infoText: {
    color: tokens.colorNeutralForeground3,
    fontStyle: "italic",
  },
});

export function ConfigPage(): React.JSX.Element {
  const styles = useStyles();

  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>

      <SectionErrorBoundary sectionName="Configuration Editor">
        <ConfigPageContainer />
      </SectionErrorBoundary>
    </div>
  );
}