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

/**
 * Responsive grid breakpoints accepted by `breakpoints` and `cols`.
 * Matches the vue-grid-layout convention used by the v2 renderer.
 */
export type GridBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxs"

/**
 * A single item inside a `gridLayout`. `i` references the ID of the
 * nested card/element this slot renders.
 */
export interface GridItem {
  /** Column position. */
  x: number
  /** Row position. */
  y: number
  /** Column span. */
  w: number
  /** Row span. */
  h: number
  /** ID of the card/element this slot renders. */
  i: string
  /** Per-item display options. */
  options?: {
    displayBorder?: boolean
    [key: string]: unknown
  }
  minH?: number
  maxH?: number
  minW?: number
  maxW?: number
  /** When true, this item is locked and cannot be moved or resized. */
  static?: boolean
}

/**
 * The full layout map keyed by breakpoint. Each breakpoint owns its
 * own ordering so the grid can reflow on resize.
 */
export type GridLayout = {
  [key in GridBreakpoint]?: GridItem[]
}

/**
 * `grid-view` card — a responsive vue-grid-layout style grid of items.
 * Each `GridItem.i` references the ID of another card/element resolved
 * from the page's `cards` / `elements` maps and rendered with a
 * per-item template.
 */
export interface GridViewCard extends BaseCard<"grid-view"> {
  cardType: "grid-view"
  /** Per-breakpoint item layout map. */
  gridLayout?: GridLayout
  /** Auto-grow the container to fit its contents. */
  autoResizeHeight?: boolean
  /** Pixel height of a single grid row. */
  rowHeight?: number
  /** Horizontal and vertical gap between items, in pixels. */
  margin?: [number, number]
  /** Padding around the entire grid container, in pixels. */
  containerPadding?: [number, number]
  /** Enable drag-to-reorder. */
  isDraggable?: boolean
  /** Enable resize handles on each item. */
  isResizable?: boolean
  /** Breakpoint width thresholds in pixels. */
  breakpoints?: Partial<Record<GridBreakpoint, number>>
  /** Column count per breakpoint. */
  cols?: Partial<Record<GridBreakpoint, number>>
}

export const GridViewCardDefaults = {
  cardType: "grid-view",
  showCard: true,
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
  autoResizeHeight: true,
  rowHeight: 150,
  margin: [10, 10],
  containerPadding: [10, 10],
  isDraggable: false,
  isResizable: false,
  breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
  cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
  gridLayout: { xs: [] },
} as const satisfies Partial<GridViewCard>

export const GridViewCardMetadata = {
  icon: "grid",
  displayLabel: "Grid View",
  elementCategory: "display",
  description:
    "A grid view to display dashboard elements in a locking grid format.",
} as const satisfies ElementMetadata

export const GridViewCardEditConfig = {
  title: {
    type: "input.text",
    label: "Title",
    columns: 12,
    section: "configuration",
  },
  autoResizeHeight: {
    type: "boolean.switch",
    defaultValue: true,
    label: "Auto Resize Height",
    columns: 6,
    section: "layout",
  },
  rowHeight: {
    type: "input.text",
    contentType: "number",
    defaultValue: 150,
    label: "Row Height (px)",
    columns: 6,
    section: "layout",
  },
  isDraggable: {
    type: "boolean.switch",
    defaultValue: false,
    label: "Allow Drag to Reorder",
    columns: 6,
    section: "configuration",
  },
  isResizable: {
    type: "boolean.switch",
    defaultValue: false,
    label: "Allow Resize",
    columns: 6,
    section: "configuration",
  },
  showCard: {
    type: "boolean.switch",
    defaultValue: true,
    label: "Show Card Chrome",
    columns: 12,
    section: "layout",
  },
} as const satisfies EditConfig
