<script setup lang="ts">
import { Page } from '@vben/common-ui';

import { Empty, Segmented } from 'ant-design-vue';

import MessageReachDetailDrawer from './components/MessageReachDetailDrawer.vue';
import MessageReachEditorDrawer from './components/MessageReachEditorDrawer.vue';
import MessageReachFilterBar from './components/MessageReachFilterBar.vue';
import MessageReachStatsCards from './components/MessageReachStatsCards.vue';
import MessageReachTableCard from './components/MessageReachTableCard.vue';
import MessageTemplateCardGrid from './components/MessageTemplateCardGrid.vue';
import MessageTemplateEditorModal from './components/MessageTemplateEditorModal.vue';
import MessageTemplateToolbar from './components/MessageTemplateToolbar.vue';
import { useMemberMessageReachPage } from './composables/useMemberMessageReachPage';

const {
  activeTab,
  applyMessageFilters,
  applyTemplateFilters,
  audienceEstimateCount,
  canManage,
  canView,
  detail,
  form,
  handleMessagePageChange,
  handleTemplatePageChange,
  isDetailDrawerOpen,
  isDetailLoading,
  isEstimatingAudience,
  isMessageDrawerOpen,
  isMessageLoading,
  isMessageSubmitting,
  isStatsLoading,
  isTemplateEditorLoading,
  isTemplateEditorOpen,
  isTemplateLoading,
  isTemplateSubmitting,
  messageDrawerTitle,
  messageFilterForm,
  messagePager,
  openCreateMessageDrawer,
  openCreateTemplateModal,
  openDetailDrawer,
  openEditMessageDrawer,
  openEditTemplateModal,
  removeMessage,
  removeTemplate,
  setActiveTab,
  setAudienceTypeAndEstimate,
  setDetailDrawerOpen,
  setMessageChannel,
  setMessageChannelFilter,
  setMessageContent,
  setMessageDrawerOpen,
  setMessageKeyword,
  setMessageStatusFilter,
  setMessageTitle,
  setScheduleType,
  setScheduledAt,
  setTemplateCategory,
  setTemplateCategoryFilter,
  setTemplateContent,
  setTemplateEditorOpen,
  setTemplateKeyword,
  setTemplateName,
  stats,
  submitDraftMessage,
  submitSendMessage,
  submitTemplate,
  switchToTemplateTab,
  tabOptions,
  templateEditorSubmitText,
  templateEditorTitle,
  templateFilterForm,
  templateForm,
  templatePager,
  toggleAudienceTagAndEstimate,
  useTemplateToCreateMessage,
} = useMemberMessageReachPage();
</script>

<template>
  <Page title="消息触达" content-class="page-member-message-reach">
    <div class="mmr-page">
      <div class="mmr-topbar">
        <Segmented
          class="mmr-tab-switch"
          :value="activeTab"
          :options="tabOptions"
          @update:value="
            (value) => setActiveTab((value as 'list' | 'template') || 'list')
          "
        />

        <span v-if="canView && !canManage" class="mmr-readonly-tip">
          当前为只读权限
        </span>
      </div>

      <template v-if="canView">
        <section v-show="activeTab === 'list'" class="mmr-tab-panel">
          <MessageReachFilterBar
            :filters="messageFilterForm"
            :can-manage="canManage"
            @create="openCreateMessageDrawer"
            @update:status="setMessageStatusFilter"
            @update:channel="setMessageChannelFilter"
            @update:keyword="setMessageKeyword"
            @search="applyMessageFilters"
          />

          <MessageReachStatsCards :stats="stats" :loading="isStatsLoading" />

          <MessageReachTableCard
            :can-manage="canManage"
            :pager="messagePager"
            :loading="isMessageLoading"
            @detail="openDetailDrawer"
            @edit="openEditMessageDrawer"
            @delete="removeMessage"
            @page-change="handleMessagePageChange"
          />
        </section>

        <section v-show="activeTab === 'template'" class="mmr-tab-panel">
          <MessageTemplateToolbar
            :filters="templateFilterForm"
            :can-manage="canManage"
            @create="openCreateTemplateModal"
            @update:category="setTemplateCategoryFilter"
            @update:keyword="setTemplateKeyword"
            @search="applyTemplateFilters"
          />

          <MessageTemplateCardGrid
            :can-manage="canManage"
            :pager="templatePager"
            :loading="isTemplateLoading"
            @use="useTemplateToCreateMessage"
            @edit="openEditTemplateModal"
            @delete="removeTemplate"
            @page-change="handleTemplatePageChange"
          />
        </section>
      </template>

      <Empty v-else description="暂无消息触达页面访问权限" />
    </div>

    <MessageReachEditorDrawer
      :open="isMessageDrawerOpen"
      :title="messageDrawerTitle"
      :form="form"
      :can-manage="canManage"
      :submitting="isMessageSubmitting"
      :audience-estimate-count="audienceEstimateCount"
      :estimating-audience="isEstimatingAudience"
      @close="setMessageDrawerOpen(false)"
      @set-title="setMessageTitle"
      @set-content="setMessageContent"
      @set-channel="setMessageChannel"
      @set-audience-type="setAudienceTypeAndEstimate"
      @toggle-audience-tag="toggleAudienceTagAndEstimate"
      @set-schedule-type="setScheduleType"
      @set-scheduled-at="setScheduledAt"
      @switch-to-template-tab="switchToTemplateTab"
      @submit-draft="submitDraftMessage"
      @submit-send="submitSendMessage"
    />

    <MessageReachDetailDrawer
      :open="isDetailDrawerOpen"
      :loading="isDetailLoading"
      :detail="detail"
      @close="setDetailDrawerOpen(false)"
    />

    <MessageTemplateEditorModal
      :open="isTemplateEditorOpen"
      :title="templateEditorTitle"
      :submit-text="templateEditorSubmitText"
      :form="templateForm"
      :can-manage="canManage"
      :loading="isTemplateEditorLoading"
      :submitting="isTemplateSubmitting"
      @close="setTemplateEditorOpen(false)"
      @set-name="setTemplateName"
      @set-category="setTemplateCategory"
      @set-content="setTemplateContent"
      @submit="submitTemplate"
    />
  </Page>
</template>

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