<script setup lang="ts">
interface Plan {
  provider_id: string
  plan_id: string
  name: string
  premium: number
}

interface Props {
  open: boolean
  plan: Plan | null
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

const emit = defineEmits<{
  'update:open': [value: boolean]
  accept: []
  cancel: []
}>()

function close() {
  emit('update:open', false)
  emit('cancel')
}
</script>

<template>
  <Teleport to="body">
    <Transition
      enter-active-class="transition duration-200 ease-out"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition duration-150 ease-in"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div v-if="open" class="confirm-modal-overlay" @click.self="close">
        <Transition
          enter-active-class="transition duration-200 ease-out"
          enter-from-class="opacity-0 scale-95 translate-y-2"
          enter-to-class="opacity-100 scale-100 translate-y-0"
          leave-active-class="transition duration-150 ease-in"
          leave-from-class="opacity-100 scale-100 translate-y-0"
          leave-to-class="opacity-0 scale-95 translate-y-2"
        >
          <div v-if="open" class="confirm-modal">
            <div class="confirm-modal-head">
              <h3 class="text-lg font-semibold text-[var(--text-primary)]">Accept Quote</h3>
              <button type="button" class="confirm-modal-close" @click="close">
                <UIcon name="i-heroicons-x-mark" style="width: 16px; height: 16px;" />
              </button>
            </div>
            <div class="confirm-modal-body">
              <div v-if="plan" class="space-y-3">
                <div class="bg-gray-50 rounded-lg p-4">
                  <div class="text-sm text-gray-500">Selected Plan</div>
                  <div class="text-lg font-semibold text-[var(--text-primary)] mt-1">{{ plan.name }}</div>
                  <div class="text-2xl font-bold text-green-600 mt-2">${{ plan.premium?.toLocaleString() }}</div>
                  <div class="text-xs text-gray-500 mt-1">Provider: {{ plan.provider_id }}</div>
                </div>
                <p class="text-sm text-gray-600">
                  Are you sure you want to accept this plan? This will trigger the solicitation process.
                </p>
              </div>
            </div>
            <div class="confirm-modal-foot">
              <div class="flex justify-end gap-3">
                <UButton color="gray" variant="soft" @click="close">Cancel</UButton>
                <UButton color="primary" :loading="loading" @click="emit('accept')">Accept</UButton>
              </div>
            </div>
          </div>
        </Transition>
      </div>
    </Transition>
   </Teleport>
 </template>

 <style scoped>
/* Modal overlay */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

/* Modal container */
.confirm-modal {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Modal header */
.confirm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0;
  flex-shrink: 0;
}

/* Modal body */
.confirm-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}

/* Modal footer */
.confirm-modal-foot {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Close button */
.confirm-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #8a8a86;
  cursor: pointer;
  transition: all 150ms ease;
}

.confirm-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}
</style>
