"use client";

import { useXmlConfig } from "../hooks/use-xml-config";
import { XmlSettings } from "./xml-settings";
import { CategoryManager } from "./category-manager";
import { XmlPreview } from "./xml-preview";
import { Separator } from "@/shared/components/ui/separator";
import { Button } from "@/shared/components/ui/button";
import { RotateCcw } from "lucide-react";

export function WordXmlModule() {
  const {
    config,
    setMode,
    setBaseNamespace,
    setCurrentCategory,
    updateCategoryFields,
    addCategory,
    removeCategory,
    resetCategoryToPreset,
    clearCategoryFields,
    resetAll,
  } = useXmlConfig();

  return (
    <div className="space-y-6">
      {/* Settings */}
      <XmlSettings
        baseNamespace={config.baseNamespace}
        mode={config.mode}
        onSetBaseNamespace={setBaseNamespace}
        onSetMode={setMode}
      />

      <Separator />

      {/* Category manager + field editor */}
      <CategoryManager
        categories={config.categories}
        currentCategory={config.currentCategory}
        onSelectCategory={setCurrentCategory}
        onUpdateFields={updateCategoryFields}
        onAddCategory={addCategory}
        onRemoveCategory={removeCategory}
        onResetToPreset={resetCategoryToPreset}
        onClearFields={clearCategoryFields}
        baseNamespace={config.baseNamespace}
      />

      <Separator />

      {/* Preview & export */}
      <XmlPreview config={config} />

      <Separator />

      <Button variant="outline" size="sm" onClick={resetAll}>
        <RotateCcw className="mr-1.5 h-3.5 w-3.5" /> Reset complet
      </Button>
    </div>
  );
}
