<script setup lang="ts">
/**
 * 文件职责：营销中心-营销日历页面主视图。
 */
import { Page } from '@vben/common-ui';

import { Select, Spin } from 'ant-design-vue';

import MarketingCalendarActivityDetailDrawer from './components/MarketingCalendarActivityDetailDrawer.vue';
import MarketingCalendarConflictBanner from './components/MarketingCalendarConflictBanner.vue';
import MarketingCalendarConflictDetailDrawer from './components/MarketingCalendarConflictDetailDrawer.vue';
import MarketingCalendarMonthHeader from './components/MarketingCalendarMonthHeader.vue';
import MarketingCalendarStatsCards from './components/MarketingCalendarStatsCards.vue';
import MarketingCalendarTimeline from './components/MarketingCalendarTimeline.vue';
import { useMarketingCalendarPage } from './composables/useMarketingCalendarPage';

const {
  activeActivity,
  activeConflict,
  activeConflictActivities,
  canManage,
  closeActivityDrawer,
  closeConflictDrawer,
  hasStore,
  isActivityDrawerOpen,
  isConflictDrawerOpen,
  isOverviewLoading,
  isStoreLoading,
  monthTitle,
  nextMonth,
  openActivityDrawer,
  openConflictDrawer,
  overview,
  prevMonth,
  selectedStoreId,
  setSelectedStoreId,
  storeOptions,
  viewActivityFromConflict,
} = useMarketingCalendarPage();
</script>

<template>
  <Page title="营销日历" content-class="page-marketing-calendar">
    <div class="mc-page">
      <div class="mc-toolbar">
        <Select
          class="mc-store-select"
          :value="selectedStoreId"
          :options="storeOptions"
          :loading="isStoreLoading"
          placeholder="请选择门店"
          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
        />
        <span v-if="!canManage" class="mc-readonly-tip">当前为只读权限</span>
      </div>

      <div v-if="!hasStore" class="mc-empty">暂无门店，请先创建门店</div>

      <template v-else>
        <Spin :spinning="isOverviewLoading">
          <MarketingCalendarConflictBanner
            :banner="overview.conflictBanner"
            @open-conflict="openConflictDrawer"
          />

          <MarketingCalendarMonthHeader
            :month-title="monthTitle"
            :legends="overview.legends"
            @prev-month="prevMonth"
            @next-month="nextMonth"
          />

          <MarketingCalendarStatsCards :stats="overview.stats" />

          <MarketingCalendarTimeline
            :days="overview.days"
            :activities="overview.activities"
            :today-day="overview.todayDay"
            @select-activity="openActivityDrawer"
          />
        </Spin>
      </template>
    </div>

    <MarketingCalendarActivityDetailDrawer
      :open="isActivityDrawerOpen"
      :activity="activeActivity"
      @close="closeActivityDrawer"
    />

    <MarketingCalendarConflictDetailDrawer
      :open="isConflictDrawerOpen"
      :conflict="activeConflict"
      :activities="activeConflictActivities"
      @close="closeConflictDrawer"
      @view-activity="viewActivityFromConflict"
    />
  </Page>
</template>

<style lang="less">
@import './styles/index.less';
</style>
