<script setup lang="ts">
/**
 * 文件职责：财务中心成本管理页面入口编排。
 */
import type {
  FinanceCostCategoryCode,
  FinanceCostEntryDetailDto,
} from '#/api/finance/cost';

import { Page } from '@vben/common-ui';

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

import CostAnalysisComposition from './components/CostAnalysisComposition.vue';
import CostAnalysisDetailTable from './components/CostAnalysisDetailTable.vue';
import CostAnalysisStatsBar from './components/CostAnalysisStatsBar.vue';
import CostAnalysisTrendChart from './components/CostAnalysisTrendChart.vue';
import CostDetailDeleteModal from './components/CostDetailDeleteModal.vue';
import CostEntryCategoryCard from './components/CostEntryCategoryCard.vue';
import CostEntrySummaryBar from './components/CostEntrySummaryBar.vue';
import CostItemEditorDrawer from './components/CostItemEditorDrawer.vue';
import CostPageToolbar from './components/CostPageToolbar.vue';
import {
  COST_CATEGORY_COLOR_MAP,
  COST_CATEGORY_ICON_MAP,
} from './composables/cost-page/constants';
import { formatCurrency } from './composables/cost-page/helpers';
import { useFinanceCostPage } from './composables/useFinanceCostPage';

const {
  activeTab,
  analysis,
  canManage,
  canQueryCurrentScope,
  canView,
  closeDeleteModal,
  closeDetailDrawer,
  confirmDeleteDetail,
  deleteModalState,
  dimensionOptions,
  drawerCategoryText,
  drawerState,
  entry,
  filters,
  hasStore,
  isAnalysisLoading,
  isEntryLoading,
  isSaving,
  isStoreLoading,
  monthTitle,
  openAddDetail,
  openDeleteDetail,
  openEditDetail,
  saveEntry,
  setActiveTab,
  setCategoryTotal,
  setDimension,
  setMonth,
  setNextMonth,
  setPreviousMonth,
  setStoreId,
  showStoreSelect,
  storeOptions,
  submitDetailFromDrawer,
  tabOptions,
  toggleCategoryExpanded,
} = useFinanceCostPage();

function handleAddDetail(category: FinanceCostCategoryCode) {
  openAddDetail(category);
}

function handleEditDetail(category: FinanceCostCategoryCode, itemId: string) {
  openEditDetail(category, itemId);
}

function handleDeleteDetail(category: FinanceCostCategoryCode, itemId: string) {
  openDeleteDetail(category, itemId);
}

function handleSubmitDrawer(detail: FinanceCostEntryDetailDto) {
  submitDetailFromDrawer(detail);
}
</script>

<template>
  <Page title="成本管理" content-class="page-finance-cost">
    <div class="fc-page">
      <CostPageToolbar
        :active-tab="activeTab"
        :tab-options="tabOptions"
        :dimension="filters.dimension"
        :dimension-options="dimensionOptions"
        :show-store-select="showStoreSelect"
        :store-id="filters.storeId"
        :store-options="storeOptions"
        :is-store-loading="isStoreLoading"
        :month="filters.month"
        :month-title="monthTitle"
        @update:active-tab="setActiveTab"
        @update:dimension="setDimension"
        @update:store-id="setStoreId"
        @update:month="setMonth"
        @prev-month="setPreviousMonth"
        @next-month="setNextMonth"
      />

      <Empty v-if="!canView" description="暂无成本管理页面访问权限" />

      <div v-else-if="showStoreSelect && !hasStore" class="fc-empty">
        <Empty description="暂无门店，请先创建门店" />
      </div>

      <div v-else-if="!canQueryCurrentScope" class="fc-empty">
        <Empty description="请选择门店后查看数据" />
      </div>

      <template v-else>
        <section v-show="activeTab === 'entry'" class="fc-entry-panel">
          <div class="fc-entry-revenue">
            本月营业额：<strong>{{
              formatCurrency(entry.monthRevenue)
            }}</strong>
          </div>

          <div class="fc-entry-list" :class="{ 'is-loading': isEntryLoading }">
            <CostEntryCategoryCard
              v-for="category in entry.categories"
              :key="category.category"
              :category="category"
              :can-manage="canManage"
              :icon="COST_CATEGORY_ICON_MAP[category.category]"
              :color="COST_CATEGORY_COLOR_MAP[category.category]"
              @toggle="toggleCategoryExpanded"
              @update-total="setCategoryTotal"
              @add-item="handleAddDetail"
              @edit-item="handleEditDetail"
              @delete-item="handleDeleteDetail"
            />
          </div>

          <CostEntrySummaryBar
            :can-manage="canManage"
            :loading="isSaving"
            :total-cost="entry.totalCost"
            @save="saveEntry"
          />
        </section>

        <section v-show="activeTab === 'analysis'" class="fc-analysis-panel">
          <CostAnalysisStatsBar :stats="analysis.stats" />
          <CostAnalysisTrendChart :trend="analysis.trend" />
          <CostAnalysisComposition :composition="analysis.composition" />
          <CostAnalysisDetailTable
            :rows="analysis.detailRows"
            :loading="isAnalysisLoading"
          />
        </section>
      </template>
    </div>

    <CostItemEditorDrawer
      :open="drawerState.open"
      :mode="drawerState.mode"
      :category="drawerState.category"
      :category-text="drawerCategoryText"
      :source-item="drawerState.sourceItem"
      :submitting="false"
      @close="closeDetailDrawer"
      @submit="handleSubmitDrawer"
    />

    <CostDetailDeleteModal
      :open="deleteModalState.open"
      :item-name="deleteModalState.item?.itemName"
      @cancel="closeDeleteModal"
      @confirm="confirmDeleteDetail"
    />
  </Page>
</template>

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