{{/*
  dialog.html — 通用对话框公共组件
  对标 React 版 Dialog.tsx，提供确认 / 提示两种对话框。

  提供两个子模板：
    hp-dialog-html → 放在页面 body 末尾（HTML 结构）
    hp-dialog-js   → 紧跟其后（JS API）

  快捷模板（推荐，一行搞定）：
    hp-dialog      → 同时输出 html + js

  JS API：
    hpConfirm({
      title:       '标题',
      message:     '内容',
      type:        'danger',           // default | danger | warning | success
      confirmText: '确定',             // 可选，默认"确定"
      cancelText:  '取消',             // 可选，默认"取消"
      onConfirm:   function(){ ... }   // 确认回调
    })

    hpAlert({
      title:      '标题',
      message:    '内容',
      type:       'error',             // default | error | warning | success | info
      buttonText: '知道了',            // 可选
      onClose:    function(){ ... }    // 可选
    })

    hpCloseDialog()                    // 手动关闭

  使用示例（任意页面 </body> 前）：
    {{template "hp-dialog"}}
    <script>
      document.getElementById('my-btn').onclick = function() {
        hpConfirm({
          title: '删除帖子',
          message: '确定要删除这篇帖子吗？此操作不可撤销。',
          type: 'danger',
          onConfirm: function() { ... }
        });
      };
    </script>

  建议：在 base.html 的 hp-footer 中统一引入，所有页面自动可用。
*/}}

{{/* ── 快捷入口：HTML + JS 一起输出 ─────────────────────────── */}}
{{define "hp-dialog"}}
{{template "hp-dialog-html"}}
{{template "hp-dialog-js"}}
{{end}}

{{/* ── 对话框 HTML 结构 ──────────────────────────────────────── */}}
{{define "hp-dialog-html"}}
<div id="hp-dialog-overlay" class="dialog-overlay" style="display:none">
  <div class="dialog-backdrop" id="hp-dialog-backdrop"></div>
  <div class="dialog" id="hp-dialog-box">
    <div class="dialog-head">
      <div class="dialog-head-left">
        <span id="hp-dialog-icon"></span>
        <h3 class="dialog-title" id="hp-dialog-title"></h3>
      </div>
      <button class="dialog-close" id="hp-dialog-close-x" title="{{t "common.cancel"}}">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" x2="6" y1="6" y2="18"/><line x1="6" x2="18" y1="6" y2="18"/>
        </svg>
      </button>
    </div>
    <div class="dialog-body">
      <p class="dialog-message" id="hp-dialog-message"></p>
      <div class="dialog-actions" id="hp-dialog-actions"></div>
    </div>
  </div>
</div>
{{end}}

{{/* ── 对话框 JS API ─────────────────────────────────────────── */}}
{{define "hp-dialog-js"}}
<script>
(function(){
  /* ── 内部状态 ─────────────────────────────────────── */
  var _onConfirm = null;
  var _onAlertClose = null;

  var overlay  = document.getElementById('hp-dialog-overlay');
  var backdrop = document.getElementById('hp-dialog-backdrop');
  var closeX   = document.getElementById('hp-dialog-close-x');
  var iconEl   = document.getElementById('hp-dialog-icon');
  var titleEl  = document.getElementById('hp-dialog-title');
  var msgEl    = document.getElementById('hp-dialog-message');
  var actionsEl = document.getElementById('hp-dialog-actions');

  /* ── 图标 SVG（按类型）────────────────────────────── */
  var icons = {
    danger:  '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--color-danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" x2="12" y1="9" y2="13"/><line x1="12" x2="12.01" y1="17" y2="17"/></svg>',
    warning: '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--color-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>',
    success: '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--color-success)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>',
    error:   '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--color-danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>',
    info:    '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'
  };

  /* ── 按钮 class 映射 ─────────────────────────────── */
  var confirmBtnClass = {
    'default': 'btn btn--primary',
    'danger':  'btn btn--solid-danger',
    'warning': 'btn btn--solid-warning',
    'success': 'btn btn--solid-success',
    'error':   'btn btn--solid-danger',
    'info':    'btn btn--primary'
  };

  /* ── 打开 / 关闭 ─────────────────────────────────── */
  function open() {
    overlay.style.display = '';
    document.body.style.overflow = 'hidden';
  }

  function close() {
    overlay.style.display = 'none';
    document.body.style.overflow = '';
    _onConfirm = null;
    _onAlertClose = null;
  }

  /* ── ESC 关闭 ─────────────────────────────────────── */
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && overlay.style.display !== 'none') close();
  });

  backdrop.onclick = close;
  closeX.onclick   = close;

  /* ── hpConfirm ────────────────────────────────────── */
  window.hpConfirm = function(opts) {
    var type = opts.type || 'default';
    var confirmText = opts.confirmText || '{{t "common.confirm"}}';
    var cancelText  = opts.cancelText  || '{{t "common.cancel"}}';

    iconEl.innerHTML = icons[type] || '';
    titleEl.textContent = opts.title || '';
    msgEl.textContent   = opts.message || '';
    _onConfirm = opts.onConfirm || null;

    actionsEl.innerHTML = '';

    var cancelBtn = document.createElement('button');
    cancelBtn.className = 'btn btn--ghost';
    cancelBtn.textContent = cancelText;
    cancelBtn.onclick = close;
    actionsEl.appendChild(cancelBtn);

    var okBtn = document.createElement('button');
    okBtn.className = confirmBtnClass[type] || 'btn btn--primary';
    okBtn.textContent = confirmText;
    okBtn.onclick = function() {
      var cb = _onConfirm;
      close();
      if (cb) cb();
    };
    actionsEl.appendChild(okBtn);

    open();
    okBtn.focus();
  };

  /* ── hpAlert ──────────────────────────────────────── */
  window.hpAlert = function(opts) {
    var type = opts.type || 'info';
    var buttonText = opts.buttonText || '{{t "common.confirm"}}';

    iconEl.innerHTML = icons[type] || icons.info;
    titleEl.textContent = opts.title || '';
    msgEl.textContent   = opts.message || '';
    _onAlertClose = opts.onClose || null;

    actionsEl.innerHTML = '';

    var okBtn = document.createElement('button');
    okBtn.className = confirmBtnClass[type] || 'btn btn--primary';
    okBtn.textContent = buttonText;
    okBtn.onclick = function() {
      var cb = _onAlertClose;
      close();
      if (cb) cb();
    };
    actionsEl.appendChild(okBtn);

    open();
    okBtn.focus();
  };

  /* ── hpCloseDialog（手动关闭）──────────────────────── */
  window.hpCloseDialog = close;
})();
</script>
{{end}}