#!/usr/bin/env node
// Writes the icon packs of the Store source: store/x/icons/<id>/<id>.icons.json and preview.svg.
//   wb-line, wb-classic, wb-aero, wb-pixel   the packs bundled in the app (apps/desktop/src/inject/packs/index.ts),
//                                            published under the SAME ids: installing one changes nothing
//   retro-98, retro-xp                       the retro packs (apps/desktop/src/inject/packs/retro.ts), Store only
// item.json (category, version, tags, license, credits) is written by hand and left alone.
// Run it after changing a pack, then `node scripts/build-store.mjs`. `node scripts/check-store.mjs` fails
// when a bundled pack and its Store file differ.
//
//   node scripts/build-store-icons.mjs [--check]
import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
import { dirname, join, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import { glyphSvg } from '../waybetter/packages/runtime/src/themeIcons.ts';
import { BUILTIN_PACKS, packDocument } from '../apps/desktop/src/inject/packs/index.ts';
import { RETRO_PACKS, retroDocument } from '../apps/desktop/src/inject/packs/retro.ts';

const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
export const STORE_ICON_IDS = [...new Set([...BUILTIN_PACKS.map(pack => pack.id), ...RETRO_PACKS.map(pack => pack.id)])];

/** The pack file as the Store publishes it. */
export const packFile = id => `${JSON.stringify(packDocument(id) ?? retroDocument(id), null, 1)}\n`;

const esc = value => String(value).replace(/[&<>"']/g, ch => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]);
const num = n => +n.toFixed(2);

// ---- preview ------------------------------------------------------------------------------
const RAIL = ['home', 'explore', 'notifications', 'messages', 'grok', 'bookmarks', 'lists', 'communities', 'profile', 'more'];
const ACTIONS = ['reply', 'repost', 'repost.on', 'like', 'like.on', 'views', 'bookmark', 'bookmark.on', 'share', 'media', 'emoji', 'schedule'];
const RAIL_LABELS = [38, 52, 70, 58, 34, 66, 40, 78, 50, 36];

/** One glyph placed at (x, y) in a box of `size`, `ink` for single-path glyphs. Gradients get unique ids. */
function place(glyph, style, x, y, size, ink, uid) {
  if (!glyph) return '';
  const scale = size / 24;
  const open = `<g transform="translate(${num(x)} ${num(y)}) scale(${num(scale)})">`;
  if ('d' in glyph) {
    const attrs = glyph.stroke
      ? `fill="none" stroke="${ink}" stroke-width="${style.stroke}" stroke-linecap="${style.cap}" stroke-linejoin="${style.join}"`
      : `fill="${ink}"${glyph.rule ? ' fill-rule="evenodd"' : ''}`;
    return `${open}<path d="${esc(glyph.d)}" ${attrs}/></g>`;
  }
  if ('layers' in glyph) {
    const defs = [];
    const paths = glyph.layers.map((layer, index) => {
      let fill = layer.fill;
      if (typeof fill === 'object') {
        const id = `${uid}-${index}`;
        defs.push(`<linearGradient id="${id}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${fill.from}"/><stop offset="1" stop-color="${fill.to}"/></linearGradient>`);
        fill = `url(#${id})`;
      }
      return `<path d="${esc(layer.d)}" fill="${fill}"${layer.opacity !== undefined ? ` opacity="${layer.opacity}"` : ''}${layer.rule ? ' fill-rule="evenodd"' : ''}/>`;
    });
    return `${open}${defs.length ? `<defs>${defs.join('')}</defs>` : ''}${paths.join('')}</g>`;
  }
  return '';
}

const FONT = "'Segoe UI', Tahoma, Arial, sans-serif";
const THEMES = {
  line: { bg: '#0f1419', ink: '#e7e9ea', muted: '#2f3b44', title: '#ffffff', sub: '#8b98a5', rounded: 12 },
  classic: { bg: '#e8eef4', ink: '#2b3f55', muted: '#b9c6d3', title: '#1b2a3a', sub: '#5c6f82', rounded: 12 },
  aero: { bg: ['#d8efff', '#7fc3f2'], ink: '#0b3a66', muted: '#ffffff', mutedOpacity: 0.55, title: '#0b3a66', sub: '#2f6a9e', rounded: 16, glass: true },
  win98: { bg: '#008080', ink: '#000000', muted: '#808080', title: '#ffffff', sub: '#000000', window: '98' },
  winxp: { bg: ['#4a8be6', '#2f9a3a'], ink: '#143c8c', muted: '#a9b8d4', title: '#ffffff', sub: '#143c8c', window: 'xp' },
};
const THEME_OF = { 'wb-line': 'line', 'wb-classic': 'classic', 'wb-aero': 'aero', 'wb-pixel': 'win98', 'retro-98': 'win98', 'retro-xp': 'winxp' };

function frame(theme, x, y, w, h, title, uid) {
  if (theme.window === '98') {
    return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="#c0c0c0"/><path d="M${x} ${y + h}V${y}H${x + w}" fill="none" stroke="#ffffff" stroke-width="2"/><path d="M${x + w - 1} ${y}V${y + h - 1}H${x}" fill="none" stroke="#404040" stroke-width="2"/>`
      + `<rect x="${x + 4}" y="${y + 4}" width="${w - 8}" height="18" fill="#000080"/><text x="${x + 10}" y="${y + 17}" font-family="${FONT}" font-size="12" font-weight="700" fill="#ffffff">${esc(title)}</text>`
      + `<rect x="${x + w - 20}" y="${y + 6}" width="14" height="14" fill="#c0c0c0" stroke="#000000" stroke-width="1"/><path d="M${x + w - 16} ${y + 10}l6 6m0-6l-6 6" stroke="#000000" stroke-width="1.6"/>`
      + `<rect x="${x + 4}" y="${y + 26}" width="${w - 8}" height="${h - 30}" fill="#ffffff" stroke="#808080" stroke-width="1"/>`;
  }
  if (theme.window === 'xp') {
    return `<defs><linearGradient id="${uid}t" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3d8cff"/><stop offset="0.12" stop-color="#0a5ae0"/><stop offset="0.8" stop-color="#0a4fd0"/><stop offset="1" stop-color="#0838a8"/></linearGradient></defs>`
      + `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="8" fill="#0a45c0"/><path d="M${x} ${y + 8}a8 8 0 0 1 8-8h${w - 16}a8 8 0 0 1 8 8v22H${x}z" fill="url(#${uid}t)"/>`
      + `<text x="${x + 12}" y="${y + 20}" font-family="${FONT}" font-size="13" font-weight="700" fill="#ffffff">${esc(title)}</text>`
      + `<rect x="${x + w - 26}" y="${y + 5}" width="19" height="19" rx="3" fill="#d2402a" stroke="#ffffff" stroke-width="1.4"/><path d="M${x + w - 20} ${y + 11}l7 7m0-7l-7 7" stroke="#ffffff" stroke-width="2"/>`
      + `<rect x="${x + 3}" y="${y + 30}" width="${w - 6}" height="${h - 33}" fill="#f4f6fb"/>`;
  }
  return `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${theme.rounded ?? 12}" fill="${theme.glass ? '#ffffff' : theme.muted}" fill-opacity="${theme.glass ? 0.45 : 0.18}"${theme.glass ? ' stroke="#ffffff" stroke-opacity="0.9"' : ''}/>`;
}

/** A 640x400 preview of a pack: the left navigation drawn with it, and the action bar. */
export function iconsPreviewSvg(pack) {
  const theme = THEMES[THEME_OF[pack.id] ?? 'line'];
  const W = 640, H = 400;
  const uid = pack.id.replace(/[^a-z0-9]/g, '');
  const crisp = theme.window === '98' ? ' shape-rendering="crispEdges"' : '';
  const gradient = Array.isArray(theme.bg);
  const out = [];
  out.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" role="img" aria-label="${esc(pack.name)} icon pack preview"${crisp}>`);
  out.push(`<title>${esc(pack.name)}</title>`);
  out.push(`<defs><clipPath id="${uid}c"><rect width="${W}" height="${H}" rx="14"/></clipPath>${gradient ? `<linearGradient id="${uid}b" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${theme.bg[0]}"/><stop offset="1" stop-color="${theme.bg[1]}"/></linearGradient>` : ''}</defs>`);
  out.push(`<g clip-path="url(#${uid}c)"><rect width="${W}" height="${H}" fill="${gradient ? `url(#${uid}b)` : theme.bg}"/>`);
  const windowed = Boolean(theme.window);
  // Left rail panel.
  const railX = windowed ? 24 : 28, railY = windowed ? 22 : 22, railW = 222, railH = 356;
  out.push(frame(theme, railX, railY, railW, railH, 'Home', `${uid}r`));
  const top = railY + (windowed ? 40 : 16);
  const pitch = windowed ? 31 : 33, icon = windowed ? 26 : 28;
  RAIL.forEach((name, index) => {
    const y = top + index * pitch;
    out.push(place(pack.glyphs[name], pack.style, railX + 18, y, icon, theme.ink, `${uid}n${index}`));
    out.push(`<rect x="${railX + 18 + icon + 12}" y="${y + icon / 2 - 4}" width="${RAIL_LABELS[index]}" height="8" rx="4" fill="${theme.muted}" fill-opacity="${theme.mutedOpacity ?? (windowed ? 0.55 : 0.8)}"/>`);
  });
  // Right panel: the name and the action bar.
  const panX = 270, panY = windowed ? 22 : 22, panW = 346, panH = 356;
  out.push(frame(theme, panX, panY, panW, panH, pack.name, `${uid}p`));
  const textTop = panY + (windowed ? 62 : 52);
  out.push(`<text x="${panX + 22}" y="${textTop}" font-family="${FONT}" font-size="28" font-weight="700" fill="${windowed ? theme.sub : theme.title}">${esc(pack.name)}</text>`);
  out.push(`<text x="${panX + 22}" y="${textTop + 24}" font-family="${FONT}" font-size="13" fill="${theme.sub}">Icon pack &#183; ${Object.keys(pack.glyphs).length} icons &#183; ${esc(pack.license)}</text>`);
  ACTIONS.forEach((name, index) => {
    const col = index % 4, row = Math.floor(index / 4);
    out.push(place(pack.glyphs[name], pack.style, panX + 28 + col * 78, textTop + 50 + row * 78, 46, theme.ink, `${uid}a${index}`));
  });
  out.push('</g></svg>');
  return out.join('');
}

// ---- writing ------------------------------------------------------------------------------
function main() {
  const check = process.argv.includes('--check');
  let drift = 0;
  for (const id of STORE_ICON_IDS) {
    const pack = [...BUILTIN_PACKS, ...RETRO_PACKS].find(item => item.id === id);
    const dir = join(ROOT, 'store/x/icons', id);
    const files = { [`${id}.icons.json`]: packFile(id), 'preview.svg': iconsPreviewSvg(pack) };
    for (const [name, text] of Object.entries(files)) {
      const path = join(dir, name);
      if (check) {
        if (!existsSync(path) || readFileSync(path, 'utf8') !== text) { drift += 1; console.error(`store/x/icons/${id}/${name} is out of date: node scripts/build-store-icons.mjs`); }
      } else {
        mkdirSync(dir, { recursive: true });
        writeFileSync(path, text);
      }
    }
  }
  if (check) process.exit(drift ? 1 : 0);
  console.log(`store icons: ${STORE_ICON_IDS.join(', ')} → store/x/icons/`);
}
if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) main();