// src/utils/pngLogo.ts

// Transparent PNG icon "stub" (replace with your AI image API later).
// Keeps canvas transparent; draws a simple glyph so you see the pipeline work.
export async function generateTransparentIconPNG(opts: {
  prompt: string;
  fg: string;         // foreground (usually textLight for contrast)
  accent?: string;    // optional accent color
  size?: number;      // square size
}): Promise<string> {
  const size = opts.size ?? 512;
  const c = document.createElement("canvas");
  c.width = size;
  c.height = size;
  const g = c.getContext("2d");
  if (!g) throw new Error("Canvas 2D not available");

  // Transparent background by default (no fill)
  g.clearRect(0, 0, size, size);

  // Simple geometric "mark" as a placeholder
  // Outer ring
  g.lineWidth = Math.max(8, size * 0.02);
  g.strokeStyle = opts.fg;
  g.beginPath();
  g.arc(size / 2, size / 2, size * 0.38, 0, Math.PI * 2);
  g.stroke();

  // Inner accent flame-ish triangle (just to imply 'generated art')
  if (opts.accent) {
    g.fillStyle = opts.accent;
    const r = size * 0.22;
    g.beginPath();
    g.moveTo(size / 2, size / 2 - r);
    g.lineTo(size / 2 + r * 0.86, size / 2 + r * 0.5);
    g.lineTo(size / 2 - r * 0.86, size / 2 + r * 0.5);
    g.closePath();
    g.fill();
  }

  // Tiny prompt watermark in meta-ish style (optional, commented out)
  // g.font = `${Math.round(size*0.04)}px Inter, Arial, sans-serif`;
  // g.fillStyle = opts.fg + "99";
  // g.textAlign = "center";
  // g.fillText("preview", size/2, size - size*0.05);

  return c.toDataURL("image/png");
}

// Compose icon + text into a single transparent PNG
export async function composeIconWithText(opts: {
  iconUrl: string;        // PNG (transparent)
  name: string;           // brand name
  fontFamily: string;     // CSS font-family string
  color: string;          // text color (Primary)
  layout?: "left" | "top"; // icon left of text, or above
  gap?: number;           // px gap between icon and text
  maxWidth?: number;
  maxHeight?: number;
}): Promise<string> {
  const layout = opts.layout ?? "left";
  const gap = opts.gap ?? 24;
  const maxW = opts.maxWidth ?? 1024;
  const maxH = opts.maxHeight ?? 512;

  // Load icon image
  const img = await new Promise<HTMLImageElement>((res, rej) => {
    const im = new Image();
    im.onload = () => res(im);
    im.onerror = rej;
    im.src = opts.iconUrl;
  });

  // Create canvas
  const c = document.createElement("canvas");
  c.width = maxW;
  c.height = maxH;
  const g = c.getContext("2d");
  if (!g) throw new Error("Canvas 2D not available");
  g.clearRect(0, 0, maxW, maxH);

  // Compute icon box
  const iconMax = layout === "left" ? Math.min(maxH * 0.8, 360) : Math.min(maxW * 0.4, 360);
  const iconW = iconMax;
  const iconH = iconMax;

  // Decide font size to fit remaining space
  const textAreaW = layout === "left" ? maxW - iconW - gap * 2 : maxW * 0.9;
  let fontSize = layout === "left" ? Math.min(140, Math.max(48, Math.floor(maxH * 0.35))) : Math.min(140, Math.max(48, Math.floor(maxH * 0.25)));
  g.fillStyle = opts.color;
  g.textBaseline = "middle";
  g.textAlign = "left";

  // Fit-to-width loop
  for (let tries = 0; tries < 12; tries++) {
    g.font = `700 ${fontSize}px ${opts.fontFamily}`;
    const width = g.measureText(opts.name).width;
    if (width <= textAreaW) break;
    fontSize -= 6;
  }

  // Draw
  if (layout === "left") {
    const cx = gap + iconW / 2;
    const cy = maxH / 2;
    g.drawImage(img, cx - iconW / 2, cy - iconH / 2, iconW, iconH);
    g.font = `700 ${fontSize}px ${opts.fontFamily}`;
    g.fillText(opts.name, gap + iconW + gap, cy + (fontSize * 0.06)); // slight optical adjustment
  } else {
    const cx = maxW / 2;
    const top = gap;
    g.drawImage(img, cx - iconW / 2, top, iconW, iconH);
    g.font = `700 ${fontSize}px ${opts.fontFamily}`;
    g.textAlign = "center";
    g.fillText(opts.name, cx, top + iconH + gap + fontSize * 0.85);
  }

  return c.toDataURL("image/png");
}
