/**
 * FilterForm — structured form editor for a single `filter.d/*.conf` file.
 *
 * Displays parsed fields grouped into collapsible sections:
 * - Includes (before / after)
 * - Variables ([DEFAULT] key-value pairs)
 * - Definition (prefregex, failregex, ignoreregex, optional advanced fields)
 *
 * Provides a Save button and shows saving/error state.
 */

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

export interface FilterFormProps {
  /** Filter base name (e.g. `"sshd"`). */
  name: string;
}

export function FilterForm({ name }: FilterFormProps): React.JSX.Element {
  const { config, loading, error, save } = useFilterConfig(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 filter config"}</MessageBarBody>
      </MessageBar>
    );
  }

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