/**
 * 画个标 · 装饰图形系统
 * 落地 GitHub logo-design-skill 专业设计方法论：专业 LOGO 的"设计感"来自
 * 图形层次 —— 双线环、点状环绕、星点、角括号、弧线、绶带、几何衬底（容器）。
 * 所有装饰原语为 24x24 viewBox 字符串，作为 icon 元素渲染。
 * fill=true 表示实心填充型（无描边，可用于容器/色块）；fill=false 表示描边型。
 */
const HGB_Decorations = (function () {
  'use strict';

  let seq = 0;
  function uid() { return 'dc' + Date.now().toString(36) + (seq++).toString(36); }

  /** 颜色亮化：amt 0~1（值越大越接近白色） */
  function lighten(hex, amt) {
    const c = String(hex || '#888888').replace('#', '');
    if (c.length !== 6) return '#cccccc';
    const f = (v) => Math.round(v + (255 - v) * Math.min(1, Math.max(0, amt))).toString(16).padStart(2, '0');
    return '#' + f(parseInt(c.slice(0, 2), 16)) + f(parseInt(c.slice(2, 4), 16)) + f(parseInt(c.slice(4, 6), 16));
  }
  /** 颜色加深：amt 0~1 */
  function shade(hex, amt) {
    const c = String(hex || '#888888').replace('#', '');
    if (c.length !== 6) return '#444444';
    const f = (v) => Math.round(v * (1 - Math.min(1, Math.max(0, amt)))).toString(16).padStart(2, '0');
    return '#' + f(parseInt(c.slice(0, 2), 16)) + f(parseInt(c.slice(2, 4), 16)) + f(parseInt(c.slice(4, 6), 16));
  }
  /** 判断颜色明暗（返回 true 表示偏深色） */
  function isDark(hex) {
    const c = String(hex || '#FFFFFF').replace('#', '');
    if (c.length !== 6) return false;
    const r = parseInt(c.slice(0, 2), 16), g = parseInt(c.slice(2, 4), 16), b = parseInt(c.slice(4, 6), 16);
    return (0.2126 * r + 0.7152 * g + 0.0722 * b) < 150;
  }

  /**
   * 装饰原语库
   */
  const DECO_KIT = {
    /* ---- 环绕/边框类（描边型） ---- */
    'deco-dotring':   { name: '点状环绕', fill: true, sw: 0, opacity: 0.9,
      svg: '<circle cx="12" cy="2" r="1.15"/><circle cx="17.07" cy="4.93" r="1.15"/><circle cx="19.92" cy="10" r="1.15"/><circle cx="19.92" cy="14" r="1.15"/><circle cx="17.07" cy="19.07" r="1.15"/><circle cx="12" cy="22" r="1.15"/><circle cx="6.93" cy="19.07" r="1.15"/><circle cx="4.08" cy="14" r="1.15"/><circle cx="4.08" cy="10" r="1.15"/><circle cx="6.93" cy="4.93" r="1.15"/>' },
    'deco-rayring':  { name: '射线环', fill: false, sw: 2, opacity: 0.95,
      svg: (function () { let p = ''; for (let i = 0; i < 12; i++) { const a = i * 30 * Math.PI / 180, c = Math.cos(a), s = Math.sin(a); p += 'M' + (12 + 8 * c).toFixed(2) + ' ' + (12 + 8 * s).toFixed(2) + 'L' + (12 + 11.5 * c).toFixed(2) + ' ' + (12 + 11.5 * s).toFixed(2); } return p; })() },
    'deco-doublering': { name: '双线环', fill: false, sw: 4, opacity: 0.85,
      svg: '<circle cx="12" cy="12" r="10.5"/><circle cx="12" cy="12" r="7"/>' },
    'deco-arc-top':   { name: '上弧形', fill: false, sw: 5, opacity: 0.9,
      svg: '<path d="M2 9 A 14 14 0 0 1 22 9"/>' },
    'deco-arc-bottom': { name: '下弧形', fill: false, sw: 5, opacity: 0.9,
      svg: '<path d="M2 15 A 14 14 0 0 0 22 15"/>' },
    'deco-corner-tl': { name: '左上角括号', fill: false, sw: 5, opacity: 0.95,
      svg: '<path d="M4 11 V4 H11"/>' },
    'deco-corner-br': { name: '右下角括号', fill: false, sw: 5, opacity: 0.95,
      svg: '<path d="M20 13 V20 H13"/>' },
    'deco-stars':     { name: '星点散落', fill: true, sw: 0, opacity: 0.9,
      svg: '<path d="M6 4l.9 2.2L9 7l-2.1.9L6 10l-.9-2.1L3 7l2.1-.9z"/><path d="M18 14l.8 1.9 1.9.8-1.9.8-.8 1.9-.8-1.9-1.9-.8 1.9-.8z"/><path d="M16 3.5l.6 1.4 1.4.6-1.4.6-.6 1.4-.6-1.4-1.4-.6 1.4-.6z"/>' },
    'deco-divider':   { name: '菱形分隔线', fill: true, sw: 0, opacity: 0.95,
      svg: '<rect x="2" y="11" width="7" height="2" rx="1"/><path d="M12 8.5l2.6 3.5-2.6 3.5-2.6-3.5z"/><rect x="15" y="11" width="7" height="2" rx="1"/>' },
    'deco-chevron':   { name: '人字饰带', fill: false, sw: 5, opacity: 0.9,
      svg: '<path d="M5 6l6 6-6 6"/><path d="M13 6l6 6-6 6"/>' },
    'deco-tri-corner': { name: '三角角标', fill: true, sw: 0, opacity: 0.9,
      svg: '<path d="M12 3L21 21H3z"/>' },
    'deco-line':      { name: '细分隔线', fill: true, sw: 0, opacity: 0.9,
      svg: '<rect x="0" y="11" width="24" height="2" rx="1"/>' },
    'deco-spark':     { name: '光芒四射', fill: true, sw: 0, opacity: 0.9,
      svg: '<path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z"/>' },
    'deco-laurel-l':  { name: '左月桂叶', fill: false, sw: 5, opacity: 0.9,
      svg: '<path d="M14 21a8 8 0 0 1-8-8M14 21c-1 0-2-3-2-8s1-8 2-8M6 13a6 6 0 0 1 3-6c2-1 3 1 3 4"/>' },
    'deco-laurel-r':  { name: '右月桂叶', fill: false, sw: 5, opacity: 0.9,
      svg: '<path d="M10 21a8 8 0 0 0 8-8M10 21c1 0 2-3 2-8s-1-8-2-8M18 13a6 6 0 0 0-3-6c-2-1-3 1-3 4"/>' },
    /* ---- 实心几何衬底（容器，图标徽章化） ---- */
    'deco-shape-circle':  { name: '圆形衬底', fill: true, sw: 0, opacity: 1,
      svg: '<circle cx="12" cy="12" r="11"/>' },
    'deco-shape-squircle':{ name: '圆角方形衬底', fill: true, sw: 0, opacity: 1,
      svg: '<rect x="1.6" y="1.6" width="20.8" height="20.8" rx="5"/>' },
    'deco-shape-hexagon': { name: '六边形衬底', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M12 1.5L21.3 6.75v10.5L12 22.5 2.7 17.25V6.75z"/>' },
    'deco-shape-star':    { name: '星形衬底', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M12 1.6l3.2 6.5 7.2 1-5.2 5 1.2 7.1L12 17.9l-6.4 3.3 1.2-7.1-5.2-5 7.2-1z"/>' },
    'deco-shape-shield':  { name: '盾形衬底', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M12 1.8L20.5 5v7c0 4.6-3.5 8.2-8.5 10.2C7 20.2 3.5 16.6 3.5 12V5z"/>' },
    'deco-shape-diamond': { name: '菱形衬底', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M12 1.5L22.5 12 12 22.5 1.5 12z"/>' },
    'deco-shape-triangle': { name: '三角衬底', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M12 1.6 L22.4 21.5 H1.6 z"/>' },
    'deco-shape-arch':    { name: '拱形衬底', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M2 24V11a10 10 0 0 1 20 0v13z"/>' },
    'deco-shape-pill':    { name: '胶囊衬底', fill: true, sw: 0, opacity: 1,
      svg: '<rect x="1.6" y="7" width="20.8" height="10" rx="5"/>' },
    'deco-shape-ribbon':  { name: '绶带横幅', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M2 5h20v11h-8.4l-1.6 3.4L10.4 16H2z"/>' },
    'deco-shape-heart':   { name: '爱心衬底', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M12 21s-8.5-5-10.5-10C-.5 6.5 3 3 6.5 3c2 0 3.6 1 5.5 3 1.9-2 3.5-3 5.5-3C21 3 24.5 6.5 22.5 11 20.5 16 12 21 12 21z"/>' },
    /* ---- 分屏/背景面板（填充型，铺满画布） ---- */
    'deco-panel-left':  { name: '左半色板', fill: true, sw: 0, opacity: 1,
      svg: '<rect x="0" y="0" width="12" height="24"/>' },
    'deco-panel-diag':  { name: '对角色板', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M0 0h16L6 24H0z"/>' },
    'deco-panel-band':  { name: '横向色带', fill: true, sw: 0, opacity: 1,
      svg: '<rect x="0" y="10" width="24" height="4.4"/>' },
    'deco-panel-barc':  { name: '底边色块', fill: true, sw: 0, opacity: 1,
      svg: '<path d="M0 16h24v8H0z"/>' }
  };

  /**
   * 构造装饰元素（同 icon 元素结构，渲染走 applyIconStyle）
   * @param {string} id DECO_KIT 键名
   * @param {number} x 左上角 x
   * @param {number} y 左上角 y
   * @param {number} w 宽
   * @param {number} h 高
   * @param {string} color 填充/描边色
   * @param {object} grad {id,type,from,to} 渐变对象（有则覆盖纯色）
   */
  function decoEl(id, x, y, w, h, color, grad) {
    const def = DECO_KIT[id];
    if (!def) return null;
    const fill = grad ? 'url(#' + grad.id + ')' : (def.fill ? color : 'none');
    return {
      id: uid(), type: 'icon', name: def.name, iconId: id,
      svg: def.svg, x, y, w, h, rotation: 0,
      fill: fill,
      stroke: def.fill ? 'none' : color,
      strokeWidth: def.sw || 4,
      grad: grad || null,
      opacity: def.opacity != null ? def.opacity : 1,
      visible: true, locked: false
    };
  }

  /**
   * 按风格返回装饰组合（供布局选择参考；布局也可自选具体原语）
   * @param {string} styleId 风格 id
   * @param {object} palette 配色 {colors:[主,辅,点,背景]}
   * @returns {{dec:Array, decoColor:string, grad:object}}
   */
  function buildDecoSet(styleId, palette) {
    const colors = (palette && palette.colors) || ['#2563EB', '#3B82F6', '#F59E0B', '#FFFFFF'];
    const decoColor = lighten(colors[1] || colors[0], 0.42); // 浅色点缀，低对比
    const grad = {
      id: 'grad-main' + (++seq),
      type: 'linear',
      from: colors[0],
      to: lighten(colors[0], 0.28)
    };
    const map = {
      minimal: ['deco-doublering'],
      gradient: ['deco-dotring'],
      vintage: ['deco-arc-top', 'deco-arc-bottom'],
      tech: ['deco-corner-tl', 'deco-corner-br'],
      playful: ['deco-stars'],
      luxury: ['deco-divider'],
      flat: ['deco-shape-circle']
    };
    return { dec: map[styleId] || [], decoColor, grad };
  }

  return { decoEl, buildDecoSet, lighten, shade, isDark, DECO_KIT };
})();