/**
 * ActionForm — structured form editor for a single `action.d/*.conf` file.
 *
 * Displays parsed fields grouped into collapsible sections:
 * - Includes (before / after)
 * - Lifecycle commands (actionstart, actionstop, actioncheck, actionban,
 *   actionunban, actionflush)
 * - Definition variables (extra [Definition] key-value pairs)
 * - Init variables ([Init] section key-value pairs)
 *
 * Provides a Save button and shows saving/error state.
 */

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

export interface ActionFormProps {
  /** Action base name (e.g. `"iptables"`). */
  name: string;
}

export function ActionForm({ name }: ActionFormProps): React.JSX.Element {
  const { config, loading, error, save } = useActionConfig(name);

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

  if (error !== null || config === null) {
    return (
      <MessageBar intent="error">
        <MessageBarBody>{error ?? "Failed to load action config"}</MessageBarBody>
      </MessageBar>
    );
  }

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