const sharp = require("sharp");
const path = require("path");

const baselinePath = path.join(__dirname, "..", "tests", "figma-baselines", "alerts-baseline.png");

async function analyze() {
  const { data, info } = await sharp(baselinePath).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
  const { width, height } = info;

  function isFramePurple(r, g, b) { return b > 100 && r > 80 && g < 100; }
  function isWhite(r, g, b) { return r > 245 && g > 245 && b > 245; }
  function isBlackText(r, g, b) { return r < 60 && g < 60 && b < 60; }
  function isContent(r, g, b, a) { return a > 20 && !isFramePurple(r, g, b) && !isWhite(r, g, b); }

  // Find alert card blocks by rows with non-white content
  const rowHasContent = [];
  for (let y = 0; y < height; y++) {
    let has = false;
    for (let x = 0; x < width; x++) {
      const idx = (y * width + x) * 4;
      if (isContent(data[idx], data[idx+1], data[idx+2], data[idx+3])) { has = true; break; }
    }
    rowHasContent[y] = has;
  }

  const blocks = []; let start = null;
  for (let y = 0; y < height; y++) {
    if (rowHasContent[y] && start === null) start = y;
    if (!rowHasContent[y] && start !== null) { blocks.push({ start, end: y - 1, height: y - start }); start = null; }
  }
  if (start !== null) blocks.push({ start, end: height - 1, height: height - start });

  console.log("Image:", width, height);
  console.log("Content blocks:");
  blocks.forEach((b, i) => console.log(`  ${i}: y ${b.start}-${b.end}, h ${b.height}`));

  // For first alert card block, find left/right edges
  if (blocks.length > 0) {
    const b = blocks[0];
    const midY = Math.floor((b.start + b.end) / 2);
    let left = width, right = -1;
    for (let x = 0; x < width; x++) {
      const idx = (midY * width + x) * 4;
      if (isContent(data[idx], data[idx+1], data[idx+2], data[idx+3])) {
        left = Math.min(left, x); right = Math.max(right, x);
      }
    }
    console.log(`Block 0 midY ${midY}: left ${left}, right ${right}, width ${right - left + 1}`);

    // Sample colors at left, middle, right
    const sampleX = [left + 20, Math.floor((left + right) / 2), right - 20];
    for (const x of sampleX) {
      const idx = (midY * width + x) * 4;
      const hex = `#${[data[idx], data[idx+1], data[idx+2]].map(v => v.toString(16).padStart(2,"0")).join("")}`;
      console.log(`  Color at x ${x}: ${hex}`);
    }
  }
}

analyze().catch(console.error);