/**
 * Archetype: productHero — image-bottom + title-top (Apple WWDC style).
 *
 * The Apple keynote opener: title sits in the upper third, product
 * imagery bleeds the bottom two thirds. No frames, no shadows on the
 * hero shot. Single high-contrast text block.
 *
 * Slots:
 *   eyebrow    (optional)  small label above the title
 *   title      (required)  the headline — usually a short product name
 *   subtitle   (optional)  one-line supporting copy
 *   imagePath  | imageData (optional) hero image; falls back to a
 *                          tinted-accent panel when neither supplied
 *   imagePosition (optional) 'bottom' (default) | 'right' | 'left'
 */
import { applyChrome, eyebrow, placeText } from './_helpers.js';
import { textStyle } from '../typography.js';
import { SLIDE_DIMENSIONS } from '../grid.js';

export const id = 'productHero';
export const slots = ['eyebrow', 'title', 'subtitle', 'imagePath', 'imageData', 'imagePosition'];

export default function render(slide, resolved, content, _pptx, _ctx) {
  applyChrome(slide, resolved, { bgOverride: content.background || 'void', seed: 139, chrome: false });

  const { safe } = resolved.spacing;
  const palette = resolved.palette;
  const W = SLIDE_DIMENSIONS.width;
  const H = SLIDE_DIMENSIONS.height;
  const hasImage = !!(content.imagePath || content.imageData);
  const position = content.imagePosition || 'bottom';

  // Image region (or fallback accent panel) — pre-paint it so text
  // lands on top of any soft edges.
  let textRegion;
  if (position === 'right') {
    const imageRegion = { x: W * 0.5, y: 0, w: W * 0.5, h: H };
    textRegion = { x: safe.x, y: safe.y, w: W * 0.5 - safe.x - 0.3, h: safe.h };
    drawImageOrPanel(slide, content, palette, imageRegion);
  } else if (position === 'left') {
    const imageRegion = { x: 0, y: 0, w: W * 0.5, h: H };
    textRegion = { x: W * 0.5 + 0.3, y: safe.y, w: W * 0.5 - safe.x - 0.3, h: safe.h };
    drawImageOrPanel(slide, content, palette, imageRegion);
  } else {
    // bottom (default) — Apple keynote layout
    const imageRegion = { x: 0, y: H * 0.42, w: W, h: H * 0.58 };
    textRegion = { x: safe.x, y: safe.y + 0.3, w: safe.w, h: H * 0.4 };
    drawImageOrPanel(slide, content, palette, imageRegion);
  }

  // Eyebrow + title + subtitle stack in the text region.
  let yCursor = textRegion.y;
  if (content.eyebrow) {
    eyebrow(slide, resolved, content.eyebrow, {
      x: textRegion.x, y: yCursor, w: textRegion.w * 0.7, color: palette.accent,
    });
    yCursor += 0.45;
  }
  slide.addText(String(content.title ?? ''), {
    x: textRegion.x, y: yCursor, w: textRegion.w * 0.9, h: position === 'bottom' ? 1.8 : 3,
    ...textStyle(resolved.typography, 'display', {
      color: palette.ink,
      align: 'left',
      valign: 'top',
      fit: 'shrink',
    }),
  });
  if (content.subtitle) {
    const subY = position === 'bottom' ? yCursor + 1.9 : yCursor + 3.1;
    placeText(slide, resolved, 'subtitle', content.subtitle, {
      x: textRegion.x, y: subY, w: textRegion.w * 0.85, h: 1.0,
    }, { color: palette.subtle, align: 'left' });
  }
}

function drawImageOrPanel(slide, content, palette, region) {
  if (content.imagePath || content.imageData) {
    const opts = {
      x: region.x, y: region.y, w: region.w, h: region.h,
      sizing: { type: 'cover', w: region.w, h: region.h },
    };
    if (content.imagePath) opts.path = content.imagePath;
    if (content.imageData) opts.data = content.imageData;
    slide.addImage(opts);
  } else {
    // Fallback: tinted accent panel so the slide still has visual
    // weight when the agent hasn't supplied an image yet.
    slide.addShape('rect', {
      x: region.x, y: region.y, w: region.w, h: region.h,
      fill: { color: palette.primary, transparency: 0 },
      line: { type: 'none' },
    });
  }
}
