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

import { QUALITY_REPEAT_ATTR, QUALITY_REPEAT_ROW_ATTR } from '../core/attrs';
import { parseColumnSpec, parseHeaderSpans } from '../core/column-spec';
import { cssStyle, escapeHtml } from '../core/html';
import { QUALITY_ICONS } from '../core/icons';
import { QUALITY_CATEGORY } from '../core/types';

/** 检验项数组在报告上下文中的默认路径 */
const DEFAULT_ITEMS_PATH = 'inspectionItems';

/** 循环变量名，行内占位符写作 {{item.xxx}} */
const LOOP_VAR = 'item';

/** 渲染期由重复容器注入的行号变量，写作 {{index}}，从 1 开始 */
const INDEX_VAR = 'index';

const CELL_BORDER = '1px solid #d9d9d9';

/** 单元格静态样式（合并格与普通格一致，差别只在属性） */
const CELL_STYLE = cssStyle({ border: CELL_BORDER, padding: '6px 8px' });

/**
 * 自定列时的单元格样式，比默认列多一条允许长串中途折行。
 * <p>
 * 默认列带手工调过的宽度（序号 48px、检测要求 30%、实测值 26%……），宽度由这些声明说了算；
 * 自定列一个宽度都没有，整张表的列宽就只能由各自的**最小内容宽度**倒推。而报告里的值是
 * `{{item.standardValue}}` 这种不含空格的长串，最小内容宽度就是整串的长度——几列加起来
 * 轻易超过 A4 正文宽度，浏览器只能把表格撑出纸张，最末一列被挤成十几个像素的竖条。
 * <p>
 * `anywhere` 会参与最小内容宽度的计算（`break-word` 不会），列宽因此不再被长串绑架：
 * 值在**出件时**本来就短（「烘箱干燥法」「13.2」），折行极少触发，产物与设计器所见一致。
 * <p>
 * 只在自定列时加：默认列的宽度声明已经定住了版面，再叠一条折行反而让「检验项目」「子项」
 * 这类没写宽度的列被挤到 30 余像素、行高翻几倍——实测过，不加比加好。
 */
const CUSTOM_CELL_STYLE = cssStyle({
  border: CELL_BORDER,
  padding: '6px 8px',
  'overflow-wrap': 'anywhere',
});

/**
 * 组名格的合并属性。
 * <p>
 * 只能写成「属性」而不能写进行内 style：行内样式会被 GrapesJS 解析成节点 style 对象，
 * 而渲染期对 style 对象不跑绑定（renderStyle），绑定串会被整条丢掉；
 * 属性则原样保留，两侧渲染器都会把 {{}} 解成值。
 * <p>
 * hidden 用字符串而非布尔：这个属性靠「在不在」起作用（hidden="false" 照样隐藏），
 * 所以只有「空串 = 不输出该属性 = 可见」这一个可判定的形态。
 * 两侧渲染器都跳过求值后为空串的属性（render.ts / HtmlRenderer.java），行为逐字一致。
 */
const GROUP_CELL_ATTRS =
  ` rowspan="{{${LOOP_VAR}.group.span}}" hidden="{{${LOOP_VAR}.group.hidden}}"`;

interface ColumnSpec {
  /** 表头文字 */
  label: string;
  /** 行内取值表达式 */
  expr: string;
  /** 写在 <td> 上的额外属性（绑定） */
  attrs?: string;
  /** 对应的显示开关属性名，空串表示不可隐藏 */
  toggle: string;
  width?: string;
}

const COLUMNS: ColumnSpec[] = [
  { label: '序号', expr: `{{${INDEX_VAR}}}`, toggle: 'showIndex', width: '48px' },
  { label: '检验项目', expr: `{{${LOOP_VAR}.itemName}}`, attrs: GROUP_CELL_ATTRS, toggle: '' },
  { label: '子项', expr: `{{${LOOP_VAR}.group.childName}}`, toggle: '' },
  {
    label: '检测要求',
    expr: `{{${LOOP_VAR}.requirement}}`,
    toggle: 'showRequirement',
    width: '30%',
  },
  {
    label: '实测值',
    expr: `{{${LOOP_VAR}.actualValue}}`,
    toggle: 'showActual',
    width: '26%',
  },
  { label: '单位', expr: `{{${LOOP_VAR}.unit}}`, toggle: 'showUnit', width: '60px' },
  { label: '判定', expr: `{{${LOOP_VAR}.resultText}}`, toggle: 'showResult', width: '72px' },
];

/** 真正参与出表的一列：默认列与自定义列都收敛成这个形状再拼 HTML */
interface RenderColumn {
  label: string;
  expr: string;
  /** 是不是纵向合并跨住整组的组名列 */
  merge: boolean;
  width?: string;
}

/** 按显示开关挑出默认列 */
function defaultColumns(properties: QualityProps): RenderColumn[] {
  return COLUMNS.filter(
    (column) => column.toggle === '' || properties[column.toggle] !== false,
  ).map((column) => ({
    label: column.label,
    expr: column.expr,
    merge: Boolean(column.attrs),
    width: column.width,
  }));
}

/**
 * 出表用的列：填了 columns 就整表照它来，否则用默认列。
 * <p>
 * 自定义列时**不再看各显示开关**：columns 已经把列与顺序说全了，
 * 再叠一层「序号被隐藏了但用户又写回来了」的开关判断，只会让两边打架。
 *
 * @return custom 为真表示这张表照 columns 来（拿不到任何宽度声明，单元格要允许折行）
 */
function effectiveColumns(properties: QualityProps): {
  columns: RenderColumn[];
  custom: boolean;
} {
  const custom = parseColumnSpec(textOf(properties.columns));
  return custom.items.length > 0
    ? { columns: custom.items, custom: true }
    : { columns: defaultColumns(properties), custom: false };
}

function textOf(value: unknown): string {
  return String(value ?? '').trim();
}

/** 上层的出表方案：上层那一行的单元格，以及下层要跳过哪些列 */
interface HeaderPlan {
  cells: string;
  covered: Set<number>;
}

/**
 * 规划上层表头。
 * <p>
 * 表头里的格子有两种形态，都从同一串 `标题^跨列数` 里认出来：
 * <ul>
 *   <li>分组标题：横向跨住下面若干列，如 `检验结果^5`；</li>
 *   <li>纵向合并格：某一列自己既是列名又是上格，原件里是一格跨住上下两层
 *       （提取文本里表现为下层表头那一格写着「↑同上」），如 `结论^1`。
 *       认出它靠「该段标题与它正下方那一列的列标题一字不差、且只跨 1 列」。</li>
 * </ul>
 * 纵向合并格必须用 rowspan 出、并且下层不再重复出这一格；否则「结论」二字会在上下两层各印一次。
 */
function planHeader(properties: QualityProps, columns: RenderColumn[]): HeaderPlan {
  const parsed = parseHeaderSpans(textOf(properties.headerSpans), columns.length);
  if (parsed.items.length === 0 || parsed.errors.length > 0) {
    // 没填或不合法：不出上层，表头退回单层
    return { cells: '', covered: new Set() };
  }
  const covered = new Set<number>();
  let lowerIndex = 0;
  const cells = parsed.items
    .map((span) => {
      const start = lowerIndex;
      lowerIndex += span.span;
      const vertical = span.span === 1 && columns[start]?.label === span.label;
      if (vertical) {
        covered.add(start);
      }
      const size = vertical ? 'rowspan="2"' : `colspan="${span.span}"`;
      return `<th ${size} style="${cssStyle({
        border: CELL_BORDER,
        padding: '6px 8px',
        background: '#fafafa',
        'font-weight': 600,
      })}">${escapeHtml(span.label)}</th>`;
    })
    .join('');
  return { cells, covered };
}

export const groupedQualityTableDefinition: QualityComponentDefinition = {
  type: 'GroupedQualityTable',
  name: 'groupedQualityTable',
  label: '分组检验项表',
  category: QUALITY_CATEGORY.INSPECTION,
  icon: QUALITY_ICONS.groupedTable,
  aiHint:
    '有分组层级的检验项表格：组名纵向合并、组内子项逐行展开（序号/检验项目/子项/检测要求/实测值/单位/判定）。' +
    '检验单里存在「一个检验项目下挂若干子项」这种两层结构时用它；检验项是平铺一层、没有父子关系时用 QualityTable。' +
    '原件这张表的**列**比上面列出的多（如还有「检测方法」「标准值」「结论」「备注」）时不要改用别的组件，' +
    '把全部列写进我的 columns 属性；表头分成上下两层时，把上面那一层写进 headerSpans。' +
    '某一列在原件里是「一格纵向合并跨住上下两层表头」（表现为下层表头那一格写着「↑同上」、' +
    '或该列名上下各出现一次）时，它不算任何分组标题的下属列，同样写进 headerSpans 但标题与列标题保持一致，' +
    '我会把它合成跨两行的一格。',
  defaults: {
    title: '检验项目',
    itemsPath: DEFAULT_ITEMS_PATH,
    showIndex: true,
    showRequirement: true,
    showActual: true,
    showUnit: true,
    showResult: true,
  },
  propertySchema: [
    { key: 'title', label: '表格标题', type: 'string', defaultValue: '检验项目' },
    {
      key: 'itemsPath',
      label: '检验项数据源',
      type: 'string',
      defaultValue: DEFAULT_ITEMS_PATH,
      required: true,
      bindable: true,
      // 渲染期按这个路径取数组逐行生成，必须是裸路径，不能写成 {{...}}
      bindAs: 'path',
      tip: '报告上下文中检验项目数组的路径，渲染时按它逐行生成。分组信息随每一项的下发，不需要另外指定',
    },
    { key: 'showIndex', label: '显示序号', type: 'boolean', defaultValue: true },
    { key: 'showRequirement', label: '显示检测要求', type: 'boolean', defaultValue: true },
    { key: 'showActual', label: '显示实测值', type: 'boolean', defaultValue: true },
    { key: 'showUnit', label: '显示单位', type: 'boolean', defaultValue: true },
    { key: 'showResult', label: '显示判定', type: 'boolean', defaultValue: true },
    {
      key: 'columns',
      label: '列定义（覆盖默认列）',
      type: 'text',
      tip:
        '留空则用上面的默认列。格式：列标题=绑定表达式，多列用 | 分隔，' +
        '如 序号={{index}}|检验项目={{item.itemName}}|检测方法={{item.checkMethod}}|实测值={{item.actualValue}}。' +
        '标题前加 # 表示该列纵向合并跨住整组（放组名的那一列）。' +
        '填了它整表就按它来，上面的显示开关不再生效',
    },
    {
      key: 'headerSpans',
      label: '表头跨列（两级表头才填）',
      type: 'text',
      tip:
        '只有表头分上下两层时才填，写的是上面那一层：每个单元格写作 标题^跨越列数，多段用 | 分隔，' +
        '如 检验结果^5|结论^1。下面那一层由列标题自动拼出，不要重复写。' +
        '各段跨列数之和必须等于列数。' +
        '某一列自己既是列名又是上格（原件里是一格纵向合并跨住上下两层）时，仍照写一段、跨列数写 1，' +
        '但该段标题要与这一列的列标题写成完全一样的字，报告会合出一格跨两行，不会上下各印一遍',
    },
  ],
  dataSchema: [
    { key: DEFAULT_ITEMS_PATH, label: '检验项目列表', type: 'string', bindable: true },
    { key: INDEX_VAR, label: '行序号', type: 'number', bindable: true },
    { key: `${LOOP_VAR}.itemName`, label: '检验项目名称', type: 'string', bindable: true },
    { key: `${LOOP_VAR}.group.childName`, label: '子项名称', type: 'string', bindable: true },
    { key: `${LOOP_VAR}.group.span`, label: '组名合并行数', type: 'number', bindable: true },
    { key: `${LOOP_VAR}.group.hidden`, label: '子项行隐藏合并格', type: 'string', bindable: true },
    { key: `${LOOP_VAR}.requirement`, label: '检测要求 / 组公式', type: 'string', bindable: true },
    { key: `${LOOP_VAR}.checkMethod`, label: '检测方法', type: 'string', bindable: true },
    { key: `${LOOP_VAR}.actualValue`, label: '实测值', type: 'string', bindable: true },
    { key: `${LOOP_VAR}.unit`, label: '单位', type: 'string', bindable: true },
    { key: `${LOOP_VAR}.resultText`, label: '判定结果', type: 'string', bindable: true },
  ],
  buildContent: (properties) => {
    const { columns, custom } = effectiveColumns(properties);
    const cellStyle = custom ? CUSTOM_CELL_STYLE : CELL_STYLE;
    const header = planHeader(properties, columns);
    const head = columns
      .map((column, index) =>
        header.covered.has(index)
          ? ''
          : `<th style="${cssStyle({
              border: CELL_BORDER,
              padding: '6px 8px',
              background: '#fafafa',
              'font-weight': 600,
              width: column.width,
            })}">${escapeHtml(column.label)}</th>`,
      )
      .join('');
    const row = columns
      .map(
        (column) =>
          `<td${column.merge ? GROUP_CELL_ATTRS : ''} style="${cellStyle}">${escapeHtml(column.expr)}</td>`,
      )
      .join('');
    const rawTitle = String(properties.title ?? '').trim();
    const heading = rawTitle
      ? `<div style="${cssStyle({ 'font-size': '13px', 'font-weight': 600, margin: '0 0 4px' })}">${escapeHtml(rawTitle)}</div>`
      : '';
    const itemsPath = String(properties.itemsPath ?? DEFAULT_ITEMS_PATH).trim() || DEFAULT_ITEMS_PATH;
    const table =
      `<table style="${cssStyle({ width: '100%', 'border-collapse': 'collapse', 'font-size': '12px' })}">` +
      `<thead>${header.cells ? `<tr>${header.cells}</tr>` : ''}<tr>${head}</tr></thead>` +
      // 渲染期按 data-qc-repeat 指向的数组复制 data-qc-repeat-row 所在的行；
      // 组头行与组内子项行在这套结构里都是数组里的一项，合并靠组名格自带的 rowspan
      `<tbody ${QUALITY_REPEAT_ATTR}="${escapeHtml(itemsPath)}">` +
      `<tr ${QUALITY_REPEAT_ROW_ATTR}="${LOOP_VAR}">${row}</tr>` +
      `</tbody></table>`;
    return {
      tagName: 'div',
      components: heading + table,
      style: { margin: '0 0 10px' },
    };
  },
  validate: (properties) => {
    const errors: string[] = [];
    const path = textOf(properties.itemsPath);
    if (!path) {
      errors.push('分组检验项表的「检验项数据源」不能为空，渲染时无法确定生成哪些行');
    }

    const parsed = parseColumnSpec(textOf(properties.columns));
    errors.push(...parsed.errors);
    const customColumns = parsed.items.length > 0;

    // 显示开关只在用默认列时说了算：填了 columns 整表就按 columns 来，
    // 「隐藏了检测要求却保留判定」在这里不再成立，报了就是误报
    if (!customColumns && properties.showRequirement === false && properties.showResult === true) {
      errors.push(
        '分组检验项表隐藏了「检测要求」却保留「判定」列，判定依据将不可见，请一并隐藏判定或恢复检测要求',
      );
    }

    const headerSpec = textOf(properties.headerSpans);
    // 跨列数的合计校验要先知道实际列数，而列定义本身有错时列数不可信：
    // 此时报「合计 N，实际列数 M」会把用户往错误的方向带，先只报列定义的错
    if (headerSpec && parsed.errors.length === 0) {
      const columnCount = (customColumns ? parsed.items : defaultColumns(properties)).length;
      errors.push(...parseHeaderSpans(headerSpec, columnCount).errors);
    }
    return errors;
  },
};