"use client";

import { useEffect, useMemo, useState, useCallback, useRef } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

interface CategoryColumn {
  name: string;
  type: "TEXT" | "INTEGER" | "REAL" | "BOOLEAN";
  notNull?: boolean;
  editable?: boolean;
}

interface CategoryTemplate {
  name: string;
  columns: CategoryColumn[];
  imagePath: string;
}

const BASE_COLUMN_NAMES = ["id", "nome", "image_url", "image_local_path"];

const categoriesCache: {
  data: CategoryTemplate[] | null;
  pending: Promise<CategoryTemplate[] | null> | null;
} = {
  data: null,
  pending: null,
};

function generateTempId() {
  return Math.random().toString(36).slice(2, 10);
}

export interface ItemFormPayload {
  id?: number;
  name: string;
  category: string;
  rarity?: string | null;
  imageUrl?: string | null;
  imageLocalPath?: string | null;
  level?: number | null;
  weight?: number | null;
  slots?: number | null;
  skill?: string | null;
  description?: string | null;
  servers: string[];
  tags: string[];
  metadata?: Record<string, any>;
  fields?: Record<string, string | boolean | null>;
}

interface ItemReference {
  item_id: number;
  item_name: string;
  category: string;
  rarity: string | null;
  image_url: string | null;
  image_local_path: string | null;
  level: number | null;
  weight: number | null;
  slots: number | null;
  skill: string | null;
  description?: string | null;
  servers: string[];
  tags: string[];
  metadata: Record<string, any>;
}

type AnalysisResult =
  | {
      table: string;
      columns: Record<string, unknown>;
    }
  | null;

function parseCsv(input: string): string[] {
  return input
    .split(",")
    .map((value) => value.trim())
    .filter(Boolean);
}

function serializeCsv(list: string[]): string {
  if (!Array.isArray(list) || list.length === 0) return "";
  return list.join(", ");
}

function parseNumberInput(value: string): number | null {
  if (!value) return null;
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : null;
}

interface HeaderSlotProps {
  title: string;
  description: string;
}

interface FooterSlotProps {
  isEdit: boolean;
  submitting?: boolean;
  submitLabel: string;
  onCancel?: () => void;
  onSubmitClick: () => void;
}

type PrefillPayload = Partial<{
  name: string;
  category: string;
  rarity: string | null;
  imageUrl: string | null;
  imageLocalPath: string | null;
  level: number | string | null;
  weight: number | string | null;
  slots: number | string | null;
  skill: string | null;
  servers: string[] | string;
  tags: string[] | string;
  description: string | null;
  metadata: Record<string, unknown>;
}>;

export interface AdminItemFormProps {
  mode: "create" | "edit";
  item?: ItemReference;
  categories: string[];
  serverOptions: string[];
  submitting?: boolean;
  onSubmit: (payload: ItemFormPayload) => Promise<void>;
  onCancel?: () => void;
  onSuccess?: () => void;
  isActive?: boolean;
  allowAiTools?: boolean;
  prefillData?: PrefillPayload | null;
  className?: string;
  contentClassName?: string;
  headerSlot?: (props: HeaderSlotProps) => React.ReactNode;
  footerSlot?: (props: FooterSlotProps) => React.ReactNode;
}

export function AdminItemForm({
  mode,
  item,
  categories,
  serverOptions,
  submitting,
  onSubmit,
  onCancel,
  onSuccess,
  isActive = true,
  allowAiTools: allowAiToolsProp,
  prefillData,
  className,
  contentClassName,
  headerSlot,
  footerSlot,
}: AdminItemFormProps) {
  const isEdit = mode === "edit";
  const allowAiTools = allowAiToolsProp ?? !isEdit;

  const [name, setName] = useState("");
  const [category, setCategory] = useState("");
  const [rarity, setRarity] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [imageLocalPath, setImageLocalPath] = useState("");
  const [description, setDescription] = useState("");
  const [level, setLevel] = useState("");
  const [weight, setWeight] = useState("");
  const [slots, setSlots] = useState("");
  const [skill, setSkill] = useState("");
  const [serversCsv, setServersCsv] = useState("");
  const [tagsCsv, setTagsCsv] = useState("");

  const [analysis, setAnalysis] = useState<AnalysisResult>(null);
  const [analysisLoading, setAnalysisLoading] = useState(false);
  const [analysisError, setAnalysisError] = useState<string | null>(null);
  const [submitStatus, setSubmitStatus] = useState<string | null>(null);

  const [categoryTemplates, setCategoryTemplates] = useState<CategoryTemplate[]>([]);
  const [categoryLoading, setCategoryLoading] = useState(false);
  const [categoryError, setCategoryError] = useState<string | null>(null);
  const [dynamicValues, setDynamicValues] = useState<Record<string, string | boolean | null>>({});
  const [prefilledMetadata, setPrefilledMetadata] = useState<Record<string, unknown>>({});
  const [showNewCategoryModal, setShowNewCategoryModal] = useState(false);
  const [showNewFieldModal, setShowNewFieldModal] = useState(false);
  const [newCategoryName, setNewCategoryName] = useState("");
  const [newCategoryFields, setNewCategoryFields] = useState<
    Array<{ id: string; name: string; type: CategoryColumn["type"]; notNull: boolean }>
  >([]);
  const [newCategoryError, setNewCategoryError] = useState<string | null>(null);
  const [newFieldName, setNewFieldName] = useState("");
  const [newFieldType, setNewFieldType] = useState<CategoryColumn["type"]>("TEXT");
  const [newFieldNotNull, setNewFieldNotNull] = useState(false);
  const [newFieldError, setNewFieldError] = useState<string | null>(null);

  const dynamicInitializedRef = useRef(false);
  const lastCategoryRef = useRef<string | null>(null);
  const [pendingPrefill, setPendingPrefill] = useState<PrefillPayload | null>(null);

  const resetFormState = useCallback(
    (templateList: CategoryTemplate[]) => {
      if (isEdit && item) {
        setName(item.item_name);
        setCategory(item.category.toLowerCase());
        setRarity(item.rarity ?? "");
        setImageUrl(item.image_url ?? "");
        setImageLocalPath(item.image_local_path ?? "");
        setDescription(item.description ?? "");
        setLevel(item.level !== null && item.level !== undefined ? String(item.level) : "");
        setWeight(item.weight !== null && item.weight !== undefined ? String(item.weight) : "");
        setSlots(item.slots !== null && item.slots !== undefined ? String(item.slots) : "");
        setSkill(item.skill ?? "");
        setServersCsv(serializeCsv(item.servers));
        setTagsCsv(serializeCsv(item.tags));
      } else {
        const defaultCategory = templateList[0]?.name ?? categories[0] ?? "";
        setName("");
        setCategory(defaultCategory.toLowerCase());
        setRarity("");
        setImageUrl("");
        setImageLocalPath("");
        setDescription("");
        setLevel("");
        setWeight("");
        setSlots("");
        setSkill("");
        setServersCsv("");
        setTagsCsv("");
      }
      setSubmitStatus(null);
      setAnalysis(null);
      setAnalysisError(null);
      setCategoryError(null);
      setNewCategoryError(null);
      setNewFieldError(null);
      setNewCategoryFields([]);
      dynamicInitializedRef.current = false;
      lastCategoryRef.current = null;
      setPrefilledMetadata({});
    },
    [isEdit, item, categories],
  );

  const fetchCategories = useCallback(async () => {
    setCategoryError(null);

    if (categoriesCache.data) {
      setCategoryTemplates(categoriesCache.data);
      resetFormState(categoriesCache.data);
      return;
    }

    if (categoriesCache.pending) {
      setCategoryLoading(true);
      try {
        const cached = await categoriesCache.pending;
        if (cached) {
          setCategoryTemplates(cached);
          resetFormState(cached);
        }
      } catch (error) {
        console.error(error);
        setCategoryError(error instanceof Error ? error.message : "Erro ao carregar categorias");
      } finally {
        setCategoryLoading(false);
      }
      return;
    }

    setCategoryLoading(true);
    const pendingPromise = (async () => {
      try {
        const response = await fetch("/api/admin/categories", { credentials: "include" });
        if (!response.ok) {
          throw new Error("Falha ao carregar categorias");
        }
        const data = await response.json();
        const templates = Array.isArray(data?.categories) ? data.categories : [];
        categoriesCache.data = templates;
        setCategoryTemplates(templates);
        resetFormState(templates);
        return templates;
      } catch (error) {
        console.error(error);
        setCategoryError(error instanceof Error ? error.message : "Erro ao carregar categorias");
        throw error;
      } finally {
        categoriesCache.pending = null;
        setCategoryLoading(false);
      }
    })();

    categoriesCache.pending = pendingPromise;
    await pendingPromise;
  }, [resetFormState]);

  useEffect(() => {
    if (!isActive) {
      resetFormState(categoryTemplates);
      return;
    }
    fetchCategories();
  }, [isActive, fetchCategories, categoryTemplates, resetFormState]);

  useEffect(() => {
    if (!isActive) {
      resetFormState(categoryTemplates);
      return;
    }
    if (categoryTemplates.length === 0) {
      resetFormState(categoryTemplates);
    }
  }, [isActive, categoryTemplates, resetFormState]);

  const getTemplateForCategory = useCallback(
    (categoryName: string | null | undefined) =>
      categoryTemplates.find((template) => template.name === (categoryName ?? "").toLowerCase()),
    [categoryTemplates],
  );

  const buildDynamicInitialValues = useCallback(
    (template: CategoryTemplate | undefined, metadata?: Record<string, unknown>) => {
      if (!template) return {} as Record<string, string | boolean | null>;
      const values: Record<string, string | boolean | null> = {};
      template.columns
        .filter((column) => !BASE_COLUMN_NAMES.includes(column.name) && column.editable !== false)
        .forEach((column) => {
          const sourceValue = metadata ? metadata[column.name] : undefined;
          if (sourceValue === undefined || sourceValue === null) {
            values[column.name] = column.type === "BOOLEAN" ? false : "";
            return;
          }
          if (column.type === "BOOLEAN") {
            values[column.name] = Boolean(Number(sourceValue));
          } else if (column.type === "INTEGER" || column.type === "REAL") {
            values[column.name] = String(sourceValue);
          } else {
            values[column.name] = String(sourceValue);
          }
        });
      return values;
    },
    [],
  );

  useEffect(() => {
    if (!isActive) return;
    const effectiveCategory = (
      category ||
      item?.category ||
      categoryTemplates[0]?.name ||
      ""
    ).toLowerCase();
    if (!effectiveCategory) return;

    const template = getTemplateForCategory(effectiveCategory);
    if (!template) return;

    if (!category) {
      setCategory(template.name);
    }

    const metadataSource = isEdit ? (item?.metadata as Record<string, unknown> | undefined) : undefined;

    if (!dynamicInitializedRef.current || lastCategoryRef.current !== template.name) {
      setDynamicValues(buildDynamicInitialValues(template, metadataSource));
      dynamicInitializedRef.current = true;
      lastCategoryRef.current = template.name;
    }
  }, [
    isActive,
    category,
    item,
    categoryTemplates,
    getTemplateForCategory,
    buildDynamicInitialValues,
    isEdit,
  ]);

  const handleAnalyze = async () => {
    if (!allowAiTools) return;
    if (!name.trim() || !description.trim()) {
      setAnalysisError("Informe nome e descrição para gerar o JSON.");
      return;
    }

    setAnalysisError(null);
    setAnalysis(null);
    setAnalysisLoading(true);
    try {
      const res = await fetch("/api/admin/items/analyze", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: name.trim(),
          description: description.trim(),
          scope: serverOptions.length > 0 ? "server" : "global",
          server: serverOptions[0] ?? null,
        }),
      });

      if (!res.ok) {
        throw new Error("Falha ao comunicar com o serviço de IA.");
      }

      const data = await res.json();
      setAnalysis(data.structure ?? null);
    } catch (error) {
      console.error(error);
      setAnalysisError(
        error instanceof Error ? error.message : "Erro desconhecido ao gerar JSON.",
      );
    } finally {
      setAnalysisLoading(false);
    }
  };

  const handleDynamicValueChange = useCallback(
    (column: CategoryColumn, value: string | boolean | null) => {
      setDynamicValues((prev) => ({
        ...prev,
        [column.name]: value,
      }));
    },
    [],
  );

  const handleCategoryChange = useCallback((value: string) => {
    dynamicInitializedRef.current = false;
    lastCategoryRef.current = null;
    setCategory(value.toLowerCase());
  }, []);

  const handleAddCategoryField = useCallback(() => {
    setNewCategoryFields((prev) => [
      ...prev,
      { id: generateTempId(), name: "", type: "TEXT", notNull: false },
    ]);
  }, []);

  const handleUpdateCategoryField = useCallback(
    (id: string, key: "name" | "type" | "notNull", value: string | boolean) => {
      setNewCategoryFields((prev) =>
        prev.map((field) =>
          field.id === id
            ? {
                ...field,
                [key]: key === "notNull" ? Boolean(value) : value,
              }
            : field,
        ),
      );
    },
    [],
  );

  const handleRemoveCategoryField = useCallback((id: string) => {
    setNewCategoryFields((prev) => prev.filter((field) => field.id !== id));
  }, []);

  const handleCreateCategory = useCallback(async () => {
    if (!newCategoryName.trim()) {
      setNewCategoryError("Informe o nome da categoria");
      return;
    }

    try {
      setNewCategoryError(null);
      const payload = {
        name: newCategoryName.trim().toLowerCase(),
        columns: newCategoryFields
          .filter((field) => field.name.trim())
          .map((field) => ({
            name: field.name.trim().toLowerCase(),
            type: field.type,
            notNull: field.notNull,
          })),
      };

      const res = await fetch("/api/admin/categories", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const error = await res.json().catch(() => null);
        throw new Error(error?.error || "Falha ao criar categoria");
      }

      categoriesCache.data = null;
      await fetchCategories();
      handleCategoryChange(payload.name);
      setShowNewCategoryModal(false);
      setNewCategoryFields([]);
    } catch (error) {
      console.error(error);
      setNewCategoryError(
        error instanceof Error ? error.message : "Erro ao criar categoria",
      );
    }
  }, [
    newCategoryName,
    newCategoryFields,
    fetchCategories,
    handleCategoryChange,
  ]);

  const handleAddFieldToCategory = useCallback(async () => {
    if (!category) {
      setNewFieldError("Selecione uma categoria");
      return;
    }
    if (!newFieldName.trim()) {
      setNewFieldError("Informe o nome do campo");
      return;
    }

    try {
      setNewFieldError(null);
      const payload = {
        name: newFieldName.trim().toLowerCase(),
        type: newFieldType,
        notNull: newFieldNotNull,
      };

      const res = await fetch(`/api/admin/categories/${category}/fields`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const error = await res.json().catch(() => null);
        throw new Error(error?.error || "Falha ao adicionar campo");
      }

      categoriesCache.data = null;
      await fetchCategories();
      dynamicInitializedRef.current = false;
      lastCategoryRef.current = null;
      setShowNewFieldModal(false);
    } catch (error) {
      console.error(error);
      setNewFieldError(
        error instanceof Error ? error.message : "Erro ao adicionar campo",
      );
    }
  }, [category, newFieldName, newFieldType, newFieldNotNull, fetchCategories]);

  const serverSuggestions = useMemo(() => {
    if (serverOptions.length === 0) return "";
    return serverOptions.join(", ");
  }, [serverOptions]);

  const activeTemplate = useMemo(() => getTemplateForCategory(category), [category, getTemplateForCategory]);

  const dynamicColumns = useMemo(
    () =>
      activeTemplate?.columns.filter(
        (column) => !BASE_COLUMN_NAMES.includes(column.name) && column.editable !== false,
      ) ?? [],
    [activeTemplate],
  );

  const submitLabel = isEdit ? "Salvar alterações" : "Criar item";

  const handlePrimarySubmit = useCallback(async () => {
    if (!name.trim()) {
      setSubmitStatus("Informe o nome do item.");
      return;
    }

    if (!category.trim()) {
      setSubmitStatus("Informe a categoria do item.");
      return;
    }

    setSubmitStatus(null);
    try {
      const metadataPayload: Record<string, unknown> = { ...prefilledMetadata };
      if (allowAiTools && analysis) {
        metadataPayload.aiStructure = analysis;
      }
      for (const [key, value] of Object.entries(dynamicValues)) {
        metadataPayload[key] = value;
      }

      await onSubmit({
        id: item?.item_id,
        name: name.trim(),
        category: category.trim().toLowerCase(),
        rarity: rarity.trim() || null,
        imageUrl: imageUrl.trim() || null,
        imageLocalPath: imageLocalPath.trim() || null,
        description: description.trim() || null,
        level: parseNumberInput(level),
        weight: parseNumberInput(weight),
        slots: parseNumberInput(slots),
        skill: skill.trim() || null,
        servers: parseCsv(serversCsv),
        tags: parseCsv(tagsCsv),
        metadata: metadataPayload,
        fields: dynamicValues,
      });

      setSubmitStatus(isEdit ? "Alterações salvas com sucesso." : "Item criado com sucesso.");
      onSuccess?.();

      if (!isEdit) {
        resetFormState(categoryTemplates);
      }
    } catch (error) {
      console.error(error);
      setSubmitStatus(error instanceof Error ? error.message : "Erro ao salvar. Tente novamente.");
    }
  }, [
    name,
    category,
    rarity,
    imageUrl,
    imageLocalPath,
    description,
    level,
    weight,
    slots,
    skill,
    serversCsv,
    tagsCsv,
    dynamicValues,
    allowAiTools,
    analysis,
    onSubmit,
    item,
    isEdit,
    onSuccess,
    categoryTemplates,
    resetFormState,
    prefilledMetadata,
  ]);

  const title = isEdit ? "Editar item" : "Novo item";
  const descriptionText = allowAiTools
    ? "Preencha os dados do item unificado. Utilize a IA para gerar um JSON de referência, se desejar."
    : "Preencha os dados do item unificado. Ajuste as sugestões geradas pela IA acima para concluir o cadastro.";

  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    void handlePrimarySubmit();
  };

  const formClassName = className ?? "flex h-full flex-col";
  const bodyClassName = contentClassName ?? "flex-1 min-h-0 overflow-y-auto px-6 py-4";

  const applyPrefill = useCallback(
    (prefill: PrefillPayload) => {
      if (prefill.name !== undefined) setName(prefill.name ?? "");
      if (prefill.description !== undefined) setDescription(prefill.description ?? "");
      if (prefill.rarity !== undefined) setRarity(prefill.rarity ?? "");
      if (prefill.imageUrl !== undefined) setImageUrl(prefill.imageUrl ?? "");
      if (prefill.imageLocalPath !== undefined) setImageLocalPath(prefill.imageLocalPath ?? "");
      if (prefill.level !== undefined) setLevel(prefill.level ? String(prefill.level) : "");
      if (prefill.weight !== undefined) setWeight(prefill.weight ? String(prefill.weight) : "");
      if (prefill.slots !== undefined) setSlots(prefill.slots ? String(prefill.slots) : "");
      if (prefill.skill !== undefined) setSkill(prefill.skill ?? "");

      if (prefill.servers !== undefined) {
        const serversValue = Array.isArray(prefill.servers) ? prefill.servers.join(", ") : prefill.servers ?? "";
        setServersCsv(serversValue);
      }

      if (prefill.tags !== undefined) {
        const tagsValue = Array.isArray(prefill.tags) ? prefill.tags.join(", ") : prefill.tags ?? "";
        setTagsCsv(tagsValue);
      }

      let targetCategory = category;
      const metadataCategory =
        typeof prefill.metadata?.category === "string" ? prefill.metadata.category.toLowerCase() : null;
      if (prefill.category) {
        targetCategory = prefill.category.toLowerCase();
        setCategory(targetCategory);
        dynamicInitializedRef.current = false;
        lastCategoryRef.current = null;
      } else if (metadataCategory) {
        targetCategory = metadataCategory;
        setCategory(targetCategory);
        dynamicInitializedRef.current = false;
        lastCategoryRef.current = null;
      }

      if (prefill.metadata && typeof prefill.metadata === "object") {
        setPrefilledMetadata(prefill.metadata);
        const template = getTemplateForCategory(targetCategory);
        if (template) {
          setDynamicValues(buildDynamicInitialValues(template, prefill.metadata));
        }
      }
    },
    [
      buildDynamicInitialValues,
      category,
      getTemplateForCategory,
    ],
  );

  useEffect(() => {
    if (prefillData) {
      setPendingPrefill(prefillData);
    }
  }, [prefillData]);

  useEffect(() => {
    if (!pendingPrefill) return;
    if (categoryTemplates.length === 0) return;
    applyPrefill(pendingPrefill);
    setPendingPrefill(null);
  }, [applyPrefill, pendingPrefill, categoryTemplates]);

  return (
    <>
      <form onSubmit={handleFormSubmit} className={formClassName}>
        {headerSlot?.({ title, description: descriptionText }) ??
          (
            <div className="shrink-0 px-6 pt-6">
              <h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2>
              <p className="text-sm text-muted-foreground">{descriptionText}</p>
            </div>
          )}

        <div className={bodyClassName}>
          <div className="grid min-w-0 gap-6 lg:grid-cols-[1.15fr,0.85fr]">
            <div className="space-y-4 min-w-0">
              <div className="space-y-2">
                <Label htmlFor="item-name">Nome</Label>
                <Input
                  id="item-name"
                  placeholder="Ex.: Final Fate"
                  value={name}
                  onChange={(event) => setName(event.target.value)}
                />
              </div>

              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>Categoria</Label>
                  <div className="flex flex-wrap items-center gap-2">
                    <Select
                      value={category}
                      onValueChange={handleCategoryChange}
                      disabled={categoryLoading || isEdit}
                    >
                      <SelectTrigger className="min-w-[200px]">
                        <SelectValue
                          placeholder={categoryLoading ? "Carregando..." : "Selecione a categoria"}
                        />
                      </SelectTrigger>
                      <SelectContent>
                        {categoryTemplates.map((template) => (
                          <SelectItem key={template.name} value={template.name}>
                            {template.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        setShowNewCategoryModal(true);
                        setNewCategoryError(null);
                        setNewCategoryName("");
                        setNewCategoryFields([]);
                      }}
                      disabled={categoryLoading}
                    >
                      Nova categoria
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        setShowNewFieldModal(true);
                        setNewFieldError(null);
                        setNewFieldName("");
                        setNewFieldType("TEXT");
                        setNewFieldNotNull(false);
                      }}
                      disabled={!category || categoryLoading}
                    >
                      + campo
                    </Button>
                  </div>
                  {categoryError && <p className="text-xs text-destructive">{categoryError}</p>}
                  {isEdit && (
                    <p className="text-xs text-muted-foreground">
                      A categoria existente do item não pode ser alterada neste fluxo.
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="item-rarity">Raridade</Label>
                  <Input
                    id="item-rarity"
                    placeholder="Ex.: legendary"
                    value={rarity}
                    onChange={(event) => setRarity(event.target.value)}
                  />
                </div>
              </div>

              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="item-image-url">Imagem (URL)</Label>
                  <Input
                    id="item-image-url"
                    placeholder="https://..."
                    value={imageUrl}
                    onChange={(event) => setImageUrl(event.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="item-image-local">Imagem local (caminho)</Label>
                  <Input
                    id="item-image-local"
                    placeholder="Opcional"
                    value={imageLocalPath}
                    onChange={(event) => setImageLocalPath(event.target.value)}
                  />
                </div>
              </div>

              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="item-level">Level requerido</Label>
                  <Input
                    id="item-level"
                    placeholder="Ex.: 250"
                    value={level}
                    onChange={(event) => setLevel(event.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="item-weight">Peso</Label>
                  <Input
                    id="item-weight"
                    placeholder="Ex.: 45"
                    value={weight}
                    onChange={(event) => setWeight(event.target.value)}
                  />
                </div>
              </div>

              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="item-slots">Slots</Label>
                  <Input
                    id="item-slots"
                    placeholder="Ex.: 2"
                    value={slots}
                    onChange={(event) => setSlots(event.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="item-skill">Skill requerido</Label>
                  <Input
                    id="item-skill"
                    placeholder="Ex.: Sword 115"
                    value={skill}
                    onChange={(event) => setSkill(event.target.value)}
                  />
                </div>
              </div>

              {dynamicColumns.length > 0 && (
                <div className="space-y-4">
                  <div>
                    <Label className="text-sm font-semibold">Campos específicos da categoria</Label>
                    <p className="text-xs text-muted-foreground">
                      Defina valores adicionais conforme o modelo da categoria selecionada.
                    </p>
                  </div>
                  <div className="grid gap-4 sm:grid-cols-2">
                    {dynamicColumns.map((column) => {
                      const value = dynamicValues[column.name];
                      if (column.type === "BOOLEAN") {
                        return (
                          <div key={column.name} className="flex items-center gap-2">
                            <Checkbox
                              id={`dynamic-${column.name}`}
                              checked={Boolean(value)}
                              onCheckedChange={(checked) =>
                                handleDynamicValueChange(column, checked === true)
                              }
                            />
                            <Label htmlFor={`dynamic-${column.name}`} className="capitalize">
                              {column.name.replace(/_/g, " ")}
                            </Label>
                          </div>
                        );
                      }

                      const inputType = column.type === "TEXT" ? "text" : "number";
                      const step = column.type === "REAL" ? "0.01" : "1";

                      return (
                        <div key={column.name} className="space-y-2">
                          <Label htmlFor={`dynamic-${column.name}`} className="capitalize">
                            {column.name.replace(/_/g, " ")}
                          </Label>
                          <Input
                            id={`dynamic-${column.name}`}
                            type={inputType}
                            step={column.type === "TEXT" ? undefined : step}
                            value={
                              typeof value === "string"
                                ? value
                                : value === null || value === undefined
                                  ? ""
                                  : String(value)
                            }
                            onChange={(event) =>
                              handleDynamicValueChange(column, event.target.value)
                            }
                          />
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              <div className="space-y-2">
                <Label htmlFor="item-servers">Servidores (separados por vírgula)</Label>
                <Input
                  id="item-servers"
                  placeholder="Ex.: Ferobra, Boneka"
                  value={serversCsv}
                  onChange={(event) => setServersCsv(event.target.value)}
                />
                {serverSuggestions && (
                  <p className="text-[11px] text-muted-foreground">
                    Sugestões cadastradas: {serverSuggestions}
                  </p>
                )}
              </div>

              <div className="space-y-2">
                <Label htmlFor="item-tags">Tags adicionais</Label>
                <Input
                  id="item-tags"
                  placeholder="Ex.: endgame, two-handed"
                  value={tagsCsv}
                  onChange={(event) => setTagsCsv(event.target.value)}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="item-description">Descrição detalhada</Label>
                <Textarea
                  id="item-description"
                  placeholder="Cole aqui a descrição oficial do item..."
                  rows={6}
                  value={description}
                  onChange={(event) => setDescription(event.target.value)}
                />
              </div>

              <div className="flex flex-wrap gap-2 pt-2">
                {allowAiTools && (
                  <Button type="button" variant="outline" onClick={handleAnalyze} disabled={analysisLoading}>
                    {analysisLoading ? "Analisando..." : "Analisar com IA"}
                  </Button>
                )}
                <Button type="submit" disabled={submitting}>
                  {submitting ? "Salvando..." : submitLabel}
                </Button>
              </div>

              {submitStatus && <p className="text-xs text-muted-foreground">{submitStatus}</p>}
            </div>

            <div className="space-y-4 min-w-0">
              {allowAiTools && (
                <Card className="min-w-0">
                  <CardHeader>
                    <CardTitle className="text-sm">Resultado da IA</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <p className="text-xs text-muted-foreground">
                      O serviço Gemini deve retornar exclusivamente um JSON válido que descreve a tabela destino e os campos correspondentes.
                    </p>
                    {analysisError && (
                      <div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive">
                        {analysisError}
                      </div>
                    )}
                    <div className="max-h-64 overflow-auto rounded-md border bg-muted/40 p-3 text-[11px]">
                      <pre className="whitespace-pre-wrap">
                        {analysis ? JSON.stringify(analysis, null, 2) : "// Aguarde a análise para visualizar o JSON"}
                      </pre>
                    </div>
                  </CardContent>
                </Card>
              )}

              <Card className="min-w-0">
                <CardHeader>
                  <CardTitle className="text-sm">Resumo</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2 text-xs text-muted-foreground">
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="outline" className="uppercase">
                      {category || "Categoria"}
                    </Badge>
                    {rarity && (
                      <Badge variant="outline" className="uppercase">
                        {rarity}
                      </Badge>
                    )}
                  </div>
                  <p>
                    Utilize os campos para definir servidores específicos. Todos os itens sem servidores marcados serão considerados globais.
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>

        {footerSlot?.({
          isEdit,
          submitting,
          submitLabel,
          onCancel,
          onSubmitClick: handlePrimarySubmit,
        }) ?? (
          <div className="flex items-center justify-end gap-2 px-6 pb-6">
            <Button type="button" variant="outline" onClick={onCancel} disabled={submitting}>
              Cancelar
            </Button>
            <Button type="submit" disabled={submitting}>
              {submitting ? "Salvando..." : submitLabel}
            </Button>
          </div>
        )}
      </form>

      <Dialog open={showNewCategoryModal} onOpenChange={setShowNewCategoryModal}>
        <DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Nova categoria</DialogTitle>
            <DialogDescription>
              Defina nome e campos adicionais para criar uma nova categoria de itens.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="new-category-name">Nome da categoria</Label>
              <Input
                id="new-category-name"
                placeholder="Ex.: vips"
                value={newCategoryName}
                onChange={(event) => setNewCategoryName(event.target.value)}
              />
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label>Campos iniciais (opcional)</Label>
                <Button type="button" variant="outline" size="sm" onClick={handleAddCategoryField}>
                  Adicionar campo
                </Button>
              </div>
              {newCategoryFields.length === 0 ? (
                <p className="text-xs text-muted-foreground">Nenhum campo adicional configurado.</p>
              ) : (
                <div className="space-y-3">
                  {newCategoryFields.map((field) => (
                    <div key={field.id} className="grid gap-2 rounded-md border p-3">
                      <div className="space-y-1">
                        <Label htmlFor={`field-name-${field.id}`}>Nome</Label>
                        <Input
                          id={`field-name-${field.id}`}
                          value={field.name}
                          onChange={(event) =>
                            handleUpdateCategoryField(field.id, "name", event.target.value)
                          }
                          placeholder="Ex.: bonus_magico"
                        />
                      </div>
                      <div className="grid grid-cols-2 gap-2">
                        <div className="space-y-1">
                          <Label>Tipo</Label>
                          <Select
                            value={field.type}
                            onValueChange={(value) =>
                              handleUpdateCategoryField(field.id, "type", value)
                            }
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Selecione o tipo" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="TEXT">Texto</SelectItem>
                              <SelectItem value="INTEGER">Inteiro</SelectItem>
                              <SelectItem value="REAL">Decimal</SelectItem>
                              <SelectItem value="BOOLEAN">Booleano</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="flex items-center gap-2">
                          <Checkbox
                            id={`field-required-${field.id}`}
                            checked={field.notNull}
                            onCheckedChange={(checked) =>
                              handleUpdateCategoryField(field.id, "notNull", checked === true)
                            }
                          />
                          <Label htmlFor={`field-required-${field.id}`}>Obrigatório</Label>
                        </div>
                      </div>
                      <div className="flex justify-end">
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => handleRemoveCategoryField(field.id)}
                        >
                          Remover
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            {newCategoryError && <p className="text-xs text-destructive">{newCategoryError}</p>}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowNewCategoryModal(false)}>
              Cancelar
            </Button>
            <Button onClick={handleCreateCategory}>Criar categoria</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={showNewFieldModal} onOpenChange={setShowNewFieldModal}>
        <DialogContent className="max-w-md max-h-[70vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Novo campo para categoria</DialogTitle>
            <DialogDescription>
              Adicione um novo campo à categoria selecionada. A alteração é permanente no schema.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>Categoria</Label>
              <Input value={category} readOnly className="bg-muted/40" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="new-field-name">Nome do campo</Label>
              <Input
                id="new-field-name"
                value={newFieldName}
                onChange={(event) => setNewFieldName(event.target.value)}
                placeholder="Ex.: bonus_magico"
              />
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div className="space-y-1">
                <Label>Tipo</Label>
                <Select
                  value={newFieldType}
                  onValueChange={(value) => setNewFieldType(value as CategoryColumn["type"])}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione o tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="TEXT">Texto</SelectItem>
                    <SelectItem value="INTEGER">Inteiro</SelectItem>
                    <SelectItem value="REAL">Decimal</SelectItem>
                    <SelectItem value="BOOLEAN">Booleano</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="new-field-required"
                  checked={newFieldNotNull}
                  onCheckedChange={(checked) => setNewFieldNotNull(checked === true)}
                />
                <Label htmlFor="new-field-required">Obrigatório</Label>
              </div>
            </div>
            {newFieldError && <p className="text-xs text-destructive">{newFieldError}</p>}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowNewFieldModal(false)}>
              Cancelar
            </Button>
            <Button onClick={handleAddFieldToCategory}>Adicionar campo</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}