/**
 * 画个标 · 技能库：构图类（layout）
 * 注册：HGB_Skills.register([...])
 */
(function () {
  'use strict';
  const U = HGB_Skills.utils;
  const { estTextW, elBox } = U;

  HGB_Skills.register([
    {
      id: 'composition',
      name: '构图质量评估',
      category: 'layout',
      emoji: '📐',
      scene: 'LOGO 构图设计与质量检查（生成后自动审计）',
      summary: '依据"极简、充足负空间、精确比例"专业原则，检测方案的元素越界、重叠与文字过宽，输出质量评分与修正建议。',
      params: [
        { name: 'plan', type: 'object', required: true, desc: '待检查的方案对象 {elements, bg}' }
      ],
      source: 'GitHub: op7418/logo-generator-skill（设计原则）+ 自研几何审计',
      run: function (args) {
        const plan = args.plan || {};
        const els = plan.elements || [];
        const CW = 600, CH = 600;
        const issues = [], suggestions = [];
        for (const el of els) {
          if (el.visible === false) continue;
          const b = elBox(el);
          if (b.x < 0 || b.y < 0 || b.x + b.w > CW || b.y + b.h > CH) {
            issues.push(`"${el.name}" 超出画布边界`);
          }
        }
        for (let i = 0; i < els.length; i++) {
          for (let j = i + 1; j < els.length; j++) {
            const a = els[i], b = els[j];
            const types = [a.type, b.type].sort().join('|');
            if (types !== 'icon|text') continue;
            // 圆环/装饰条是有意的背景元素（徽章/印章中文字位于环内），不参与重叠判定
            if (['ring', 'deco-bar'].includes(a.iconId) || ['ring', 'deco-bar'].includes(b.iconId)) continue;
            const ba = elBox(a), bb = elBox(b);
            const ox = Math.min(ba.x + ba.w, bb.x + bb.w) - Math.max(ba.x, bb.x);
            const oy = Math.min(ba.y + ba.h, bb.y + bb.h) - Math.max(ba.y, bb.y);
            if (ox > 0 && oy > 0 && ox * oy > (ba.w * ba.h) * 0.08) {
              issues.push(`"${a.name}" 与 "${b.name}" 存在重叠（建议加大间距）`);
            }
          }
        }
        for (const el of els) {
          if (el.type === 'text' && el.fontSize && el.fontSize >= 36) {
            const b = elBox(el);
            if (b.x + b.w > CW - 20) {
              suggestions.push(`"${el.name}" 文字偏宽（约 ${Math.round(b.w)}px），建议缩小字号或缩短文字`);
            }
          }
        }
        const score = issues.length ? Math.max(40, 95 - issues.length * 20) : (suggestions.length ? 88 : 96);
        return { score, pass: issues.length === 0, issues, suggestions };
      },
      test: function () {
        const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '测试品牌名' });
        const r = this.run({ plan });
        return { score: r.score, pass: r.pass, issues: r.issues, suggestions: r.suggestions, elements: plan.elements.length };
      }
    },
    {
      id: 'layout-choice',
      name: '布局匹配推荐',
      category: 'layout',
      emoji: '🧱',
      scene: '根据品牌名长度与行业选择最合适的布局模板',
      summary: '按品牌名长度（中文字数/西文字符数）匹配布局：短名用徽章/印章/双图标，长名用上下/左右式，避免破版。',
      params: [
        { name: 'brand', type: 'string', required: true, desc: '品牌名' },
        { name: 'industry', type: 'string', required: false, desc: '行业 id' }
      ],
      source: 'GitHub: neonwatty/logo-designer-skill（interview 阶段）+ 自研',
      run: function (args) {
        const brand = String(args.brand || '');
        const def = HGB_Generator.defaultLayout(brand);
        const cn = (brand.match(/[\u4e00-\u9fa5]/g) || []).length;
        const len = cn || brand.length;
        const pool = HGB_Generator.LAYOUTS.filter(l => {
          if (['badge', 'seal', 'duo'].includes(l.id)) return len <= 4;
          return true;
        });
        return { brand, len, recommend: def.id, recommendName: def.name, candidates: pool.map(l => l.id + ':' + l.name) };
      },
      test: function () {
        return { short: this.run({ brand: '远渡' }).recommend, medium: this.run({ brand: '远渡教育咨询' }).recommend, long: this.run({ brand: 'FAR CROSS EDUCATION' }).recommend };
      }
    },
    {
      id: 'align-check',
      name: '对齐与居中检查',
      category: 'layout',
      emoji: '📏',
      scene: 'LOGO 元素对齐与居中规范审计',
      summary: '检查方案元素是否围绕画布中心对齐（水平/垂直居中），并检测同级元素是否存在明显错位，输出对齐修正建议。',
      params: [
        { name: 'plan', type: 'object', required: true, desc: '方案对象 {elements}' }
      ],
      source: 'GitHub: op7418/logo-generator-skill（对齐规范）+ 自研',
      run: function (args) {
        const els = (args.plan || {}).elements || [];
        const CW = 600, CH = 600;
        const issues = [];
        const main = els.filter(el => el.visible !== false && !['ring', 'deco-bar'].includes(el.iconId));
        if (!main.length) return { pass: true, issues: ['无可见主体元素'], centered: true };
        // 主体元素中心应落在画布中心附近（容差 20px）
        let cxSum = 0, cySum = 0, n = 0;
        for (const el of main) {
          const b = elBox(el);
          cxSum += b.x + b.w / 2;
          cySum += b.y + b.h / 2;
          n++;
        }
        const cx = cxSum / n, cy = cySum / n;
        if (Math.abs(cx - CW / 2) > 20) issues.push(`主体水平中心偏移 ${Math.round(cx - CW / 2)}px（建议居中）`);
        if (Math.abs(cy - CH / 2) > 20) issues.push(`主体垂直中心偏移 ${Math.round(cy - CH / 2)}px（建议居中）`);
        return { pass: issues.length === 0, issues, centerX: Math.round(cx), centerY: Math.round(cy), canvasCenter: CW / 2 };
      },
      test: function () {
        const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '对齐测试' });
        const r = this.run({ plan });
        return { pass: r.pass, issues: r.issues };
      }
    },
    {
      id: 'negative-space',
      name: '负空间评估',
      category: 'layout',
      emoji: '🕳️',
      scene: 'LOGO 负空间（留白）充足性评估',
      summary: '计算主体元素在画布中的占比：占比过高说明负空间不足（拥挤），占比过低说明主体偏小（空洞），给出建议区间。',
      params: [
        { name: 'plan', type: 'object', required: true, desc: '方案对象 {elements}' }
      ],
      source: '自研（基于"极简 + 充足负空间"设计原则量化）',
      run: function (args) {
        const els = (args.plan || {}).elements || [];
        const CW = 600, CH = 600;
        const area = CW * CH;
        let used = 0;
        for (const el of els) {
          if (el.visible === false) continue;
          const b = elBox(el);
          const w = Math.max(0, Math.min(b.x + b.w, CW) - Math.max(b.x, 0));
          const h = Math.max(0, Math.min(b.y + b.h, CH) - Math.max(b.y, 0));
          used += w * h;
        }
        const ratio = Math.round((used / area) * 1000) / 10;
        const verdict = ratio > 55 ? '负空间不足，建议缩小主体或加大留白'
          : (ratio < 12 ? '主体偏小，建议放大增强存在感'
            : '负空间充足，比例健康');
        return { ratio, verdict, suggest: ratio > 55 ? '缩小主体或精简元素' : (ratio < 12 ? '放大主体或增加细节' : '无需调整') };
      },
      test: function () {
        const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '留白测试' });
        return this.run({ plan });
      }
    },
    {
      id: 'spacing-check',
      name: '间距节奏检查',
      category: 'layout',
      emoji: '↔️',
      scene: '元素间距与画布边距的一致性检查',
      summary: '检查主体元素与画布边缘的留白是否充足一致，以及图标与文字间距是否过近（<8px 视为贴边），保证构图不挤不散。',
      params: [
        { name: 'plan', type: 'object', required: true, desc: '方案对象 {elements}' }
      ],
      source: '自研（间距节奏规范）',
      run: function (args) {
        const els = (args.plan || {}).elements || [];
        const CW = 600, CH = 600;
        const issues = [];
        const main = els.filter(el => el.visible !== false && !['ring', 'deco-bar'].includes(el.iconId));
        if (!main.length) return { pass: true, issues: ['无可见主体元素'] };
        for (const el of main) {
          const b = elBox(el);
          const minPad = Math.min(b.x, CW - (b.x + b.w), b.y, CH - (b.y + b.h));
          if (minPad < 16) issues.push(`"${el.name}" 距画布边缘仅 ${Math.round(minPad)}px，建议留白 ≥ 24px`);
        }
        const icon = main.find(el => el.type === 'icon');
        const text = main.find(el => el.type === 'text');
        if (icon && text) {
          const bi = elBox(icon), bt = elBox(text);
          // 仅当水平相邻（垂直中心距小于图标高）时检查水平间距
          const verticalGap = Math.abs((bi.y + bi.h / 2) - (bt.y + bt.h / 2));
          if (verticalGap < (bi.h + bt.h) / 2) {
            const gap = Math.abs((bi.x + bi.w / 2) - (bt.x + bt.w / 2)) - (bi.w + bt.w) / 2;
            if (gap < 8) issues.push('图标与文字水平间距过近（<8px），建议加大间距');
          }
        }
        return { pass: issues.length === 0, issues, ok: issues.length ? [] : ['间距节奏协调，留白充足'] };
      },
      test: function () {
        const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '间距测试' });
        return this.run({ plan });
      }
    },
    {
      id: 'proportion-check',
      name: '黄金比例评估',
      category: 'layout',
      emoji: '⚖️',
      scene: '主体占比与黄金分割的匹配度评估',
      summary: '计算主体元素宽度与画布宽度之比：接近 0.618 黄金分割视觉最舒适，过高拥挤、过低空泛，输出调整方向。',
      params: [
        { name: 'plan', type: 'object', required: true, desc: '方案对象 {elements}' }
      ],
      source: '自研（黄金分割比例规范）',
      run: function (args) {
        const els = (args.plan || {}).elements || [];
        const CW = 600;
        const main = els.filter(el => el.visible !== false && !['ring', 'deco-bar'].includes(el.iconId));
        if (!main.length) return { pass: true, note: '无可见主体元素' };
        let maxW = 0;
        for (const el of main) {
          const b = elBox(el);
          if (b.w > maxW) maxW = b.w;
        }
        const ratio = Math.round((maxW / CW) * 1000) / 1000;
        const pass = Math.abs(ratio - 0.618) < 0.15;
        return {
          pass,
          ratio, golden: 0.618,
          verdict: pass ? '主体占比接近黄金分割（' + ratio + '），比例协调' : '主体占比 ' + ratio + '，偏离黄金分割，建议' + (ratio > 0.768 ? '缩小主体' : '放大主体'),
          suggest: pass ? '无需调整' : (ratio > 0.768 ? '缩小主体或精简元素' : '放大主体增强存在感')
        };
      },
      test: function () {
        const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '比例测试' });
        return this.run({ plan });
      }
    },
    {
      id: 'visual-balance',
      name: '视觉重量平衡',
      category: 'layout',
      emoji: '⚖️',
      scene: '画布左右/上下的视觉重量均衡检查',
      summary: '计算所有可见元素的包围盒质心与画布中心的偏移：偏移过大说明构图偏一侧、视觉失衡，输出偏移方向与调整建议。',
      params: [
        { name: 'plan', type: 'object', required: true, desc: '方案对象 {elements}' }
      ],
      source: '自研（视觉重量质心评估）',
      run: function (args) {
        const els = (args.plan || {}).elements || [];
        const CW = 600, CH = 600;
        const vis = els.filter(el => el.visible !== false);
        if (!vis.length) return { pass: true, note: '无可见元素' };
        let sx = 0, sy = 0, sw = 0;
        for (const el of vis) {
          const b = elBox(el);
          const w = Math.max(b.w * b.h, 1);
          sx += ((b.x + b.w / 2) - CW / 2) * w;
          sy += ((b.y + b.h / 2) - CH / 2) * w;
          sw += w;
        }
        const dx = Math.round((sx / sw) * 10) / 10;
        const dy = Math.round((sy / sw) * 10) / 10;
        const off = Math.sqrt(dx * dx + dy * dy);
        const pass = off < 40;
        const dir = Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? '右' : '左') : (dy > 0 ? '下' : '上');
        return {
          pass,
          offsetX: dx, offsetY: dy, offset: Math.round(off),
          verdict: pass ? '视觉重心接近中心，构图平衡' : '视觉重心偏移 ' + Math.round(off) + 'px，构图偏' + dir,
          suggest: pass ? '无需调整' : '调整元素位置或补充留白，让视觉重心回归中心'
        };
      },
      test: function () {
        const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '平衡测试' });
        return this.run({ plan });
      }
    },
    {
      id: 'focal-point',
      name: '视觉焦点检查',
      category: 'layout',
      emoji: '🎯',
      scene: 'LOGO 是否有明确视觉焦点（主次分明）',
      summary: '找出面积最大的主体元素，判断其是否显著大于其他元素：主次分明有助于快速识别，多个等权元素会让视线分散。',
      params: [
        { name: 'plan', type: 'object', required: true, desc: '方案对象 {elements}' }
      ],
      source: '自研（主次层级量化）',
      run: function (args) {
        const els = (args.plan || {}).elements || [];
        const vis = els.filter(el => el.visible !== false && !['ring', 'deco-bar'].includes(el.iconId));
        if (vis.length < 2) return { pass: true, note: '元素过少，无需焦点检查' };
        const areas = vis.map(el => { const b = elBox(el); return { el, area: b.w * b.h }; }).sort((a, b) => b.area - a.area);
        const top = areas[0], second = areas[1];
        const ratio = Math.round((top.area / Math.max(second.area, 1)) * 100) / 100;
        const pass = ratio >= 1.5;
        return {
          pass,
          focusRatio: ratio,
          main: top.el.text || top.el.iconId || '主体',
          verdict: pass ? '主元素面积是次元素的 ' + ratio + ' 倍，主次分明' : '主次面积接近（' + ratio + ' 倍），视觉焦点不明确',
          suggest: pass ? '无需调整' : '放大主元素或缩小次要元素，强化视觉焦点'
        };
      },
      test: function () {
        const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '焦点测试' });
        return this.run({ plan });
      }
    },
    {
      id: 'rule-of-thirds',
      name: '构图位置分析',
      category: 'layout',
      emoji: '📍',
      scene: '主体构图位置（居中 / 三分 / 偏移）分析',
      summary: '计算主体元素重心相对画布中心与三分线交点的位置，判定构图类型：居中构图适合徽章/印章类经典版式，三分构图更具视觉张力，随机偏移则需要纠正。',
      params: [
        { name: 'plan', type: 'object', required: true, desc: '方案对象 {elements}' }
      ],
      source: '自研（居中/三分构图规范）',
      run: function (args) {
        const els = (args.plan || {}).elements || [];
        const CW = 600, CH = 600;
        const main = els.filter(el => el.visible !== false && !['ring', 'deco-bar'].includes(el.iconId));
        if (!main.length) return { pass: true, note: '无可见主体元素' };
        let sx = 0, sy = 0, n = 0;
        for (const el of main) {
          const b = elBox(el);
          sx += b.x + b.w / 2; sy += b.y + b.h / 2; n++;
        }
        const cx = sx / n, cy = sy / n;
        const dc = Math.hypot(cx - CW / 2, cy - CH / 2);
        const xs = [CW / 3, CW * 2 / 3], ys = [CH / 3, CH * 2 / 3];
        let dt = Infinity;
        for (const gx of xs) for (const gy of ys) dt = Math.min(dt, Math.hypot(cx - gx, cy - gy));
        const type = dc < 60 ? '居中构图（经典稳健，适合徽章/印章版式）'
          : (dt < 60 ? '三分构图（主体落在分割线交点，视觉有张力）' : '偏移构图（主体既不在中心也不在分割点）');
        const pass = dc < 60 || dt < 60;
        return {
          pass, type,
          centerOffset: Math.round(dc), thirdsOffset: Math.round(dt),
          centerX: Math.round(cx), centerY: Math.round(cy),
          verdict: pass ? '构图位置合理：' + type : '构图位置偏散：' + type,
          suggest: pass ? '无需调整' : '建议把主体重心移回画布中心或三分线交点附近，避免随意偏移'
        };
      },
      test: function () {
        const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '构图测试' });
        return this.run({ plan });
      }
    },
    {
      id: 'circle-crop-safety',
      name: '圆形裁切安全区',
      category: 'layout',
      emoji: '⭕',
      scene: '头像/贴纸/印章等圆形裁切场景的构图安全检查',
      summary: '以画布内切圆为裁切边界，检查各元素包围盒是否落在圆内：越界的元素在圆形裁切（头像、印章、贴纸）时会被切边，输出越界清单与缩放建议。',
      params: [
        { name: 'plan', type: 'object', required: true, desc: '方案对象 {elements}' }
      ],
      source: '自研（圆形裁切安全区规范）',
      run: function (args) {
        const els = (args.plan || {}).elements || [];
        const CW = 600, CH = 600;
        const cx = CW / 2, cy = CH / 2, r = CW / 2;
        const vis = els.filter(el => el.visible !== false);
        if (!vis.length) return { pass: true, note: '无可见元素' };
        const risky = [];
        let maxD = 0;
        for (const el of vis) {
          const b = elBox(el);
          const corners = [[b.x, b.y], [b.x + b.w, b.y], [b.x, b.y + b.h], [b.x + b.w, b.y + b.h]];
          let d = 0;
          for (const [px, py] of corners) d = Math.max(d, Math.hypot(px - cx, py - cy));
          maxD = Math.max(maxD, d);
          if (d > r) risky.push({ name: el.text || el.iconId || '元素', maxDist: Math.round(d) });
        }
        const pass = risky.length === 0;
        return {
          pass, risky, radius: r, maxDist: Math.round(maxD),
          verdict: pass ? '所有元素均在内切圆内，圆形裁切安全' : risky.length + ' 个元素超出内切圆（' + risky.map(x => x.name).join('、') + '），圆形裁切时会被切边',
          suggest: pass ? '无需调整' : '建议缩小越界元素或整体向圆心内缩 ' + Math.max(10, Math.round(maxD - r)) + 'px，保证圆形裁切后主体完整'
        };
      },
      test: function () {
        const plan = HGB_Generator.generateVariant({ industry: HGB_Industries[0], brand: '圆裁测试' });
        const edge = { plan: { elements: [{ type: 'icon', iconId: 'x', x: 585, y: 300, w: 30, h: 30 }] } };
        return { generated: this.run({ plan }).pass !== undefined, edge: this.run(edge).risky.length };
      }
    }
  ]);
})();