import type {
  BaseElement,
  EditConfig,
  ElementMetadata,
} from "@/definitions/shared/base"

/**
 * Variants of the `builder` element type. Each value here maps 1:1 to a
 * Vue file (or folder) under `src/elements/builder/` via the engine's registry.
 *
 * Builders are inherently recursive — they author other elements/cards —
 * so the typed shape stays intentionally loose. Specific payloads are
 * narrowed inside each renderer.
 */
export type BuilderStyle =
  | "form-builder"
  | "object-builder"
  | "preset-builder"
  | "reactive-canvas-builder"
  | "element-list-builder"
  | "quiz-builder"
  | "dependency-list-builder"
  | "grid-builder"

export interface BuilderElement extends BaseElement<`builder.${BuilderStyle}`> {
  name?: string | null
  label?: string
  /**
   * Default payload for the builder. Builders accept arbitrary nested
   * shapes (form schemas, object trees, canvas docs) so this stays
   * intentionally loose. Concrete typing happens in each renderer.
   */
  defaultValue?: unknown
  /**
   * Element/card types to hide in the builder's palette. Mirrors the v2
   * platform's filter prop on FormBuilder.
   */
  hideElementTypes?: ReadonlyArray<string>
  hideCardTypes?: ReadonlyArray<string>
  /** Models the builder is allowed to author against (DependencyList, Quiz). */
  allowedModels?: ReadonlyArray<string>
  /** Hide the surrounding chrome when the builder is embedded in a card. */
  displayHeader?: boolean
  /** Route descriptor for asset lookups inside the builder. */
  assetSearchRoute?: Record<string, unknown>
  /** Route descriptor for asset uploads inside the builder. */
  assetUploadRoute?: Record<string, unknown>
  /** Arbitrary builder-specific config (canvas docs, grid templates, etc.). */
  builderConfig?: Record<string, unknown>
}

export const BuilderElementDefaults = {
  type: "builder.object-builder",
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
} as const satisfies Partial<BuilderElement>

export const BuilderElementMetadata = {
  icon: "puzzle",
  displayLabel: "Builder",
  elementCategory: "builder",
  description:
    "Add a builder to allow creating of forms, objects, reactive canvases, and more.",
} as const satisfies ElementMetadata

export const BuilderElementEditConfig = {
  label: {
    type: "input.text",
    defaultValue: "",
    label: "Label",
    columnsMd: 6,
    columns: 12,
    section: "configuration",
  },
  name: {
    type: "picker.data-model",
    defaultValue: "",
    label: "Name",
    columns: 12,
    section: "advanced",
  },
  style: {
    type: "option-select.select",
    defaultValue: "object-builder",
    label: "Builder Style",
    columns: 12,
    section: "layout",
    selectOptions: [
      { label: "Form Builder", value: "form-builder" },
      { label: "Object Builder", value: "object-builder" },
      { label: "Preset Builder", value: "preset-builder" },
      { label: "Reactive Canvas Builder", value: "reactive-canvas-builder" },
      { label: "Element List Builder", value: "element-list-builder" },
      { label: "Quiz Builder", value: "quiz-builder" },
      { label: "Dependency List Builder", value: "dependency-list-builder" },
      { label: "Grid Builder", value: "grid-builder" },
    ],
  },
  displayHeader: {
    type: "boolean.switch",
    label: "Show builder header",
    columns: 6,
    section: "layout",
  },
} as const satisfies EditConfig

export const BuilderStyleMetadataMap: Partial<Record<BuilderStyle, { displayLabel: string; description: string }>> = {
  "form-builder": { displayLabel: "Form Builder", description: "A visual builder for creating form element schemas." },
  "object-builder": { displayLabel: "Object Builder", description: "A builder for authoring typed key-value object schemas." },
  "preset-builder": { displayLabel: "Preset Builder", description: "A named preset wrapper around a form builder schema." },
  "reactive-canvas-builder": { displayLabel: "Reactive Canvas", description: "A builder for positioning elements on an absolute canvas." },
  "element-list-builder": { displayLabel: "Element List", description: "A builder for authoring a flat list of elements." },
  "quiz-builder": { displayLabel: "Quiz Builder", description: "A builder for creating quiz questions and answer options." },
  "dependency-list-builder": { displayLabel: "Dependency Rules", description: "A builder for conditional dependency rules between fields." },
  "grid-builder": { displayLabel: "Grid Builder", description: "A builder for arranging elements in a CSS grid layout." },
}
