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

/**
 * Variants of the `display` element type. Display elements render
 * content (read-only) — they don't bind to form data the way inputs do.
 */
export type DisplayStyle =
  | "type" // Plain typography. The default.
  | "markdown"
  | "html"
  | "iframe"
  | "image"
  | "video"
  | "banner"
  | "chart"
  | "carousel"
  | "barcode"
  | "qrcode"
  | "icon"
  | "progress-bar"
  | "sprite"
  | "reactive-canvas"

/**
 * Sub-style for the `type` display — picks a typographic role.
 * Lets the same renderer produce headings, paragraphs, captions, etc.
 */
export type DisplayContentType =
  | "heading-1"
  | "heading-2"
  | "heading-3"
  | "heading-4"
  | "heading-5"
  | "heading-6"
  | "paragraph"
  | "lead"
  | "small"
  | "caption"
  | "code"
  | "quote"

export interface DisplayElement extends BaseElement<`display.${DisplayStyle}`> {
  /**
   * Optional data-model key. When set, the value at that path overrides
   * `defaultValue` at render time (useful for binding display content to
   * a sibling field's value).
   */
  name?: string | null
  /**
   * Static content. Strings are treated as the raw display value; the
   * renderer interprets them according to `style` + `contentType`.
   */
  defaultValue?: string | number | null
  /** Sub-style for the `type` display. */
  contentType?: DisplayContentType
  /** For `image` / `video` / `iframe`: source URL. */
  src?: string
  /** For `image`: alt text. */
  alt?: string
  /** For `icon`: lucide icon name. */
  iconName?: string
  /** For `progress-bar`: 0–100 percentage. */
  progress?: number
  /** For `chart`: chart config payload. */
  chartConfig?: Record<string, unknown>
  /** For `carousel`: slide payload. */
  slides?: ReadonlyArray<Record<string, unknown>>
}

export const DisplayElementDefaults = {
  type: "display.type",
  contentType: "paragraph",
  defaultValue: "",
  name: null,
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
} as const satisfies Partial<DisplayElement>

export const DisplayElementMetadata = {
  icon: "type",
  displayLabel: "Display Content",
  elementCategory: "display",
  description:
    "Read-only content: typography, markdown, images, video, charts, barcodes, icons, and more.",
} as const satisfies ElementMetadata

export const DisplayElementEditConfig = {
  style: {
    type: "option-select.select",
    defaultValue: "type",
    label: "Display Style",
    columns: 12,
    selectOptions: [
      { label: "Typography", value: "type" },
      { label: "Markdown", value: "markdown" },
      { label: "HTML", value: "html" },
      { label: "Iframe", value: "iframe" },
      { label: "Image", value: "image" },
      { label: "Video", value: "video" },
      { label: "Banner", value: "banner" },
      { label: "Chart", value: "chart" },
      { label: "Carousel", value: "carousel" },
      { label: "Barcode", value: "barcode" },
      { label: "QR Code", value: "qrcode" },
      { label: "Icon", value: "icon" },
      { label: "Progress Bar", value: "progress-bar" },
      { label: "Sprite", value: "sprite" },
      { label: "Reactive Canvas", value: "reactive-canvas" },
    ],
    section: "layout",
  },
  contentType: {
    type: "option-select.select",
    defaultValue: "paragraph",
    label: "Content Type",
    columns: 12,
    selectOptions: [
      { label: "Heading 1", value: "heading-1" },
      { label: "Heading 2", value: "heading-2" },
      { label: "Heading 3", value: "heading-3" },
      { label: "Heading 4", value: "heading-4" },
      { label: "Heading 5", value: "heading-5" },
      { label: "Heading 6", value: "heading-6" },
      { label: "Paragraph", value: "paragraph" },
      { label: "Lead", value: "lead" },
      { label: "Small", value: "small" },
      { label: "Caption", value: "caption" },
      { label: "Code", value: "code" },
      { label: "Quote", value: "quote" },
    ],
    section: "layout",
    conditionParams: [{ name: "style", logic: "==", value: "type" }],
  },
  defaultValue: {
    type: "input.textarea",
    label: "Content",
    columns: 12,
    section: "configuration",
  },
  name: {
    type: "picker.data-model",
    label: "Data Source Name",
    columns: 12,
    section: "configuration",
  },
  src: {
    type: "input.text",
    label: "Source URL",
    columns: 12,
    section: "configuration",
    conditionParams: [
      { name: "style", logic: "in-array", value: ["image", "video", "iframe"] },
    ],
  },
  alt: {
    type: "input.text",
    label: "Alt Text",
    columns: 12,
    section: "configuration",
    conditionParams: [{ name: "style", logic: "==", value: "image" }],
  },
  iconName: {
    type: "picker.icon",
    label: "Icon",
    columns: 12,
    section: "configuration",
    conditionParams: [{ name: "style", logic: "==", value: "icon" }],
  },
} as const satisfies EditConfig

export const DisplayStyleMetadataMap: Partial<Record<DisplayStyle, { displayLabel: string; description: string }>> = {
  type: { displayLabel: "Typography", description: "Render styled text: headings, paragraphs, captions, quotes." },
  markdown: { displayLabel: "Markdown", description: "Render a Markdown string as formatted HTML." },
  html: { displayLabel: "HTML", description: "Render raw HTML content safely." },
  iframe: { displayLabel: "Iframe", description: "Embed an external page or document in an iframe." },
  image: { displayLabel: "Image", description: "Display an image from a URL or asset library." },
  video: { displayLabel: "Video", description: "Embed and play a video from a URL or asset." },
  banner: { displayLabel: "Banner", description: "A full-width banner with a background image and overlay text." },
  chart: { displayLabel: "Chart", description: "Render a Chart.js chart from a data config." },
  carousel: { displayLabel: "Carousel", description: "Display a scrollable slide carousel." },
  barcode: { displayLabel: "Barcode", description: "Render a 1D barcode from a string value." },
  qrcode: { displayLabel: "QR Code", description: "Render a QR code from a string value." },
  icon: { displayLabel: "Icon", description: "Display a single lucide icon with optional colour and size." },
  "progress-bar": { displayLabel: "Progress Bar", description: "A percentage-based progress bar." },
  sprite: { displayLabel: "Sprite", description: "Render an SVG sprite or icon sheet frame." },
  "reactive-canvas": { displayLabel: "Reactive Canvas", description: "A canvas that reactively renders positioned block elements." },
}
