/**
 * Benchmark case definitions.
 *
 * Each case is a deterministic synthetic UI + an `intent` string +
 * the ground-truth target button id. The bench runs every adapter ×
 * every knob combo × every case (N trials) and aggregates.
 *
 * Add new cases here. The bench reflects them automatically.
 *
 * Design notes:
 *   - Cases are GRADED: easy (one big button), medium (a few buttons
 *     with a description hint), hard (dense grid + small target).
 *   - Colours are picked to be distinct so the model can ground by
 *     colour as well as position — separates "find object" failures
 *     from "ground coords" failures.
 *   - Positions are chosen to exercise corners, edges, centre, and
 *     to span both major axes.
 *
 * @typedef {import('./imageBuilder.js').ButtonSpec} ButtonSpec
 * @typedef {{
 *   id: string,
 *   description: string,
 *   width: number,
 *   height: number,
 *   buttons: ButtonSpec[],
 *   target_button_id: string,
 *   intent_template: (target: ButtonSpec) => string,
 *   difficulty: 'easy'|'medium'|'hard',
 * }} BenchCase
 */

// Standard resolutions worth measuring; named for reuse.
const RES = Object.freeze({
  HD_720P:  { width: 1280, height: 720 },
  FHD_1080P: { width: 1920, height: 1080 },
  SMALL:    { width:  400, height: 300 },
});

// Reusable colour palette. RGB triplets, distinct + reasonably accessible.
const COLOR = Object.freeze({
  BLUE:        [60, 130, 240],
  GREEN:       [60, 180,  90],
  RED:         [220, 60,  60],
  ORANGE:      [255, 140,  0],
  LIGHT_GRAY:  [230, 230, 230],
  DARK_GRAY:   [80,   80,  80],
  YELLOW:      [240, 200,  40],
  PURPLE:      [150, 80, 200],
});

/** @type {BenchCase[]} */
export const CASES = Object.freeze([

  // ─── Easy: small canvas, single big centered button ───────────────
  {
    id: 'easy-centered-button',
    description: 'Single red button in the centre of a 400x300 canvas',
    ...RES.SMALL,
    buttons: [
      { id: 'btn-go', rect: { x: 150, y: 125, width: 100, height: 50 }, color: COLOR.RED },
    ],
    target_button_id: 'btn-go',
    intent_template: () => 'Find the red button and respond with its pixel center as: x=<int>, y=<int>',
    difficulty: 'easy',
  },

  // ─── Medium: 720p dialog with 4 distinct-colour buttons + hint ────
  {
    id: 'medium-dialog-4-buttons',
    description: '720p dialog with 4 colour-distinct buttons; intent names the target by colour',
    ...RES.HD_720P,
    buttons: [
      { id: 'ok',      rect: { x: 560, y: 480, width: 160, height: 50 }, color: COLOR.BLUE },
      { id: 'cancel',  rect: { x: 380, y: 480, width: 160, height: 50 }, color: COLOR.LIGHT_GRAY },
      { id: 'save_as', rect: { x: 740, y: 480, width: 160, height: 50 }, color: COLOR.GREEN },
      { id: 'delete',  rect: { x: 1100, y:  50, width: 140, height: 40 }, color: COLOR.RED },
    ],
    target_button_id: 'delete',
    intent_template: (target) =>
      `There are 4 buttons (blue=OK, light-gray=Cancel, green=Save As, red=Delete). ` +
      `Click the ${target.id.toUpperCase()} button. Respond with its pixel center as: x=<int>, y=<int>`,
    difficulty: 'medium',
  },

  // ─── Hard: 1080p with a small button among many distractors ──────
  {
    id: 'hard-1080p-grid-distractor',
    description: '1080p with a 4x3 grid of distractor buttons and one small orange target in the bottom-right',
    ...RES.FHD_1080P,
    // 4x3 grid of alternating blue/light-gray buttons at the centre…
    buttons: [
      ...gridButtons({
        startX: 300, startY: 350,
        cols: 4, rows: 3,
        buttonWidth: 200, buttonHeight: 50,
        gapX: 50, gapY: 20,
        colors: [COLOR.BLUE, COLOR.LIGHT_GRAY],
      }),
      // …and one tiny orange target in the bottom-right.
      { id: 'submit', rect: { x: 1700, y: 980, width: 160, height: 40 }, color: COLOR.ORANGE },
    ],
    target_button_id: 'submit',
    intent_template: () =>
      'Find the small ORANGE button and respond with its pixel center as: x=<int>, y=<int>',
    difficulty: 'hard',
  },

  // ─── Hard: 1080p, corner buttons (test edge-of-screen grounding) ──
  {
    id: 'hard-1080p-corner-yellow',
    description: '1080p with one small yellow button in the top-left corner; otherwise empty',
    ...RES.FHD_1080P,
    buttons: [
      { id: 'home', rect: { x: 40, y: 40, width: 120, height: 40 }, color: COLOR.YELLOW },
      // Distractor far away so the model can't just "blob detect"
      { id: 'noise', rect: { x: 1700, y: 980, width: 100, height: 30 }, color: COLOR.DARK_GRAY },
    ],
    target_button_id: 'home',
    intent_template: () =>
      'Click the YELLOW button. Respond with its pixel center as: x=<int>, y=<int>',
    difficulty: 'hard',
  },

  // ─── Medium: 720p, position-only description (no colour hint) ────
  {
    id: 'medium-position-only',
    description: '720p with 3 buttons of the same colour; intent only describes position',
    ...RES.HD_720P,
    buttons: [
      { id: 'top',    rect: { x: 540, y:  60, width: 200, height: 60 }, color: COLOR.PURPLE },
      { id: 'middle', rect: { x: 540, y: 330, width: 200, height: 60 }, color: COLOR.PURPLE },
      { id: 'bottom', rect: { x: 540, y: 600, width: 200, height: 60 }, color: COLOR.PURPLE },
    ],
    target_button_id: 'middle',
    intent_template: () =>
      'There are three identical purple buttons stacked vertically (top, middle, bottom). ' +
      'Click the MIDDLE one. Respond with its pixel center as: x=<int>, y=<int>',
    difficulty: 'medium',
  },
]);

// ── helpers ─────────────────────────────────────────────────────────

/**
 * Generate a 2-D grid of distractor buttons. Used by hard cases.
 *
 * @param {Object} opts
 * @param {number} opts.startX, opts.startY
 * @param {number} opts.cols, opts.rows
 * @param {number} opts.buttonWidth, opts.buttonHeight
 * @param {number} opts.gapX, opts.gapY
 * @param {[number,number,number][]} opts.colors    - cycled
 * @returns {ButtonSpec[]}
 */
function gridButtons({ startX, startY, cols, rows, buttonWidth, buttonHeight, gapX, gapY, colors }) {
  /** @type {ButtonSpec[]} */
  const out = [];
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      out.push({
        id: `grid-${r}-${c}`,
        rect: {
          x: startX + c * (buttonWidth + gapX),
          y: startY + r * (buttonHeight + gapY),
          width:  buttonWidth,
          height: buttonHeight,
        },
        color: colors[(r + c) % colors.length],
      });
    }
  }
  return out;
}
