<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<style>
  .site-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.48);
  }
  .site-modal[hidden] {
    display: none !important;
  }
  .site-modal__panel {
    width: min(100%, 24rem);
    box-sizing: border-box;
    padding: 1.5rem;
    border: 1px solid var(--modal-border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    background: var(--modal-bg, #fff);
    color: var(--modal-text, #1a1a1a);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  }
  html[data-theme="dark"] .site-modal__panel {
    --modal-bg: #1e1e1e;
    --modal-text: #ece8e1;
    --modal-muted: #a39e96;
    --modal-border: rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.55);
  }
  html:not([data-theme="dark"]) .site-modal__panel {
    --modal-muted: #5c5c5c;
  }
  .site-modal__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--modal-text, #1a1a1a);
  }
  .site-modal__message {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--modal-muted, #5c5c5c);
  }
  .site-modal__field {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .site-modal__field[hidden] {
    display: none !important;
  }
  .site-modal__field-label {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--modal-text, #1a1a1a);
  }
  .site-modal__input {
    width: 100%;
    height: 2.875rem;
    box-sizing: border-box;
    border: 1px solid var(--modal-border, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    padding: 0 0.875rem;
    background: var(--modal-bg, #fff);
    color: var(--modal-text, #1a1a1a);
    font: inherit;
  }
  .site-modal__input:focus {
    outline: none;
    border-color: #e8a54b;
    box-shadow: 0 0 0 3px rgba(232, 165, 75, 0.22);
  }
  .site-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }
  .site-modal__button {
    min-width: 5rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #e8a54b;
    color: #1a1a1a;
    font-size: 0.9375rem;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .site-modal__button--secondary {
    border-color: var(--modal-border, rgba(0, 0, 0, 0.08));
    background: transparent;
    color: var(--modal-text, #1a1a1a);
  }
  .site-modal__button[hidden] {
    display: none !important;
  }
  .site-modal__button:active {
    transform: scale(0.98);
  }
</style>
<div class="site-modal" id="site-modal" hidden role="dialog" aria-modal="true" aria-labelledby="site-modal-title" aria-describedby="site-modal-message">
  <div class="site-modal__panel" role="document">
    <h2 class="site-modal__title" id="site-modal-title"></h2>
    <p class="site-modal__message" id="site-modal-message"></p>
    <label class="site-modal__field" id="site-modal-field" hidden>
      <span class="site-modal__field-label" id="site-modal-field-label"></span>
      <input class="site-modal__input" type="text" id="site-modal-input" autocomplete="off" />
    </label>
    <div class="site-modal__actions">
      <button class="site-modal__button site-modal__button--secondary" type="button" id="site-modal-cancel" hidden>취소</button>
      <button class="site-modal__button" type="button" id="site-modal-confirm">확인</button>
    </div>
  </div>
</div>
<script>
(function () {
  var root = document.getElementById('site-modal');
  var titleEl = document.getElementById('site-modal-title');
  var messageEl = document.getElementById('site-modal-message');
  var fieldEl = document.getElementById('site-modal-field');
  var fieldLabelEl = document.getElementById('site-modal-field-label');
  var inputEl = document.getElementById('site-modal-input');
  var cancelBtn = document.getElementById('site-modal-cancel');
  var confirmBtn = document.getElementById('site-modal-confirm');
  var onConfirm = null;
  var onCancel = null;
  var lastFocused = null;

  if (!root || !titleEl || !messageEl || !fieldEl || !fieldLabelEl || !inputEl || !cancelBtn || !confirmBtn) return;

  function close(confirmed) {
    root.hidden = true;
    document.removeEventListener('keydown', onKeyDown);
    var callback = confirmed ? onConfirm : onCancel;
    var inputValue = inputEl.value;
    onConfirm = null;
    onCancel = null;
    if (lastFocused && typeof lastFocused.focus === 'function') {
      lastFocused.focus();
    }
    if (typeof callback === 'function') {
      callback(inputValue);
    }
  }

  function onKeyDown(ev) {
    if (ev.isComposing) {
      return;
    }
    if (ev.key === 'Enter') {
      ev.preventDefault();
      close(true);
    } else if (ev.key === 'Escape' && !cancelBtn.hidden) {
      ev.preventDefault();
      close(false);
    }
  }

  confirmBtn.addEventListener('click', function () {
    close(true);
  });
  cancelBtn.addEventListener('click', function () {
    close(false);
  });

  window.BibimbapModal = {
    alert: function (options) {
      var opts = options || {};
      lastFocused = document.activeElement;
      titleEl.textContent = opts.title || '알림';
      messageEl.textContent = opts.message || '';
      fieldEl.hidden = true;
      inputEl.value = '';
      inputEl.removeAttribute('maxlength');
      inputEl.removeAttribute('placeholder');
      cancelBtn.hidden = true;
      confirmBtn.textContent = opts.confirmText || '확인';
      onConfirm = opts.onConfirm || null;
      onCancel = null;
      root.hidden = false;
      document.addEventListener('keydown', onKeyDown);
      confirmBtn.focus();
    },
    confirm: function (options) {
      var opts = options || {};
      lastFocused = document.activeElement;
      titleEl.textContent = opts.title || '확인';
      messageEl.textContent = opts.message || '';
      fieldEl.hidden = true;
      inputEl.value = '';
      inputEl.removeAttribute('maxlength');
      inputEl.removeAttribute('placeholder');
      cancelBtn.hidden = false;
      cancelBtn.textContent = opts.cancelText || '취소';
      confirmBtn.textContent = opts.confirmText || '확인';
      onConfirm = opts.onConfirm || null;
      onCancel = opts.onCancel || null;
      root.hidden = false;
      document.addEventListener('keydown', onKeyDown);
      confirmBtn.focus();
    },
    prompt: function (options) {
      var opts = options || {};
      lastFocused = document.activeElement;
      titleEl.textContent = opts.title || '입력';
      messageEl.textContent = opts.message || '';
      fieldLabelEl.textContent = opts.label || '입력값';
      inputEl.value = opts.value || '';
      if (opts.placeholder) {
        inputEl.setAttribute('placeholder', opts.placeholder);
      } else {
        inputEl.removeAttribute('placeholder');
      }
      if (opts.maxLength) {
        inputEl.setAttribute('maxlength', opts.maxLength);
      } else {
        inputEl.removeAttribute('maxlength');
      }
      fieldEl.hidden = false;
      cancelBtn.hidden = false;
      cancelBtn.textContent = opts.cancelText || '취소';
      confirmBtn.textContent = opts.confirmText || '변경';
      onConfirm = opts.onConfirm || null;
      onCancel = opts.onCancel || null;
      root.hidden = false;
      document.addEventListener('keydown', onKeyDown);
      inputEl.focus();
      inputEl.select();
    }
  };
})();
</script>
