/**
 * Visual Annotation — Side-by-Side Comparison Builder
 * ──────────────────────────────────────────────────────
 * Composites brand and competitor screenshots into a side-by-side comparison image
 * with numbered difference callouts.
 *
 * Internal module — vendor names permitted in code; forbidden in user-facing output.
 */

import type { VisualComparisonDifference } from "../audit/types";

const SIDE_WIDTH = 600;
const LABEL_H = 36;

export async function buildSideBySideComparison(
  brandBuffer: Buffer,
  competitorBuffer: Buffer,
  brandLabel: string,
  competitorLabel: string,
  differences: VisualComparisonDifference[],
): Promise<Buffer> {
  const { createCanvas, loadImage } = await import("@napi-rs/canvas");

  const [brandImg, compImg] = await Promise.all([
    loadImage(brandBuffer),
    loadImage(competitorBuffer),
  ]);

  const targetH = Math.max(brandImg.height, compImg.height, 400);
  const totalW = SIDE_WIDTH * 2 + 4; // 4px divider
  const totalH = LABEL_H + targetH;

  const canvas = createCanvas(totalW, totalH);
  const ctx = canvas.getContext("2d");

  // Background
  ctx.fillStyle = "#f8fafc";
  ctx.fillRect(0, 0, totalW, totalH);

  // Label bar
  ctx.fillStyle = "#1e293b";
  ctx.fillRect(0, 0, totalW, LABEL_H);
  ctx.fillStyle = "#ffffff";
  ctx.font = "bold 13px sans-serif";
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  ctx.fillText(brandLabel.slice(0, 30), SIDE_WIDTH / 2, LABEL_H / 2);
  ctx.fillText(competitorLabel.slice(0, 30), SIDE_WIDTH + 4 + SIDE_WIDTH / 2, LABEL_H / 2);

  // Divider
  ctx.fillStyle = "#94a3b8";
  ctx.fillRect(SIDE_WIDTH, LABEL_H, 4, targetH);

  // Draw brand screenshot scaled to SIDE_WIDTH
  const brandScale = SIDE_WIDTH / brandImg.width;
  ctx.drawImage(brandImg, 0, LABEL_H, SIDE_WIDTH, brandImg.height * brandScale);

  // Draw competitor screenshot scaled to SIDE_WIDTH
  const compScale = SIDE_WIDTH / compImg.width;
  ctx.drawImage(compImg, SIDE_WIDTH + 4, LABEL_H, SIDE_WIDTH, compImg.height * compScale);

  // Difference callout badges across top of each side
  const impactColors: Record<VisualComparisonDifference["impact"], string> = {
    critical: "#DC2626",
    high: "#EA580C",
    moderate: "#D97706",
    low: "#6B7280",
  };

  for (const diff of differences.slice(0, 6)) {
    const color = impactColors[diff.impact];
    const badgeR = 11;
    const bx = 20 + (diff.number - 1) * 28 + badgeR;
    const by = LABEL_H + 20 + badgeR;

    // Brand side badge
    ctx.beginPath();
    ctx.arc(bx, by, badgeR, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.fillStyle = "#ffffff";
    ctx.font = "bold 10px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(String(diff.number), bx, by);

    // Competitor side badge (right panel)
    const cbx = SIDE_WIDTH + 4 + 20 + (diff.number - 1) * 28 + badgeR;
    ctx.beginPath();
    ctx.arc(cbx, by, badgeR, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.fillStyle = "#ffffff";
    ctx.font = "bold 10px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(String(diff.number), cbx, by);
  }

  return canvas.toBuffer("image/png") as unknown as Buffer;
}
