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

/**
 * Key/value pair rendered inside an InfoCard. The `value` accepts a
 * dot-path into the data model that the renderer resolves at runtime.
 */
export interface InfoCardField {
  /** Display label. */
  label?: string
  /** Dot-path into the data model. e.g. `"user.email"`. */
  value: string
  /** Optional icon shown next to the label. */
  icon?: string
  /**
   * Format hint applied to the resolved value (e.g. `"timestamp"`,
   * `"currency"`). Functions are not JSON-serialisable, so the renderer
   * resolves named formats via a registry.
   */
  format?: string
  /** Text prepended to the rendered value. */
  prepend?: string
  /** Text appended to the rendered value. */
  append?: string
  /** Extra classes applied to the value cell. */
  classList?: string[] | string
}

/**
 * `info-card` card — a display-only summary card. Renders a title /
 * subtitle / image header plus an optional list of `fields`
 * (label + value pairs). Common usage is dashboard tiles and detail
 * panels.
 */
export interface InfoCard extends BaseCard<"info-card"> {
  cardType: "info-card"
  /** Heading text rendered above the body. */
  title?: string
  /** Sub-heading text rendered under the title. */
  subtitle?: string
  /** Header icon. */
  icon?: string
  /** Themed colour for the header icon. */
  iconColor?: string
  /** Path or URL of a header image. */
  headerImage?: string
  /** Fallback image if `headerImage` resolves empty. */
  defaultHeaderImage?: string
  /** Aspect ratio for the header image (e.g. `"16/9"`). */
  headerRatio?: string
  /** Key/value pairs rendered as the card body. */
  fields?: InfoCardField[]
  /** Extra classes applied to the card body. */
  bodyClassList?: string[] | string
  /** Reduce vertical padding inside the card. */
  lessPadding?: boolean
}

export const InfoCardDefaults = {
  cardType: "info-card",
  showCard: true,
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
  fields: [],
  lessPadding: false,
} as const satisfies Partial<InfoCard>

export const InfoCardMetadata = {
  icon: "image",
  displayLabel: "Info Card",
  elementCategory: "display",
  description: "A fully customizable card to display information.",
} as const satisfies ElementMetadata

export const InfoCardEditConfig = {
  title: {
    type: "input.text",
    label: "Title",
    columns: 12,
    section: "configuration",
  },
  subtitle: {
    type: "input.text",
    label: "Subtitle",
    columns: 12,
    section: "configuration",
  },
  icon: {
    type: "picker.icon",
    label: "Header Icon",
    columns: 6,
    section: "configuration",
  },
  iconColor: {
    type: "input.text",
    label: "Icon Color",
    columns: 6,
    section: "configuration",
  },
  headerImage: {
    type: "file.asset-picker",
    label: "Header Image",
    columns: 12,
    section: "configuration",
    acceptedFileTypes: [".jpg", ".jpeg", ".png", ".gif", ".svg", ".webp"],
  },
  headerRatio: {
    type: "input.text",
    label: "Header Image Aspect Ratio",
    columns: 6,
    section: "layout",
  },
  lessPadding: {
    type: "boolean.switch",
    label: "Reduce Padding",
    columns: 6,
    section: "layout",
  },
  showCard: {
    type: "boolean.switch",
    defaultValue: true,
    label: "Show Card Chrome",
    columns: 12,
    section: "layout",
  },
  fields: {
    type: "configuration-block.repeatable",
    label: "Display Fields",
    columns: 12,
    section: "configuration",
    defaultValue: [],
    name: "fields",
    optionLabelFields: ["label", "value"],
    selectOptions: [
      {
        label: "Label",
        name: "label",
        type: "input.text",
        columns: 6,
      },
      {
        label: "Value (data path)",
        name: "value",
        type: "input.text",
        columns: 6,
      },
      {
        label: "Icon",
        name: "icon",
        type: "picker.icon",
        columns: 4,
      },
      {
        label: "Format",
        name: "format",
        type: "input.text",
        columns: 4,
      },
      {
        label: "Prepend",
        name: "prepend",
        type: "input.text",
        columns: 4,
      },
      {
        label: "Append",
        name: "append",
        type: "input.text",
        columns: 4,
      },
    ],
  },
} as const satisfies EditConfig
