"use strict";
/**
 * Generates /public/icons/chat-icon-192.png, chat-icon-512.png,
 * chat-maskable-512.png from inline SVG sources. Also derives the
 * 180x180 apple-touch-icon variants for the chat route
 * (src/app/dashboard/chat/apple-icon.png) and the dashboard root
 * (src/app/apple-icon.png, derived from the existing dashboard icon).
 *
 * Run with `node scripts/build-icons.mjs`. Requires `sharp`
 * (a transitive Next.js dependency, already pulled in by next-pwa).
 *
 * The SVG embeds the Inter font via base64 so the wordmark is identical
 * on every machine regardless of which fonts are installed. If no font
 * can be loaded, the SVG's font-family CSS stack
 * (Inter, system-ui, sans-serif) handles the fallback.
 */
import { promises as fs } from "node:fs";
import path from "node:path";
import sharp from "sharp";

const ROOT = path.resolve(process.cwd());

const palette = {
  orange: "#fdb13c",
  black: "#0f172a",
};

async function loadFontBase64() {
  // Check for a local font file first (committed to the repo so Docker
  // builds work offline). Mirrors build-og-image.mjs; returns "" if no
  // font can be loaded, in which case the SVG's font-family CSS stack
  // (Inter, system-ui, sans-serif) handles the fallback.
  const localPath = path.join(ROOT, "public/fonts/inter-800.woff");
  try {
    const buffer = await fs.readFile(localPath);
    return buffer.toString("base64");
  } catch {
    const url =
      "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZtrib2Ai-4.woff";
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(`Failed to fetch Inter: ${res.status}`);
      const buffer = Buffer.from(await res.arrayBuffer());
      return buffer.toString("base64");
    } catch (err) {
      console.warn(`Inter font unavailable — using system sans-serif (${err.message})`);
      return "";
    }
  }
}

const fontB64 = await loadFontBase64();

// Non-maskable chat icon (192 and 512). Transparent background.
// Layout: orange chat bubble + tail nub bottom-left, black cube mark
// inside the bubble, "ASK" wordmark underneath.
function chatSvg(size, fontPx) {
  // Bubble geometry, expressed in a 512-coord canvas then scaled to `size`.
  const bubbleX = 76;       // bubble left
  const bubbleY = 70;       // bubble top
  const bubbleW = 360;      // bubble width
  const bubbleH = 300;      // bubble height
  const bubbleR = 48;       // bubble corner radius
  const tailW = 56;         // tail width at top
  const tailH = 64;         // tail length downward
  const tailOffsetX = bubbleX + 70; // tail start x (toward left side)

  // Cube mark geometry — same brand DNA as dashboard icon.
  const cubeX = 256 - 60;   // centred horizontally (cube is 120 wide)
  const cubeY = 200;        // inside the bubble
  const cubeSize = 120;

  // Wordmark geometry.
  const wordY = 420;

  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 512 512">
    <defs>
      <style type="text/css">
        @font-face {
          font-family: 'Inter';
          font-style: normal;
          font-weight: 800;
          src: url(data:font/woff;base64,${fontB64}) format('woff');
        }
      </style>
    </defs>

    <!-- Chat bubble body -->
    <rect x="${bubbleX}" y="${bubbleY}" width="${bubbleW}" height="${bubbleH}" rx="${bubbleR}" fill="${palette.orange}"/>

    <!-- Chat bubble tail (bottom-left) -->
    <path d="M ${tailOffsetX} ${bubbleY + bubbleH} L ${tailOffsetX + tailW / 2} ${bubbleY + bubbleH + tailH} L ${tailOffsetX + tailW} ${bubbleY + bubbleH} Z" fill="${palette.orange}"/>

    <!-- Cube mark (dashboard DNA) inside the bubble -->
    <g transform="translate(${cubeX}, ${cubeY})">
      <rect x="0" y="0" width="${cubeSize}" height="${cubeSize}" rx="20" fill="${palette.black}"/>
      <rect x="12" y="12" width="${cubeSize - 24}" height="${cubeSize - 24}" rx="14" fill="${palette.orange}"/>
      <path d="M ${cubeSize / 2} 28 L ${cubeSize - 32} ${cubeSize / 2} L ${cubeSize / 2} ${cubeSize - 28} L 32 ${cubeSize / 2} Z" fill="${palette.black}"/>
      <circle cx="${cubeSize / 2}" cy="${cubeSize / 2}" r="11" fill="${palette.orange}"/>
    </g>

    <!-- Wordmark -->
    <text x="256" y="${wordY}" font-family="Inter, system-ui, sans-serif" font-size="${fontPx}" font-weight="800" letter-spacing="6" text-anchor="middle" fill="${palette.black}">ASK</text>
  </svg>`;
}

// Maskable variant — orange fills the whole canvas (so OS cropping still
// shows orange). All meaningful content lives inside the centre ~40%
// safe-zone, which means a 205x205 region centred on a 512 canvas.
function chatMaskableSvg(size, fontPx) {
  // Scale everything to fit inside ~205x205 centred region.
  const scale = 205 / 512;
  const offset = (512 - 205) / 2; // centre the safe-zone

  // Bubble (scaled to ~120x100)
  const bubbleX = offset + 30;
  const bubbleY = offset + 24;
  const bubbleW = 145;
  const bubbleH = 120;
  const bubbleR = 19;
  const tailW = 22;
  const tailH = 26;
  const tailOffsetX = bubbleX + 28;

  // Cube mark inside the bubble (scaled to ~48)
  const cubeX = bubbleX + (bubbleW - 48) / 2;
  const cubeY = bubbleY + (bubbleH - 48) / 2;
  const cubeSize = 48;

  // Wordmark below the bubble.
  const wordY = offset + 175;

  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 512 512">
    <defs>
      <style type="text/css">
        @font-face {
          font-family: 'Inter';
          font-style: normal;
          font-weight: 800;
          src: url(data:font/woff;base64,${fontB64}) format('woff');
        }
      </style>
    </defs>

    <!-- Full-bleed orange background (OS-safe) -->
    <rect width="512" height="512" fill="${palette.orange}"/>

    <!-- Chat bubble (smaller, centred) -->
    <rect x="${bubbleX}" y="${bubbleY}" width="${bubbleW}" height="${bubbleH}" rx="${bubbleR}" fill="${palette.black}"/>
    <path d="M ${tailOffsetX} ${bubbleY + bubbleH} L ${tailOffsetX + tailW / 2} ${bubbleY + bubbleH + tailH} L ${tailOffsetX + tailW} ${bubbleY + bubbleH} Z" fill="${palette.black}"/>

    <!-- Cube mark inside the bubble (negative-space: orange on black) -->
    <g transform="translate(${cubeX}, ${cubeY})">
      <rect x="0" y="0" width="${cubeSize}" height="${cubeSize}" rx="8" fill="${palette.orange}"/>
      <rect x="5" y="5" width="${cubeSize - 10}" height="${cubeSize - 10}" rx="6" fill="${palette.black}"/>
      <path d="M ${cubeSize / 2} 12 L ${cubeSize - 13} ${cubeSize / 2} L ${cubeSize / 2} ${cubeSize - 12} L 13 ${cubeSize / 2} Z" fill="${palette.orange}"/>
      <circle cx="${cubeSize / 2}" cy="${cubeSize / 2}" r="4" fill="${palette.black}"/>
    </g>

    <!-- Wordmark (negative-space: black on orange) -->
    <text x="256" y="${wordY}" font-family="Inter, system-ui, sans-serif" font-size="${fontPx}" font-weight="800" letter-spacing="3" text-anchor="middle" fill="${palette.black}">ASK</text>
  </svg>`;
}

async function renderSvg(svg, outPath, size) {
  const buf = Buffer.from(svg);
  await sharp(buf, { density: 144 })
    .resize({ width: size, height: size })
    .png({ compressionLevel: 9 })
    .toFile(outPath);
  const stat = await fs.stat(outPath);
  console.log(`Wrote ${outPath} (${(stat.size / 1024).toFixed(1)} KB, ${size}x${size})`);
}

async function renderAppleIcon(srcPath, dstPath, radius = 40) {
  // Derive an apple-touch-icon from an existing PNG, resizing to 180x180
  // and applying a rounded-corner mask (default ~22% radius for the iOS
  // "squircle" look).
  const size = 180;
  const maskSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
    <rect width="${size}" height="${size}" rx="${radius}" ry="${radius}" fill="white"/>
  </svg>`;
  const maskPng = await sharp(Buffer.from(maskSvg)).png().toBuffer();
  await sharp(srcPath)
    .resize({ width: size, height: size })
    .composite([{ input: maskPng, blend: "dest-in" }])
    .png()
    .toFile(dstPath);
  const stat = await fs.stat(dstPath);
  console.log(`Wrote ${dstPath} (${(stat.size / 1024).toFixed(1)} KB, ${size}x${size})`);
}

// Main
await renderSvg(chatSvg(512, 80), path.join(ROOT, "public/icons/chat-icon-512.png"), 512);
await renderSvg(chatSvg(192, 30), path.join(ROOT, "public/icons/chat-icon-192.png"), 192);
await renderSvg(chatMaskableSvg(512, 38), path.join(ROOT, "public/icons/chat-maskable-512.png"), 512);

// Apple-touch-icon for chat route — derived from the non-maskable 512
await renderAppleIcon(
  path.join(ROOT, "public/icons/chat-icon-512.png"),
  path.join(ROOT, "src/app/dashboard/chat/apple-icon.png"),
);

// Dashboard apple-icon — derived from the existing dashboard icon
await renderAppleIcon(
  path.join(ROOT, "public/icons/icon-512.png"),
  path.join(ROOT, "src/app/apple-icon.png"),
);

console.log("All icons rendered.");