/**
 * 🤖 100 个 bottts 机器人「技能变换」变体预览页
 * 组合技能库变换（全部来自 js/skills/）：
 *   1. palette-build   → 10 个行业色板（primary/secondary/accent）
 *   2. gradient-suggest→ 每个主色的同色/互补/邻近渐变方向
 *   3. lucide 源图标   → 科技徽章叠加
 * 每个色板 × 5 渐变模式 × 2 徽章 = 10 变体 × 10 色板 = 100 个变体。
 * 主体保持 bottts 机器人（资源库 DiceBear 源），渐变圆底 + 亮环 + 科技徽章。
 *
 * 用法：node scripts/gen-100-bot-variants.js
 */
'use strict';
const fs = require('fs');
const path = require('path');
const vm = require('vm');

const ROOT = path.resolve(__dirname, '..');
const OUT_DIR = path.join(ROOT, 'output', 'agent-avatars-png');

// —— 1. 加载技能环境 ——
global.window = global;
function load(rel) { vm.runInThisContext(fs.readFileSync(path.join(ROOT, rel), 'utf8'), { filename: rel }); }
load('js/data/icons.js');               // HGB_Icons
load('js/data/industries.js');          // HGB_Industries
load('js/data/styles.js');              // HGB_Styles
load('js/data/palettes.js');            // HGB_Palettes
load('js/data/fonts.js');               // HGB_Fonts
load('js/data/decorations.js');         // HGB_Decorations
load('js/skills/core.js');              // HGB_Skills (const)
load('js/skills/color.js');             // palette-build / gradient-suggest 等
load('js/data/sources/lucide.js');      // HGB_Source_lucide（徽章图标）
load('js/data/sources/dicebear-bottts.js');
load('js/core/dicebear.js');            // HGB_Dicebear

const Skills = HGB_Skills;
console.log('✅ 技能已加载，技能数:', Skills.all().length);

// —— 2. 色板：6 行业 + 4 内置色板 = 10 ——
const inds = HGB_Industries.slice(0, 6);
const extraPals = HGB_Palettes.slice(0, 4);
const palettes = [
  ...inds.map(ind => {
    const r = Skills.run('palette-build', { desc: '科技感 ' + ind.name, industry: ind.id });
    return { industry: ind.id, indName: ind.name, palette: r.palette || { primary: '#2563eb', secondary: '#3b82f6', accent: '#60a5fa' } };
  }),
  ...extraPals.map((p, i) => ({
    industry: 'palette-' + i, indName: p.name,
    palette: { primary: p.colors[0], secondary: p.colors[1] || p.colors[0], accent: p.colors[2] || p.colors[1] || p.colors[0] }
  }))
];
console.log('✅ 色板数:', palettes.length, '→', palettes.map(p => p.indName).join(' / '));

// —— 3. HSL 工具（渐变派生）——
function hexToHsl(hex) {
  let c = String(hex).replace('#', ''); if (c.length === 3) c = c.split('').map(x => x + x).join('');
  const r = parseInt(c.slice(0, 2), 16) / 255, g = parseInt(c.slice(2, 4), 16) / 255, b = parseInt(c.slice(4, 6), 16) / 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b); let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
    else if (max === g) h = ((b - r) / d + 2) * 60;
    else h = ((r - g) / d + 4) * 60;
  }
  return { h, s: s * 100, l: l * 100 };
}
function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const k = n => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = n => { const x = k(n); return Math.round(255 * (l - a * Math.max(-1, Math.min(x - 3, Math.min(9 - x, 1))))); };
  return '#' + [f(0), f(8), f(4)].map(x => x.toString(16).padStart(2, '0')).join('');
}
function adjust(hex, dl) { const { h, s, l } = hexToHsl(hex); return hslToHex(h, s, Math.max(2, Math.min(98, l + dl))); }

// —— 4. 徽章图标（lucide 科技图标 10 个）——
const lucideIcons = window['HGB_Source_lucide'].icons;
const badgeNames = ['bot', 'sparkles', 'cpu', 'radar', 'satellite', 'zap', 'shield', 'atom', 'circuit-board', 'brain-circuit'];
const badges = badgeNames.map(n => {
  const ic = lucideIcons.find(x => x.name === n);
  return { name: n, body: ic ? ic.svg : '<circle cx="12" cy="12" r="9"/>' };
});

// —— 5. 生成 100 个变体 ——
const MODES = [
  { name: '主色渐变', f: (p, g) => [p.primary, p.secondary] },
  { name: '点缀渐变', f: (p, g) => [p.primary, p.accent] },
  { name: '深邃渐变', f: (p, g) => [p.primary, adjust(p.primary, -30)] },
  { name: '互补渐变', f: (p, g) => [p.primary, hslToHex((g.h + 180) % 360, 60, 50)] },
  { name: '邻近渐变', f: (p, g) => [p.primary, hslToHex((g.h + 30) % 360, 60, 50)] }
];

const cards = [];
let idx = 1;
for (let pi = 0; pi < palettes.length; pi++) {
  const P = palettes[pi];
  const gradInfo = Skills.run('gradient-suggest', { color: P.palette.primary });
  for (let mi = 0; mi < MODES.length; mi++) {
    for (let bi = 0; bi < 2; bi++) {
      const badge = badges[(pi * 5 + mi * 2 + bi) % badges.length];
      const [c1, c2] = MODES[mi].f(P.palette, gradInfo);
      const seed = 'agent-' + idx;
      const { svg } = HGB_Dicebear.renderAvatar('bottts', seed);
      // 包裹：渐变圆底 + bottts + 亮环 + 科技徽章
      const wrapped = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="96" height="96">
  <defs>
    <linearGradient id="g${idx}" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="${c1}"/><stop offset="100%" stop-color="${c2}"/>
    </linearGradient>
    <clipPath id="c${idx}"><circle cx="120" cy="120" r="120"/></clipPath>
  </defs>
  <rect width="240" height="240" fill="url(#g${idx})" clip-path="url(#c${idx})"/>
  <g transform="translate(120 120) scale(1.28) translate(-${120 / 1.28} -${120 / 1.28})">${svg.replace(/^<svg[^>]*>|<\/svg>$/g, '')}</g>
  <circle cx="120" cy="120" r="112" fill="none" stroke="#ffffff" stroke-width="3" opacity=".35"/>
  <g transform="translate(188 188)"><circle r="24" fill="${c2}"/><g transform="translate(-12 -12) scale(1)" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${badge.body}</g></g>
</svg>`;
      cards.push({ idx, pi, mi, bi, seed, svg: wrapped, name: `${P.indName} · ${MODES[mi].name} · ${badge.name}` });
      idx++;
    }
  }
}
console.log('✅ 变体数:', cards.length);

// —— 6. 唯一性校验 ——
const { createHash } = require('crypto');
const hashes = new Set();
let dup = 0;
for (const c of cards) {
  const h = createHash('md5').update(c.svg).digest('hex');
  if (hashes.has(h)) dup++;
  hashes.add(h);
}
console.log('唯一性：' + (cards.length - dup) + '/' + cards.length + (dup ? '（⚠️ ' + dup + ' 重复）' : ' ✅'));

// —— 7. 预览页 ——
let cardHtml = '';
for (const c of cards) {
  const n = String(c.idx).padStart(2, '0');
  cardHtml += `<label class="card" data-idx="${c.idx}">
  <input type="checkbox" class="cb" value="${c.idx}" data-name="${c.name}">
  ${c.svg}
  <div class="no">#${n}</div>
  <div class="name" title="${c.name}">${c.name}</div>
</label>\n`;
}

const html = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>🎨 100 个 bottts 技能变换变体 · 勾选后批量渲染</title>
<style>
  body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background:#0f1115; color:#e8eaed; margin:0; padding:24px; }
  h1 { font-size:20px; margin:0 0 4px; }
  .sub { color:#9aa0a6; font-size:13px; margin-bottom:16px; }
  .toolbar { position:sticky; top:0; background:#0f1115ee; padding:10px 0; z-index:9; border-bottom:1px solid #2a2f3a; margin-bottom:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .toolbar button { background:#2563eb; color:#fff; border:none; border-radius:6px; padding:6px 14px; font-size:13px; cursor:pointer; }
  .toolbar .count { color:#8ab4f8; font-size:13px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
  .card { background:#1b1e26; border:1px solid #2a2f3a; border-radius:12px; padding:12px 8px 10px; text-align:center; cursor:pointer; position:relative; transition:border-color .15s; }
  .card:hover { border-color:#3b82f6; }
  .card.sel { border-color:#22c55e; background:#1a2b1f; }
  .card svg { width:96px; height:96px; border-radius:50%; display:block; margin:0 auto; }
  .card .no { font-size:11px; color:#80868b; margin-top:8px; }
  .card .name { font-size:10px; color:#bdc1c6; word-break:break-all; }
  .card .cb { position:absolute; top:8px; left:8px; width:16px; height:16px; accent-color:#22c55e; }
  .out { margin-top:16px; }
  .out textarea { width:100%; height:56px; background:#1b1e26; color:#8ab4f8; border:1px solid #2a2f3a; border-radius:8px; padding:8px; font-size:12px; box-sizing:border-box; }
</style>
</head>
<body>
<h1>🎨 100 个 bottts 技能变换变体</h1>
<div class="sub">技能库组合变换：palette-build 色板 × gradient-suggest 渐变 × lucide 科技徽章 · 点击勾选（默认全选）· 复制编号交渲染</div>
<div class="toolbar">
  <button onclick="sel(true)">全选</button>
  <button onclick="sel(false)">清空</button>
  <span class="count" id="count">已选 0/100</span>
  <button onclick="copySel()">复制已选编号</button>
</div>
<div class="grid">${cardHtml}</div>
<div class="out">
  <textarea id="selText" placeholder="已选编号将显示在这里…" readonly></textarea>
</div>
<script>
  const cards = document.querySelectorAll('.card');
  const countEl = document.getElementById('count');
  const selText = document.getElementById('selText');
  function update() {
    const sel = [...cards].filter(c => c.querySelector('.cb').checked);
    cards.forEach(c => c.classList.toggle('sel', c.querySelector('.cb').checked));
    countEl.textContent = '已选 ' + sel.length + '/' + cards.length;
    selText.value = sel.map(c => c.dataset.idx).join(',');
  }
  function sel(v) { cards.forEach(c => c.querySelector('.cb').checked = v); update(); }
  function copySel() {
    if (!selText.value) return alert('请先勾选头像');
    navigator.clipboard.writeText(selText.value).then(() => alert('已复制编号：' + selText.value)).catch(() => alert(selText.value));
  }
  cards.forEach(c => c.addEventListener('click', e => {
    if (e.target.tagName === 'INPUT') return;
    const cb = c.querySelector('.cb'); cb.checked = !cb.checked; update();
  }));
  sel(true);
</script>
</body>
</html>`;

fs.writeFileSync(path.join(OUT_DIR, 'preview-100-variants.html'), html, 'utf8');
console.log('🎉 已生成 100 个技能变换变体 → output/agent-avatars-png/preview-100-variants.html');