// ─── Screenshot annotator ─────────────────────────────────────────────────────
// Adds meSEO watermark and brand mention highlight overlays to a screenshot.

import sharp from "sharp";

export async function annotateScreenshot(
  imageBuffer: Buffer,
  brandName: string,
  brandMentioned: boolean,
): Promise<Buffer> {
  const img = sharp(imageBuffer);
  const meta = await img.metadata();
  const { width = 1280, height = 800 } = meta;

  const overlays: Parameters<typeof img.composite>[0] = [];

  // Subtle bottom-right watermark badge
  const badgeW = 180;
  const badgeH = 28;
  const badgeSvg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="${badgeW}" height="${badgeH}">
      <rect width="${badgeW}" height="${badgeH}" rx="4" fill="rgba(15,23,42,0.85)"/>
      <text x="10" y="19" font-family="sans-serif" font-size="12" fill="#94A3B8">
        meSEO Verification
      </text>
    </svg>`;

  overlays.push({
    input: Buffer.from(badgeSvg),
    left: width - badgeW - 12,
    top: height - badgeH - 12,
  });

  // Green "mentioned" or red "not found" banner at top-right
  const bannerW = 200;
  const bannerH = 32;
  const bannerColor = brandMentioned ? "rgba(34,197,94,0.9)" : "rgba(239,68,68,0.85)";
  const bannerText = brandMentioned
    ? `✓ ${brandName} mentioned`
    : `✗ ${brandName} not found`;

  const bannerSvg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="${bannerW}" height="${bannerH}">
      <rect width="${bannerW}" height="${bannerH}" rx="4" fill="${bannerColor}"/>
      <text x="10" y="21" font-family="sans-serif" font-size="13" font-weight="bold" fill="white">
        ${escSvg(bannerText)}
      </text>
    </svg>`;

  overlays.push({
    input: Buffer.from(bannerSvg),
    left: width - bannerW - 12,
    top: 68,
  });

  return img.composite(overlays).png().toBuffer();
}

function escSvg(s: string): string {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
