/**
 * JailFileForm — structured form editor for a single `jail.d/*.conf` file.
 *
 * Renders each jail section in the file as an accordion panel with fields for
 * all common jail settings plus log paths, action references, and extra keys.
 *
 * All fields auto-save through `useAutoSave`.
 */

import { MessageBar, MessageBarBody, Skeleton, SkeletonItem } from "@fluentui/react-components";
import { useJailFileConfig } from "../../hooks/useJailFileConfig";
import { JailFileFormInner } from "./JailFileFormInner";

interface JailFileFormProps {
  filename: string;
}

export function JailFileForm({ filename }: JailFileFormProps): React.JSX.Element {
  const { config, loading, error, save } = useJailFileConfig(filename);

  if (loading) {
    return (
      <Skeleton aria-label="Loading jail file config…">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 8 }}>
          <SkeletonItem size={32} />
          <SkeletonItem size={32} />
          <SkeletonItem size={32} />
          <SkeletonItem size={32} />
        </div>
        <SkeletonItem size={32} />
      </Skeleton>
    );
  }

  if (error !== null) {
    return (
      <MessageBar intent="error" style={{ margin: "8px 0" }}>
        <MessageBarBody>{error}</MessageBarBody>
      </MessageBar>
    );
  }

  if (config === null) {
    return <></>;
  }

  return <JailFileFormInner config={config} onSave={save} />;
}