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

/**
 * Variants of the `code` element type. Each value here maps 1:1 to a
 * Vue file under `src/elements/code/` via the engine's registry.
 *
 * The v2 portal does not ship a `Definitions/CardElements/CodeElement.ts`
 * — these styles are inferred from `Mod/v2/CardElements/Code/*.vue`
 * (GitCodeEditor, FileTree, PullRequestsList, BuildStatus, ChatMessage).
 */
export type CodeStyle =
  | "git-editor"
  | "file-tree"
  | "pull-requests-list"
  | "build-status"
  | "chat-message"

export interface CodeElement extends BaseElement<`code.${CodeStyle}`> {
  name?: string | null
  label?: string
  /** Plugin / project context used by every code variant. */
  pluginPageId?: number | string
  teamSlug?: string
  /** Git branch context (git-editor, pull-requests-list, build-status). */
  branch?: string
  /** Repository slug (`owner/repo`). */
  repository?: string
  /** For `file-tree`: starting path within the repo. */
  rootPath?: string
  /** For `chat-message`: the message payload to render. */
  message?: Record<string, unknown>
  /** For `build-status`: build / job identifier. */
  buildId?: string | number
  /** Optional fixed height (CSS length). */
  height?: string
}

export const CodeElementDefaults = {
  type: "code.git-editor",
  height: "60vh",
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
} as const satisfies Partial<CodeElement>

export const CodeElementMetadata = {
  icon: "code",
  displayLabel: "Code",
  elementCategory: "code",
  description:
    "Developer-oriented blocks: git editor, file tree, pull requests, build status, and chat messages.",
} as const satisfies ElementMetadata

export const CodeElementEditConfig = {
  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: "git-editor",
    label: "Code Block Style",
    columns: 12,
    section: "layout",
    selectOptions: [
      { label: "Git Editor", value: "git-editor" },
      { label: "File Tree", value: "file-tree" },
      { label: "Pull Requests List", value: "pull-requests-list" },
      { label: "Build Status", value: "build-status" },
      { label: "Chat Message", value: "chat-message" },
    ],
  },
  pluginPageId: {
    type: "input.text",
    contentType: "integer",
    label: "Plugin Page ID",
    columns: 6,
    section: "configuration",
  },
  teamSlug: {
    type: "input.text",
    label: "Team Slug",
    columns: 6,
    section: "configuration",
  },
  repository: {
    type: "input.text",
    label: "Repository",
    columns: 6,
    section: "configuration",
    conditionParams: [
      {
        name: "style",
        logic: "in-array",
        value: [
          "git-editor",
          "file-tree",
          "pull-requests-list",
          "build-status",
        ],
      },
    ],
  },
  branch: {
    type: "input.text",
    label: "Branch",
    columns: 6,
    section: "configuration",
    conditionParams: [
      {
        name: "style",
        logic: "in-array",
        value: ["git-editor", "pull-requests-list", "build-status"],
      },
    ],
  },
  rootPath: {
    type: "input.text",
    label: "Root Path",
    columns: 6,
    section: "configuration",
    conditionParams: [{ name: "style", logic: "==", value: "file-tree" }],
  },
  buildId: {
    type: "input.text",
    label: "Build ID",
    columns: 6,
    section: "configuration",
    conditionParams: [{ name: "style", logic: "==", value: "build-status" }],
  },
  height: {
    type: "input.text",
    label: "Height",
    defaultValue: "60vh",
    columns: 6,
    section: "layout",
  },
} as const satisfies EditConfig

export const CodeStyleMetadataMap: Partial<Record<CodeStyle, { displayLabel: string; description: string }>> = {
  "git-editor": { displayLabel: "Git Editor", description: "Browse and edit files in a connected git repository." },
  "file-tree": { displayLabel: "File Tree", description: "Display a navigable file tree for a repository." },
  "pull-requests-list": { displayLabel: "Pull Requests", description: "List pull requests for a connected repository." },
  "build-status": { displayLabel: "Build Status", description: "Show CI/CD build status for a branch or commit." },
  "chat-message": { displayLabel: "Chat Message", description: "Render a chat message bubble with author and content." },
}
