/**
 * Archetype: comparisonGrid — 2×2 (or 2×3) grid of cards.
 *
 * Each cell is a self-contained block — eyebrow, big number-or-keyword,
 * body description. Used for feature comparisons, segment summaries,
 * "pros vs cons", quadrant analyses.
 *
 * Slots:
 *   title    (optional)
 *   subtitle (optional)
 *   cells    (required) array of 4 (2×2) or 6 (2×3):
 *            { eyebrow?, headline, body?, accent?: 'primary'|'accent'|'highlight' }
 *
 * The first text element in each cell wears the cell's accent colour
 * — letting the agent visually group/contrast cells without managing
 * raw hex values.
 */
import { applyChrome, placeText, rule } from './_helpers.js';
import { textStyle } from '../typography.js';
import { cardShape, shapeOpts } from '../shapes.js';

export const id = 'comparisonGrid';
export const slots = ['title', 'subtitle', 'cells'];

export default function render(slide, resolved, content, _pptx, ctx) {
  applyChrome(slide, resolved, { bgOverride: content.background, seed: 109, ctx });

  const { header, body, contentGutter } = resolved.spacing;
  const palette = resolved.palette;

  placeText(slide, resolved, 'title', content.title, {
    x: header.x, y: header.y, w: header.w, h: 0.8,
  }, { color: palette.text, align: 'left' });

  if (content.subtitle) {
    placeText(slide, resolved, 'subtitle', content.subtitle, {
      x: header.x, y: header.y + 0.85, w: header.w, h: 0.5,
    }, { color: palette.subtle, align: 'left' });
  }

  const cells = Array.isArray(content.cells) ? content.cells : [];
  if (cells.length === 0) return;

  // 4 cells → 2×2 grid. 6 cells → 2×3. Anything else falls into 2 cols.
  const cols = 2;
  const rows = Math.ceil(cells.length / cols);
  const gap = contentGutter;
  const cellW = (body.w - gap * (cols - 1)) / cols;
  const cellH = (body.h - gap * (rows - 1)) / rows;
  const pad = resolved.spacing.blockPadding;

  cells.forEach((c, i) => {
    const r = Math.floor(i / cols);
    const k = i % cols;
    const cx = body.x + k * (cellW + gap);
    const cy = body.y + r * (cellH + gap);

    // Card background.
    slide.addShape(cardShape(resolved.shape), {
      x: cx, y: cy, w: cellW, h: cellH,
      ...shapeOpts(resolved.shape, 'card', palette.surface),
    });

    const inner = { x: cx + pad, y: cy + pad, w: cellW - pad * 2, h: cellH - pad * 2 };
    let yCursor = inner.y;
    const accentColor = palette[c.accent] || palette.primary;

    if (c.eyebrow) {
      slide.addText(String(c.eyebrow).toUpperCase(), {
        x: inner.x, y: yCursor, w: inner.w, h: 0.3,
        ...textStyle(resolved.typography, 'eyebrow', {
          color: accentColor,
          align: 'left',
          bold: true,
          charSpacing: 2,
        }),
      });
      yCursor += 0.4;
    }

    // Headline — accent-coloured for visual punch.
    slide.addText(String(c.headline ?? ''), {
      x: inner.x, y: yCursor, w: inner.w, h: 0.9,
      ...textStyle(resolved.typography, 'title', {
        color: accentColor,
        align: 'left',
        fontSize: 32,
      }),
    });
    yCursor += 1.0;

    if (c.body) {
      slide.addText(String(c.body), {
        x: inner.x, y: yCursor, w: inner.w, h: inner.h - (yCursor - inner.y),
        ...textStyle(resolved.typography, 'body', {
          color: palette.text,
          align: 'left',
          valign: 'top',
        }),
      });
    }

    // Hairline at the bottom-left as a finish detail.
    if (resolved.shape.preset === 'sharp') {
      rule(slide, inner.x, cy + cellH - pad * 0.5, 0.4, accentColor, 1.2);
    }
  });
}
