/**
 * ExportTab — raw config file editing escape hatch.
 *
 * Three sub-tabs: "Jail Files", "Filters", "Actions".  Each sub-tab gives
 * direct access to the raw file content via textarea + per-file Save button,
 * identical to the behaviour that was previously in the dedicated tabs.
 *
 * This tab provides an advanced interface for users who need to edit config
 * files directly without the structured form UI.
 */

import { useState } from "react";
import { Tab, TabList, Text, tokens } from "@fluentui/react-components";
import {
  fetchActionFile,
  fetchActionFiles,
  fetchFilterFile,
  fetchFilterFiles,
  createActionFile,
  createFilterFile,
  updateActionFile,
  updateFilterFile,
} from "../../api/file_config";
import { JailFilesTab } from "./JailFilesTab";
import { ConfFilesTab } from "./ConfFilesTab";

type ExportSubTab = "jailfiles" | "filters" | "actions";

/**
 * Export tab containing raw-file editors for jail, filter, and action files.
 *
 * @returns JSX element.
 */
export function ExportTab(): React.JSX.Element {
  const [sub, setSub] = useState<ExportSubTab>("jailfiles");

  return (
    <div>
      <Text
        as="p"
        size={300}
        style={{
          color: tokens.colorNeutralForeground3,
          fontStyle: "italic",
          marginBottom: tokens.spacingVerticalM,
        }}
      >
        Direct raw-file editing — for advanced users. Changes take effect on
        next fail2ban reload.
      </Text>

      <TabList
        appearance="subtle"
        selectedValue={sub}
        onTabSelect={(_e, d) => {
          setSub(d.value as ExportSubTab);
        }}
        style={{ marginBottom: tokens.spacingVerticalM }}
      >
        <Tab value="jailfiles">Jail Files</Tab>
        <Tab value="filters">Filters</Tab>
        <Tab value="actions">Actions</Tab>
      </TabList>

      {sub === "jailfiles" && <JailFilesTab />}

      {sub === "filters" && (
        <ConfFilesTab
          label="Filter"
          fetchList={fetchFilterFiles}
          fetchFile={fetchFilterFile}
          updateFile={updateFilterFile}
          createFile={createFilterFile}
        />
      )}

      {sub === "actions" && (
        <ConfFilesTab
          label="Action"
          fetchList={fetchActionFiles}
          fetchFile={fetchActionFile}
          updateFile={updateActionFile}
          createFile={createActionFile}
        />
      )}
    </div>
  );
}
