<script setup>
import { useCalendar } from './composables/useCalendar.js'
import DropZone from './components/DropZone.vue'
import HeaderBar from './components/HeaderBar.vue'
import EventList from './components/EventList.vue'
import EventDetail from './components/EventDetail.vue'
import MonthPreview from './components/MonthPreview.vue'
import WeekPreview from './components/WeekPreview.vue'

const { isLoaded, state, setViewMode } = useCalendar()
</script>

<template>
  <div class="app">
    <header class="app-header">
      <div class="header-left">
        <h1>ICS 日程整理器</h1>
        <div v-if="isLoaded" class="view-switcher">
          <button
            :class="{ active: state.viewMode === 'edit' }"
            @click="setViewMode('edit')"
          >编辑</button>
          <button
            :class="{ active: state.viewMode === 'month' }"
            @click="setViewMode('month')"
          >月预览</button>
          <button
            :class="{ active: state.viewMode === 'week' }"
            @click="setViewMode('week')"
          >周预览</button>
        </div>
      </div>
      <HeaderBar />
    </header>
    <main class="app-main">
      <DropZone v-if="!isLoaded" />
      <template v-else>
        <EventList v-if="state.viewMode === 'edit'" />
        <div class="detail-area">
          <EventDetail v-if="state.viewMode === 'edit'" />
          <MonthPreview v-else-if="state.viewMode === 'month'" />
          <WeekPreview v-else-if="state.viewMode === 'week'" />
        </div>
      </template>
    </main>
  </div>
</template>

<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
  background: #f5f6f8;
  color: #222;
  line-height: 1.5;
}
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app-header {
  background: #2c3e50;
  color: #fff;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}
.app-header h1 { font-size: 18px; font-weight: 600; white-space: nowrap; }
.view-switcher {
  display: flex;
  background: #1a252f;
  border-radius: 6px;
  overflow: hidden;
}
.view-switcher button {
  background: transparent;
  color: #bdc3c7;
  border: none;
  padding: 6px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.view-switcher button:hover { color: #fff; }
.view-switcher button.active {
  background: #3498db;
  color: #fff;
}
.app-main { flex: 1; display: flex; overflow: hidden; }
.detail-area { flex: 1; overflow-y: auto; }

/* 移动端适配 */
@media (max-width: 768px) {
  .app-header {
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
  }
  .header-left {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  .app-header h1 { font-size: 15px; }
  .view-switcher button { padding: 5px 10px; font-size: 12px; }
  .app-main { flex-direction: column; }
}
</style>
