/**
 * Archetype: statCallout — one huge number, one label, optional footnote.
 *
 * Slots:
 *   - eyebrow  (optional) small label above the stat
 *   - stat     (required) the headline number, e.g. "47%" or "$12.4M"
 *   - label    (required) what the number means
 *   - footnote (optional) source / methodology
 *
 * tech-bold wraps the stat in a `surface` card with shadow; editorial
 * and data-heavy leave it on the bg with a hairline rule beneath.
 */
import { applyChrome, callout, eyebrow, rule, placeText } from './_helpers.js';
import { textStyle } from '../typography.js';

export const id = 'statCallout';
export const slots = ['eyebrow', 'stat', 'label', 'footnote'];

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

  const cfg = resolved.archetypeConfig('statCallout');
  const { safe } = resolved.spacing;

  // Centered card-or-bare composition.
  const cardW = safe.w * 0.78;
  const cardH = safe.h * 0.62;
  const cardX = safe.x + (safe.w - cardW) / 2;
  const cardY = safe.y + (safe.h - cardH) / 2;

  if (cfg.cardBackground === 'surface') {
    callout(slide, resolved, { x: cardX, y: cardY, w: cardW, h: cardH }, resolved.palette.surface);
  }

  const innerPad = resolved.spacing.blockPadding;
  const inner = {
    x: cardX + innerPad,
    y: cardY + innerPad,
    w: cardW - innerPad * 2,
    h: cardH - innerPad * 2,
  };

  let cursorY = inner.y;

  if (content.eyebrow) {
    eyebrow(slide, resolved, content.eyebrow, {
      x: inner.x, y: cursorY, w: inner.w,
      color: cfg.eyebrowOnAccent ? resolved.palette.accent : resolved.palette.primary,
    });
    cursorY += 0.4;
  }

  // The stat — fills most of the vertical space.
  const statH = inner.h * 0.55;
  slide.addText(String(content.stat ?? ''), {
    x: inner.x, y: cursorY, w: inner.w, h: statH,
    ...textStyle(resolved.typography, 'stat', {
      color: resolved.palette[cfg.statColor || 'primary'] || resolved.palette.primary,
      align: 'left',
      valign: 'middle',
      fit: 'shrink',
    }),
  });

  cursorY += statH + 0.1;

  // Label.
  if (content.label) {
    const labelRole = cfg.labelStyle === 'mono' ? 'mono'
                    : cfg.labelStyle === 'eyebrow' ? 'eyebrow'
                    : 'subtitle';
    placeText(slide, resolved, labelRole, content.label, {
      x: inner.x, y: cursorY, w: inner.w, h: 0.6,
    }, { color: resolved.palette.text, align: 'left' });
  }

  // Footnote (optional source).
  if (content.footnote) {
    rule(slide, inner.x, inner.y + inner.h - 0.45, 0.4, resolved.palette.subtle, 0.5);
    placeText(slide, resolved, 'caption', content.footnote, {
      x: inner.x, y: inner.y + inner.h - 0.35, w: inner.w, h: 0.3,
    }, { color: resolved.palette.subtle, align: 'left' });
  }
}
