// ConfirmDialog — shared centered confirmation dialog (style B, no icon).
// Title + subtitle + one or two side-by-side action buttons (48px tall).
// Props:
//   title, message           — text
//   confirmLabel='確定'       — primary button
//   cancelLabel='取消'        — secondary button; pass null for a single-action dialog
//   danger=false             — primary button uses coral (destructive)
//   onConfirm, onCancel      — callbacks. Backdrop / cancel button call onCancel (or onConfirm if no cancel).

function ConfirmDialog({ title, message, confirmLabel = '確定', cancelLabel = '取消', danger = false, onConfirm, onCancel }) {
  const t = window.flutterTokens;
  const dismiss = onCancel || onConfirm || (() => {});
  const sans = '"Plus Jakarta Sans", "Noto Sans TC", sans-serif';

  const btnBase = {
    height: 48, borderRadius: 13, cursor: 'pointer',
    fontFamily: sans, fontSize: 15, fontWeight: 600, textAlign: 'center',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };

  return (
    <div
      onClick={dismiss}
      style={{
        position: 'absolute', inset: 0, zIndex: 90,
        background: 'rgba(31,27,22,0.32)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 28,
      }}
    >
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxWidth: 320, background: t.surface,
        borderRadius: 22, padding: '26px 22px 20px',
        boxShadow: '0 24px 60px rgba(31,27,22,0.28)',
        animation: 'dialogIn 200ms cubic-bezier(.2,.7,.2,1)',
      }}>
        <div style={{
          fontFamily: sans, fontSize: 18, fontWeight: 700, color: t.ink,
          letterSpacing: -0.3, textAlign: 'center', lineHeight: 1.3,
        }}>{title}</div>
        {message && (
          <div style={{
            fontSize: 13.5, color: t.ink2, lineHeight: 1.65,
            textAlign: 'center', marginTop: 9,
          }}>{message}</div>
        )}
        <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
          {cancelLabel && (
            <button onClick={onCancel} style={{
              ...btnBase, flex: 1,
              background: t.surface, color: t.ink, border: `1px solid ${t.hairline}`,
            }}>{cancelLabel}</button>
          )}
          <button onClick={onConfirm} style={{
            ...btnBase, flex: 1, border: 'none',
            background: danger ? t.coralDk : t.ink, color: '#fff',
            fontWeight: 700,
          }}>{confirmLabel}</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ConfirmDialog });