<script setup lang="ts">
// 전역 공통 다이얼로그 — App 루트에 1회 마운트. dialog.store 상태를 받아
// 업무 삭제 모달과 동일한 구조/디자인(.modal-* / .mbtn)으로 렌더한다.
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useDialogStore } from '@/stores/dialog.store'

const store = useDialogStore()
const { current } = storeToRefs(store)

// variant → 아이콘 원형 색 클래스(danger 는 기본 빨강)
const iconClass = computed(() => {
  switch (current.value?.variant) {
    case 'success':
      return 'approve'
    case 'warning':
      return 'warning'
    case 'info':
      return 'info'
    default:
      return ''
  }
})

// 확인 버튼 색 — 알림(OK)은 항상 중립 강조(primary), 확인은 variant 따름
const confirmClass = computed(() => {
  if (current.value?.mode === 'alert') return 'primary'
  switch (current.value?.variant) {
    case 'success':
      return 'approve'
    case 'danger':
      return 'danger'
    default:
      return 'primary'
  }
})

function onConfirm() {
  store.settle(true)
}
function onCancel() {
  store.settle(false)
}
</script>

<template>
  <Teleport to="body">
    <div
      class="modal-backdrop"
      :class="{ open: !!current }"
      @click.self="onCancel"
    >
      <div
        v-if="current"
        class="modal"
        role="dialog"
        aria-modal="true"
      >
        <div class="modal-body">
          <div
            class="modal-ico"
            :class="iconClass"
          >
            <svg
              v-if="current.variant === 'success'"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2.2"
              stroke-linecap="round"
              stroke-linejoin="round"
            ><path d="M20 6 9 17l-5-5" /></svg>
            <svg
              v-else-if="current.variant === 'info'"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            ><circle
              cx="12"
              cy="12"
              r="10"
            /><path d="M12 16v-4M12 8h.01" /></svg>
            <svg
              v-else
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            ><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" /><path d="M12 9v4M12 17h.01" /></svg>
          </div>
          <h2 class="modal-title">
            {{ current.title }}
          </h2>
          <p
            v-if="current.desc"
            class="modal-desc"
          >
            {{ current.desc }}
          </p>
        </div>
        <div class="modal-foot">
          <button
            v-if="current.mode === 'confirm'"
            class="mbtn"
            type="button"
            @click="onCancel"
          >
            {{ current.cancelText }}
          </button>
          <button
            class="mbtn"
            :class="confirmClass"
            type="button"
            @click="onConfirm"
          >
            {{ current.confirmText }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>
