<script setup lang="ts">
import { watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useSystemAnnouncementStore } from '@/stores/systemAnnouncement'

const store = useSystemAnnouncementStore()
const { announcement, showModal } = storeToRefs(store)

function onOverlayClick(e: MouseEvent) {
  if ((e.target as HTMLElement).classList.contains('modal-overlay')) {
    store.dismiss()
  }
}

function onKeydown(e: KeyboardEvent) {
  if (e.key === 'Escape') {
    store.dismiss()
  }
}

watch(showModal, (val) => {
  if (val) {
    document.body.style.overflow = 'hidden'
    document.addEventListener('keydown', onKeydown)
  } else {
    document.body.style.overflow = ''
    document.removeEventListener('keydown', onKeydown)
  }
})
</script>

<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="showModal" class="modal-overlay" @click="onOverlayClick">
        <div class="modal-card dark-card">
          <div class="modal-header">
            <h2 class="modal-title">{{ announcement?.title || '系统公告' }}</h2>
            <button class="modal-close" @click="store.dismiss" aria-label="关闭">&times;</button>
          </div>
          <div class="modal-body">
            <div class="announcement-content" v-html="announcement?.content" />
          </div>
          <div class="modal-footer">
            <button class="btn-primary dismiss-btn" @click="store.dismiss">
              我知道了
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.modal-card {
  width: 100%;
  max-width: 580px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: var(--color-bg-card);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) var(--space-4);
  flex-shrink: 0;
}

.modal-title {
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  padding-right: var(--space-4);
}

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--transition), border-color var(--transition);
}
.modal-close:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);
}

.announcement-content {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.8;
  word-break: break-word;
}
.announcement-content :deep(p) { margin-bottom: var(--space-3); }
.announcement-content :deep(img) { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.announcement-content :deep(h1),
.announcement-content :deep(h2),
.announcement-content :deep(h3) {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
  margin: var(--space-5) 0 var(--space-3);
}
.announcement-content :deep(a) { color: var(--color-primary); text-decoration: underline; }

.modal-footer {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-6) var(--space-6);
  display: flex;
  justify-content: center;
}

.dismiss-btn {
  min-width: 200px;
  padding: var(--space-4) var(--space-12);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background: var(--color-primary);
  color: #111;
  box-shadow: 0 6px 18px rgba(240, 185, 11, 0.25);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.dismiss-btn:hover {
  background: var(--color-primary-hover, #f5c842);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(240, 185, 11, 0.35);
}
.dismiss-btn:active { transform: translateY(0); }
.dismiss-btn:focus-visible {
  outline: 2px solid rgba(240, 185, 11, 0.45);
  outline-offset: 2px;
}

/* ── Transition ── */
.modal-enter-active,
.modal-leave-active { transition: opacity 0.25s ease; }
.modal-enter-active .modal-card,
.modal-leave-active .modal-card { transition: transform 0.25s ease, opacity 0.25s ease; }
.modal-enter-from,
.modal-leave-to { opacity: 0; }
.modal-enter-from .modal-card { transform: scale(0.92); opacity: 0; }
.modal-leave-to .modal-card { transform: scale(0.92); opacity: 0; }

@media (max-width: 640px) {
  .modal-overlay { padding: var(--space-4); }
  .modal-card { max-height: 90vh; }
  .modal-header { padding: var(--space-4) var(--space-4) var(--space-3); }
  .modal-body { padding: var(--space-3) var(--space-4); }
  .modal-footer { padding: var(--space-3) var(--space-4) var(--space-4); }
  .dismiss-btn { min-width: 160px; }
}
</style>
