import type { QualityComponentDefinition } from '../core/types';

import { escapeHtml } from '../core/html';
import { QUALITY_ICONS } from '../core/icons';
import { QUALITY_CATEGORY } from '../core/types';

/** 级别 → 字号，各级别只给一个克制的视觉层次 */
const LEVEL_FONT_SIZE: Record<number, string> = {
  1: '24px',
  2: '20px',
  3: '16px',
  4: '14px',
};

export const headingDefinition: QualityComponentDefinition = {
  type: 'Heading',
  name: 'heading',
  label: '标题',
  category: QUALITY_CATEGORY.BASIC,
  icon: QUALITY_ICONS.heading,
  aiHint: '正文里的分节小标题（如「检验结果」「质量评定」）。文档最顶部的报告标题不要用我，用 ReportHeader。',
  contentKey: 'text',
  defaults: { text: '报告标题', level: 2, align: 'center' },
  propertySchema: [
    {
      key: 'text',
      label: '标题文字',
      type: 'string',
      defaultValue: '报告标题',
      required: true,
      bindable: true,
    },
    {
      key: 'level',
      label: '标题级别',
      type: 'enum',
      defaultValue: 2,
      options: [
        { label: '一级（最大）', value: 1 },
        { label: '二级', value: 2 },
        { label: '三级', value: 3 },
        { label: '四级（最小）', value: 4 },
      ],
    },
    {
      key: 'align',
      label: '对齐方式',
      type: 'enum',
      defaultValue: 'center',
      options: [
        { label: '左对齐', value: 'left' },
        { label: '居中', value: 'center' },
        { label: '右对齐', value: 'right' },
      ],
    },
  ],
  dataSchema: [
    { key: 'text', label: '标题文字', type: 'string', bindable: true },
  ],
  buildContent: (properties) => {
    const level = Number(properties.level ?? 2);
    return {
      tagName: `h${level}`,
      content: escapeHtml(properties.text),
      style: {
        margin: '0 0 8px',
        'font-size': LEVEL_FONT_SIZE[level] ?? LEVEL_FONT_SIZE[2]!,
        'font-weight': '600',
        'text-align': String(properties.align ?? 'center'),
      },
    };
  },
};