/**
 * 文章编辑器样式模板数据
 * 所有 HTML 片段使用内联样式，通过 wangEditor 自定义 styled-block 模块保留样式。
 * 模板中使用 {{primary}} / {{primaryLight}} 占位符，由 applyTheme() 替换为实际颜色值。
 */

export interface StyleTemplate {
  id: string;
  name: string;
  category: 'heading' | 'content' | 'block';
  preview: string;
  html: string;
}

export interface ColorTheme {
  id: string;
  name: string;
  primary: string;
  primaryLight: string;
}

export const COLOR_THEMES: ColorTheme[] = [
  { id: 'green', name: '清新绿', primary: '#16a34a', primaryLight: '#dcfce7' },
  { id: 'blue', name: '专业蓝', primary: '#2563eb', primaryLight: '#dbeafe' },
  { id: 'red', name: '暖橘红', primary: '#C4623A', primaryLight: '#F0DDD4' },
  { id: 'purple', name: '雅致紫', primary: '#7c3aed', primaryLight: '#ede9fe' },
  { id: 'amber', name: '琥珀金', primary: '#d97706', primaryLight: '#fef3c7' },
];

const W = 'data-w-e-type="styled-block"';

// ═══════════════════════════════════════
//  标题样式 (6 种)
// ═══════════════════════════════════════

export const HEADING_TEMPLATES: StyleTemplate[] = [
  {
    id: 'heading-classic',
    name: '经典 · 左边框',
    category: 'heading',
    preview: '▎左边框标题',
    html: `<div ${W} style="border-left: 4px solid {{primary}}; padding-left: 12px; font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 24px 0 12px;">标题文本</div>`,
  },
  {
    id: 'heading-underline',
    name: '简约 · 下划线',
    category: 'heading',
    preview: '标题 ──────',
    html: `<div ${W} style="border-bottom: 2px solid {{primary}}; padding-bottom: 8px; font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 24px 0 12px; display: inline-block;">标题文本</div>`,
  },
  {
    id: 'heading-badge',
    name: '圆标 · 标签式',
    category: 'heading',
    preview: '■ 标签式标题',
    html: `<div ${W} style="display: inline-block; background: {{primaryLight}}; color: {{primary}}; padding: 4px 14px; border-radius: 4px; font-size: 18px; font-weight: 700; margin: 24px 0 12px;">标题文本</div>`,
  },
  {
    id: 'heading-centered',
    name: '居中标题',
    category: 'heading',
    preview: '── 居中标题 ──',
    html: `<div ${W} style="text-align: center; font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 28px 0 12px;">标题文本</div>`,
  },
  {
    id: 'heading-double-line',
    name: '双线 · 上下框',
    category: 'heading',
    preview: '───────\n标题\n───────',
    html: `<div ${W} style="text-align: center; margin: 24px 0 12px; padding: 10px 0; border-top: 2px solid {{primary}}; border-bottom: 2px solid {{primary}}; font-size: 20px; font-weight: 700; color: #1a1a1a;">标题文本</div>`,
  },
  {
    id: 'heading-accent-bar',
    name: '色带 · 顶部色条',
    category: 'heading',
    preview: '━━━\n标题文本',
    html: `<div ${W} style="margin: 24px 0 12px; padding: 12px 0 0; border-top: 4px solid {{primary}}; font-size: 20px; font-weight: 700; color: #1a1a1a;">标题文本</div>`,
  },
];

// ═══════════════════════════════════════
//  内容模板 (13 种)
// ═══════════════════════════════════════

export const CONTENT_TEMPLATES: StyleTemplate[] = [
  {
    id: 'blockquote',
    name: '引用框',
    category: 'content',
    preview: '▎引用文字...',
    html: `<div ${W} style="border-left: 3px solid {{primary}}; padding: 12px 16px; margin: 16px 0; background: #f9fafb; border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.8; color: #5a554f; font-style: italic;">引用内容请在此处编辑</div>`,
  },
  {
    id: 'tip-warning',
    name: '提示框 · 警告',
    category: 'content',
    preview: '⚠ 注意事项',
    html: `<div ${W} style="background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 14px 16px; margin: 16px 0; font-size: 15px; line-height: 1.8; color: #92400e;"><strong>⚠ 注意事项：</strong>请在此处编辑警告内容。</div>`,
  },
  {
    id: 'tip-info',
    name: '提示框 · 信息',
    category: 'content',
    preview: 'ℹ 补充说明',
    html: `<div ${W} style="background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 14px 16px; margin: 16px 0; font-size: 15px; line-height: 1.8; color: #1e40af;"><strong>ℹ 补充说明：</strong>请在此处编辑信息内容。</div>`,
  },
  {
    id: 'tip-success',
    name: '提示框 · 正确',
    category: 'content',
    preview: '✓ 正确做法',
    html: `<div ${W} style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 14px 16px; margin: 16px 0; font-size: 15px; line-height: 1.8; color: #166534;"><strong>✓ 正确做法：</strong>请在此处编辑推荐内容。</div>`,
  },
  {
    id: 'tip-danger',
    name: '提示框 · 危险',
    category: 'content',
    preview: '✕ 严禁事项',
    html: `<div ${W} style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 14px 16px; margin: 16px 0; font-size: 15px; line-height: 1.8; color: #991b1b;"><strong>✕ 严禁事项：</strong>请在此处编辑危险警告内容。</div>`,
  },
  {
    id: 'tip-primary',
    name: '提示框 · 强调',
    category: 'content',
    preview: '★ 重点强调',
    html: `<div ${W} style="background: {{primaryLight}}; border: 1px solid {{primary}}; border-radius: 8px; padding: 14px 16px; margin: 16px 0; font-size: 15px; line-height: 1.8; color: #1a1a1a;"><strong style="color: {{primary}};">★ 重点强调：</strong>请在此处编辑重点内容。</div>`,
  },
  {
    id: 'list-ordered',
    name: '有序列表',
    category: 'content',
    preview: '① ② ③',
    html: `<div ${W} style="padding-left: 20px; margin: 16px 0; font-size: 16px; line-height: 2; color: #3a3a3c;"><div style="position: relative; padding-left: 8px; margin-bottom: 4px;"><span style="position: absolute; left: -20px; color: {{primary}}; font-weight: 600;">1.</span>第一项内容</div><div style="position: relative; padding-left: 8px; margin-bottom: 4px;"><span style="position: absolute; left: -20px; color: {{primary}}; font-weight: 600;">2.</span>第二项内容</div><div style="position: relative; padding-left: 8px; margin-bottom: 4px;"><span style="position: absolute; left: -20px; color: {{primary}}; font-weight: 600;">3.</span>第三项内容</div></div>`,
  },
  {
    id: 'list-unordered',
    name: '无序列表',
    category: 'content',
    preview: '• • •',
    html: `<div ${W} style="padding-left: 20px; margin: 16px 0; font-size: 16px; line-height: 2; color: #3a3a3c;"><div style="position: relative; padding-left: 8px; margin-bottom: 4px;"><span style="position: absolute; left: -14px; color: {{primary}};">●</span>第一项内容</div><div style="position: relative; padding-left: 8px; margin-bottom: 4px;"><span style="position: absolute; left: -14px; color: {{primary}};">●</span>第二项内容</div><div style="position: relative; padding-left: 8px; margin-bottom: 4px;"><span style="position: absolute; left: -14px; color: {{primary}};">●</span>第三项内容</div></div>`,
  },
  {
    id: 'card-image-text',
    name: '图文卡片',
    category: 'content',
    preview: '[图] 文字说明',
    html: `<div ${W} style="display: flex; gap: 12px; margin: 16px 0; padding: 12px; background: #f9fafb; border-radius: 8px; align-items: center;"><div style="width: 100px; height: 80px; background: #e5e7eb; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 12px; flex-shrink: 0;">图片</div><div style="flex: 1; font-size: 14px; line-height: 1.8; color: #3a3a3c;">图文卡片的文字描述内容请在此处编辑。</div></div>`,
  },
  {
    id: 'card-data',
    name: '数据卡片',
    category: 'content',
    preview: '血压 120/80',
    html: `<div ${W} style="display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap;"><div style="flex: 1; min-width: 120px; background: {{primaryLight}}; border-radius: 8px; padding: 14px; text-align: center;"><div style="font-size: 24px; font-weight: 700; color: {{primary}};">120/80</div><div style="font-size: 13px; color: #5a554f; margin-top: 4px;">血压 (mmHg)</div></div><div style="flex: 1; min-width: 120px; background: #f3f4f6; border-radius: 8px; padding: 14px; text-align: center;"><div style="font-size: 24px; font-weight: 700; color: #1a1a1a;">72</div><div style="font-size: 13px; color: #5a554f; margin-top: 4px;">心率 (bpm)</div></div></div>`,
  },
  {
    id: 'timeline',
    name: '时间线',
    category: 'content',
    preview: '●── 第一步\n●── 第二步',
    html: `<div ${W} style="margin: 16px 0; padding-left: 20px; border-left: 2px solid {{primary}};"><div style="position: relative; padding: 0 0 20px 16px;"><div style="position: absolute; left: -27px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: {{primary}};"></div><div style="font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px;">2024年1月</div><div style="font-size: 14px; color: #5a554f; line-height: 1.6;">第一阶段内容描述</div></div><div style="position: relative; padding: 0 0 20px 16px;"><div style="position: absolute; left: -27px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: {{primary}};"></div><div style="font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px;">2024年3月</div><div style="font-size: 14px; color: #5a554f; line-height: 1.6;">第二阶段内容描述</div></div><div style="position: relative; padding: 0 0 0 16px;"><div style="position: absolute; left: -27px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: {{primary}};"></div><div style="font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px;">2024年6月</div><div style="font-size: 14px; color: #5a554f; line-height: 1.6;">第三阶段内容描述</div></div></div>`,
  },
  {
    id: 'steps',
    name: '步骤流程',
    category: 'content',
    preview: '➊ → ➋ → ➌',
    html: `<div ${W} style="margin: 16px 0;"><div style="display: flex; align-items: flex-start; margin-bottom: 16px;"><div style="width: 28px; height: 28px; background: {{primary}}; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; margin-right: 12px;">1</div><div style="flex: 1; padding-top: 4px;"><div style="font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px;">第一步标题</div><div style="font-size: 14px; color: #5a554f; line-height: 1.6;">步骤一的详细说明内容</div></div></div><div style="display: flex; align-items: flex-start; margin-bottom: 16px;"><div style="width: 28px; height: 28px; background: {{primary}}; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; margin-right: 12px;">2</div><div style="flex: 1; padding-top: 4px;"><div style="font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px;">第二步标题</div><div style="font-size: 14px; color: #5a554f; line-height: 1.6;">步骤二的详细说明内容</div></div></div><div style="display: flex; align-items: flex-start;"><div style="width: 28px; height: 28px; background: {{primary}}; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; margin-right: 12px;">3</div><div style="flex: 1; padding-top: 4px;"><div style="font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px;">第三步标题</div><div style="font-size: 14px; color: #5a554f; line-height: 1.6;">步骤三的详细说明内容</div></div></div></div>`,
  },
  {
    id: 'comparison',
    name: '对比卡片',
    category: 'content',
    preview: '✓ 推荐 ✕ 避免',
    html: `<div ${W} style="display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap;"><div style="flex: 1; min-width: 140px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 14px;"><div style="font-size: 15px; font-weight: 700; color: #166534; margin-bottom: 8px;">✓ 推荐做法</div><div style="font-size: 14px; color: #166534; line-height: 1.8;">推荐内容第一项<br/>推荐内容第二项<br/>推荐内容第三项</div></div><div style="flex: 1; min-width: 140px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 14px;"><div style="font-size: 15px; font-weight: 700; color: #991b1b; margin-bottom: 8px;">✕ 应该避免</div><div style="font-size: 14px; color: #991b1b; line-height: 1.8;">避免内容第一项<br/>避免内容第二项<br/>避免内容第三项</div></div></div>`,
  },
  {
    id: 'faq',
    name: '问答卡片',
    category: 'content',
    preview: 'Q: 问题\nA: 回答',
    html: `<div ${W} style="margin: 16px 0; background: #f9fafb; border-radius: 8px; overflow: hidden;"><div style="background: {{primaryLight}}; padding: 10px 16px; font-size: 15px; font-weight: 600; color: {{primary}};">Q：这里填写常见问题？</div><div style="padding: 12px 16px; font-size: 14px; line-height: 1.8; color: #3a3a3c;">A：这里填写问题的详细回答内容，帮助读者理解相关知识。</div></div>`,
  },
  {
    id: 'highlight-text',
    name: '重点高亮',
    category: 'content',
    preview: '▸ 高亮重点内容',
    html: `<div ${W} style="margin: 16px 0; padding: 12px 16px; background: {{primaryLight}}; border-radius: 8px; font-size: 15px; line-height: 1.8; color: #1a1a1a; border-left: 4px solid {{primary}};"><strong>重点：</strong>这里是需要高亮强调的关键内容。</div>`,
  },
  {
    id: 'key-value',
    name: '键值对列表',
    category: 'content',
    preview: '指标: 数值',
    html: `<div ${W} style="margin: 16px 0; background: #f9fafb; border-radius: 8px; overflow: hidden; font-size: 14px;"><div style="display: flex; padding: 10px 16px; border-bottom: 1px solid #e5e7eb;"><div style="width: 100px; color: #5a554f; flex-shrink: 0;">检查项目</div><div style="flex: 1; font-weight: 600; color: #1a1a1a;">检测结果</div></div><div style="display: flex; padding: 10px 16px; border-bottom: 1px solid #e5e7eb; background: #fff;"><div style="width: 100px; color: #5a554f; flex-shrink: 0;">血红蛋白</div><div style="flex: 1; font-weight: 600; color: {{primary}};">110 g/L</div></div><div style="display: flex; padding: 10px 16px; border-bottom: 1px solid #e5e7eb;"><div style="width: 100px; color: #5a554f; flex-shrink: 0;">血清白蛋白</div><div style="flex: 1; font-weight: 600; color: {{primary}};">38 g/L</div></div><div style="display: flex; padding: 10px 16px; background: #fff;"><div style="width: 100px; color: #5a554f; flex-shrink: 0;">血钾</div><div style="flex: 1; font-weight: 600; color: #1a1a1a;">4.2 mmol/L</div></div></div>`,
  },
];

// ═══════════════════════════════════════
//  区块组件 (6 种)
// ═══════════════════════════════════════

export const BLOCK_TEMPLATES: StyleTemplate[] = [
  {
    id: 'divider',
    name: '分割线 · 虚线',
    category: 'block',
    preview: '─ ─ ─ ─',
    html: `<div ${W} style="border: none; border-top: 1px dashed #d1d5db; margin: 24px 0; height: 0;"></div>`,
  },
  {
    id: 'divider-gradient',
    name: '分割线 · 渐变',
    category: 'block',
    preview: '━━━━━━━━',
    html: `<div ${W} style="border: none; height: 2px; margin: 24px 0; background: linear-gradient(90deg, transparent, {{primary}}, transparent);"></div>`,
  },
  {
    id: 'section-header',
    name: '章节编号',
    category: 'block',
    preview: '§ 带编号章节',
    html: `<div ${W} style="margin: 24px 0 12px; display: flex; align-items: center; gap: 10px;"><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: {{primary}}; color: #fff; border-radius: 50%; font-size: 14px; font-weight: 700; flex-shrink: 0;">1</span><span style="font-size: 18px; font-weight: 700; color: #1a1a1a;">章节标题</span></div>`,
  },
  {
    id: 'table',
    name: '数据表格',
    category: 'block',
    preview: '⊞ 3×2 表格',
    html: `<div ${W} style="display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; margin: 16px 0; font-size: 14px;"><div style="background: {{primaryLight}}; padding: 10px 12px; font-weight: 600; color: {{primary}}; border-bottom: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;">项目</div><div style="background: {{primaryLight}}; padding: 10px 12px; font-weight: 600; color: {{primary}}; border-bottom: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;">数值</div><div style="background: {{primaryLight}}; padding: 10px 12px; font-weight: 600; color: {{primary}}; border-bottom: 1px solid #e5e7eb;">备注</div><div style="padding: 10px 12px; border-bottom: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;">收缩压</div><div style="padding: 10px 12px; border-bottom: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;">120 mmHg</div><div style="padding: 10px 12px; border-bottom: 1px solid #e5e7eb;">正常</div><div style="background: #f9fafb; padding: 10px 12px; border-right: 1px solid #e5e7eb;">舒张压</div><div style="background: #f9fafb; padding: 10px 12px; border-right: 1px solid #e5e7eb;">80 mmHg</div><div style="background: #f9fafb; padding: 10px 12px;">正常</div></div>`,
  },
  {
    id: 'progress',
    name: '进度指示',
    category: 'block',
    preview: '█████░░░ 65%',
    html: `<div ${W} style="margin: 16px 0;"><div style="display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px;"><span style="color: #1a1a1a; font-weight: 600;">治疗进度</span><span style="color: {{primary}}; font-weight: 700;">65%</span></div><div style="background: #e5e7eb; border-radius: 99px; height: 8px; overflow: hidden;"><div style="background: {{primary}}; height: 100%; width: 65%; border-radius: 99px;"></div></div></div>`,
  },
  {
    id: 'quote-card',
    name: '引言卡片',
    category: 'block',
    preview: '「」引用名言',
    html: `<div ${W} style="margin: 20px 0; padding: 20px; background: linear-gradient(135deg, {{primaryLight}}, #f9fafb); border-radius: 12px; position: relative;"><div style="font-size: 36px; color: {{primary}}; opacity: 0.3; line-height: 1; font-family: Georgia, serif;">"</div><div style="font-size: 15px; color: #3a3a3c; line-height: 1.8; margin-top: -8px; font-style: italic;">这里填写引用的名言或重要语句。</div><div style="margin-top: 10px; font-size: 13px; color: #5a554f; font-weight: 500;">—— 作者名</div></div>`,
  },
];

/** 所有模板合并列表 */
export const ALL_TEMPLATES: StyleTemplate[] = [
  ...HEADING_TEMPLATES,
  ...CONTENT_TEMPLATES,
  ...BLOCK_TEMPLATES,
];

/** 将模板 HTML 中的颜色占位符替换为主题实际颜色值 */
export function applyTheme(html: string, theme: ColorTheme): string {
  return html
    .replaceAll('{{primary}}', theme.primary)
    .replaceAll('{{primaryLight}}', theme.primaryLight);
}

/** 根据 ID 查找颜色主题 */
export function getColorTheme(themeId: string): ColorTheme {
  return COLOR_THEMES.find((t) => t.id === themeId) ?? COLOR_THEMES[0];
}