<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import Header from './components/Header.vue'
import TeamSidebar from './components/TeamSidebar.vue'
import CalendarView from './components/CalendarView.vue'
import EventModal from './components/EventModal.vue'
import MemberModal from './components/MemberModal.vue'
import { useCalendar } from './composables/useCalendar'

const { addEvent, updateEvent, deleteEvent, addMember, updateMember, deleteMember } = useCalendar()

// 事件模态框状态
const showModal = ref(false)
const editingEvent = ref(null)
const selectedDate = ref(null)

// 成员模态框状态
const showMemberModal = ref(false)
const editingMember = ref(null)

// 控制 body 滚动锁定（防止移动端弹窗背景滚动穿透）
function lockBodyScroll() {
  const scrollY = window.scrollY
  document.body.style.position = 'fixed'
  document.body.style.top = `-${scrollY}px`
  document.body.style.left = '0'
  document.body.style.right = '0'
  document.body.style.overflow = 'hidden'
  document.body.dataset.scrollY = scrollY
}

function unlockBodyScroll() {
  const scrollY = document.body.dataset.scrollY || 0
  document.body.style.position = ''
  document.body.style.top = ''
  document.body.style.left = ''
  document.body.style.right = ''
  document.body.style.overflow = ''
  window.scrollTo(0, parseInt(scrollY))
}

// 监听弹窗状态，控制 body 滚动
watch(showModal, (isOpen) => {
  if (isOpen) {
    lockBodyScroll()
  } else {
    unlockBodyScroll()
  }
})

watch(showMemberModal, (isOpen) => {
  if (isOpen) {
    lockBodyScroll()
  } else {
    unlockBodyScroll()
  }
})

// 打开添加事件模态框
function openAddModal(date = null) {
  editingEvent.value = null
  selectedDate.value = date
  showModal.value = true
}

// 打开编辑事件模态框
function openEditModal(event) {
  editingEvent.value = event
  selectedDate.value = null
  showModal.value = true
}

// 关闭模态框
function closeModal() {
  showModal.value = false
  editingEvent.value = null
  selectedDate.value = null
}

// 保存事件
function handleSaveEvent(eventData) {
  if (editingEvent.value) {
    updateEvent(editingEvent.value.id, eventData)
  } else {
    addEvent(eventData)
  }
  closeModal()
}

// 删除事件
function handleDeleteEvent(id) {
  deleteEvent(id)
  closeModal()
}

// ===== 成员管理 =====

// 打开添加成员模态框
function openAddMemberModal() {
  editingMember.value = null
  showMemberModal.value = true
}

// 打开编辑成员模态框
function openEditMemberModal(member) {
  editingMember.value = member
  showMemberModal.value = true
}

// 关闭成员模态框
function closeMemberModal() {
  showMemberModal.value = false
  editingMember.value = null
}

// 保存成员
function handleSaveMember(memberData) {
  if (editingMember.value) {
    updateMember(editingMember.value.id, memberData)
  } else {
    addMember(memberData)
  }
  closeMemberModal()
}

// 删除成员
function handleDeleteMember(id) {
  deleteMember(id)
  closeMemberModal()
}
</script>

<template>
  <div class="app">
    <!-- 背景装饰元素 -->
    <div class="bg-decoration">
      <div class="bg-orb bg-orb-1"></div>
      <div class="bg-orb bg-orb-2"></div>
      <div class="bg-orb bg-orb-3"></div>
    </div>

    <!-- 头部导航 -->
    <Header @add-event="openAddModal()" />

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 团队成员侧边栏 -->
      <TeamSidebar 
        @add-member="openAddMemberModal"
        @edit-member="openEditMemberModal"
      />

      <!-- 日历区域 -->
      <CalendarView 
        @add-event="openAddModal"
        @edit-event="openEditModal"
      />
    </main>

    <!-- 事件模态框 -->
    <Transition name="modal">
      <EventModal 
        v-if="showModal"
        :event="editingEvent"
        :selected-date="selectedDate"
        @close="closeModal"
        @save="handleSaveEvent"
        @delete="handleDeleteEvent"
      />
    </Transition>

    <!-- 成员模态框 -->
    <Transition name="modal">
      <MemberModal
        v-if="showMemberModal"
        :member="editingMember"
        @close="closeMemberModal"
        @save="handleSaveMember"
        @delete="handleDeleteMember"
      />
    </Transition>
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 背景装饰 */
.bg-decoration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 20s ease-in-out infinite;
}

.bg-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  top: -200px;
  left: -200px;
  animation-delay: 0s;
}

.bg-orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
  bottom: -150px;
  right: -150px;
  animation-delay: -7s;
}

.bg-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -14s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30px, -30px) scale(1.05);
  }
  50% {
    transform: translate(-20px, 20px) scale(0.95);
  }
  75% {
    transform: translate(-30px, -20px) scale(1.02);
  }
}

/* 额外的呼吸动画 */
@keyframes breathe {
  0%, 100% {
    opacity: 0.3;
    filter: blur(80px);
  }
  50% {
    opacity: 0.5;
    filter: blur(100px);
  }
}

.bg-orb-1 {
  animation: float 20s ease-in-out infinite, breathe 8s ease-in-out infinite;
}

.bg-orb-2 {
  animation: float 20s ease-in-out infinite, breathe 10s ease-in-out infinite;
  animation-delay: -7s, -3s;
}

.bg-orb-3 {
  animation: float 20s ease-in-out infinite, breathe 12s ease-in-out infinite;
  animation-delay: -14s, -6s;
}

/* 主内容区 */
.main-content {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  padding-top: calc(80px + var(--spacing-lg));
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* 模态框过渡动画 */
.modal-enter-active,
.modal-leave-active {
  transition: all 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from :deep(.modal-content),
.modal-leave-to :deep(.modal-content) {
  transform: scale(0.95) translateY(20px);
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 240px 1fr;
  }
}

@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
    padding-top: calc(70px + var(--spacing-md));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bg-orb {
    animation: none;
  }
}
</style>
