<script setup lang="ts">
/**
 * 文件职责：员工排班页面主视图。
 * 1. 组装员工列表、班次模板、周排班看板。
 * 2. 挂载员工抽屉、个人排班抽屉、周排班抽屉与复制弹窗。
 */
import { Page } from '@vben/common-ui';

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

import CopyToStoresModal from '../../shared/components/CopyToStoresModal.vue';
import StoreScopeToolbar from '../../shared/components/StoreScopeToolbar.vue';
import ShiftTemplateCard from './components/ShiftTemplateCard.vue';
import StaffEditorDrawer from './components/StaffEditorDrawer.vue';
import StaffFilterBar from './components/StaffFilterBar.vue';
import StaffScheduleDrawer from './components/StaffScheduleDrawer.vue';
import StaffTableSection from './components/StaffTableSection.vue';
import WeeklyScheduleBoard from './components/WeeklyScheduleBoard.vue';
import WeekScheduleDrawer from './components/WeekScheduleDrawer.vue';
import { useStoreStaffPage } from './composables/useStoreStaffPage';

const {
  DAY_OPTIONS,
  PAGE_SIZE_OPTIONS,
  SHIFT_OPTIONS,
  STAFF_PERMISSION_OPTIONS,
  STAFF_ROLE_OPTIONS,
  STAFF_STATUS_OPTIONS,
  applyFilters,
  boardRows,
  copyCandidates,
  copyTargetStoreIds,
  cycleWeekShift,
  deletingStaffId,
  filters,
  formatShiftTimeText,
  getRoleLabel,
  getRoleTagClass,
  getShiftClass,
  getShiftLabel,
  getStatusDotClass,
  getStatusLabel,
  handleCopyCheckAll,
  handleCopySubmit,
  handleDeleteStaff,
  handleOpenWeekSchedule,
  handleOpenPersonalSchedule,
  handlePageChange,
  handleSavePersonalSchedule,
  handleSaveTemplates,
  handleSaveWeekSchedule,
  handleSubmitStaff,
  isCopyAllChecked,
  isCopyIndeterminate,
  isCopyModalOpen,
  isCopySubmitting,
  isPageLoading,
  isPersonalDrawerOpen,
  isPersonalSaving,
  isScheduleConfigured,
  isScheduleDisabled,
  isStaffDrawerOpen,
  isStaffSaving,
  isStoreLoading,
  isTemplateSaving,
  isTemplateConfigured,
  isWeekDrawerOpen,
  isWeekSaving,
  maskPhone,
  openCopyModal,
  openStaffDrawer,
  personalDrawerTitle,
  personalScheduleForm,
  resetFilters,
  resetTemplates,
  selectedStoreId,
  selectedStoreName,
  setCopyModalOpen,
  setFilterKeyword,
  setFilterRoleType,
  setFilterStatus,
  setPersonalDrawerOpen,
  setPersonalShiftEnd,
  setPersonalShiftStart,
  setPersonalShiftType,
  setSelectedStoreId,
  setStaffDrawerOpen,
  setStaffEmail,
  setStaffName,
  setStaffPermissions,
  setStaffPhone,
  setStaffRoleType,
  setStaffStatus,
  setTemplateTime,
  setWeekDrawerOpen,
  shiftLegendItems,
  staffDrawerTitle,
  staffForm,
  staffRows,
  staffSubmitText,
  staffTotal,
  storeOptions,
  templates,
  toggleCopyStore,
  weekRows,
} = useStoreStaffPage();
</script>

<template>
  <Page title="员工排班" content-class="space-y-4 page-store-staff">
    <StoreScopeToolbar
      :selected-store-id="selectedStoreId"
      :store-options="storeOptions"
      :is-store-loading="isStoreLoading"
      :copy-disabled="!selectedStoreId || copyCandidates.length === 0"
      copy-button-text="复制员工排班到其他门店"
      @update:selected-store-id="setSelectedStoreId"
      @copy="openCopyModal"
    />

    <template v-if="storeOptions.length === 0">
      <Card :bordered="false">
        <Empty description="暂无门店，请先创建门店" />
      </Card>
    </template>

    <template v-else>
      <Spin :spinning="isPageLoading">
        <StaffTableSection
          :rows="staffRows"
          :total="staffTotal"
          :page="filters.page"
          :page-size="filters.pageSize"
          :page-size-options="PAGE_SIZE_OPTIONS"
          :is-loading="isPageLoading"
          :deleting-staff-id="deletingStaffId"
          :format-role-label="getRoleLabel"
          :format-status-label="getStatusLabel"
          :get-role-tag-class="getRoleTagClass"
          :get-status-dot-class="getStatusDotClass"
          :mask-phone="maskPhone"
          :is-schedule-disabled="isScheduleDisabled"
          @add="openStaffDrawer('create')"
          @edit="(staff) => openStaffDrawer('edit', staff)"
          @schedule="handleOpenPersonalSchedule"
          @delete="handleDeleteStaff"
          @page-change="handlePageChange"
        >
          <template #filters>
            <StaffFilterBar
              :keyword="filters.keyword"
              :role-type="filters.roleType"
              :status="filters.status"
              :is-loading="isPageLoading"
              :role-options="STAFF_ROLE_OPTIONS"
              :status-options="STAFF_STATUS_OPTIONS"
              :on-set-keyword="setFilterKeyword"
              :on-set-role-type="setFilterRoleType"
              :on-set-status="setFilterStatus"
              @search="applyFilters"
              @reset="resetFilters"
            />
          </template>
        </StaffTableSection>

        <ShiftTemplateCard
          :templates="templates"
          :is-saving="isTemplateSaving"
          :is-template-configured="isTemplateConfigured"
          :on-set-template-time="setTemplateTime"
          @save="handleSaveTemplates"
          @reset="resetTemplates"
        />

        <WeeklyScheduleBoard
          :rows="boardRows"
          :day-options="DAY_OPTIONS"
          :get-shift-class="getShiftClass"
          :get-shift-label="getShiftLabel"
          :get-shift-time-text="formatShiftTimeText"
          :is-template-configured="isTemplateConfigured"
          :is-schedule-configured="isScheduleConfigured"
          :role-label-resolver="getRoleLabel"
          @edit-week="handleOpenWeekSchedule"
        />
      </Spin>
    </template>

    <StaffEditorDrawer
      :open="isStaffDrawerOpen"
      :title="staffDrawerTitle"
      :submit-text="staffSubmitText"
      :form="staffForm"
      :is-saving="isStaffSaving"
      :role-options="STAFF_ROLE_OPTIONS"
      :status-options="STAFF_STATUS_OPTIONS"
      :permission-options="STAFF_PERMISSION_OPTIONS"
      :on-set-name="setStaffName"
      :on-set-phone="setStaffPhone"
      :on-set-email="setStaffEmail"
      :on-set-role-type="setStaffRoleType"
      :on-set-status="setStaffStatus"
      :on-set-permissions="setStaffPermissions"
      @update:open="setStaffDrawerOpen"
      @submit="handleSubmitStaff"
    />

    <StaffScheduleDrawer
      :open="isPersonalDrawerOpen"
      :title="personalDrawerTitle"
      :is-saving="isPersonalSaving"
      :form="personalScheduleForm"
      :day-options="DAY_OPTIONS"
      :shift-options="SHIFT_OPTIONS"
      :on-set-shift-type="setPersonalShiftType"
      :on-set-shift-start="setPersonalShiftStart"
      :on-set-shift-end="setPersonalShiftEnd"
      @update:open="setPersonalDrawerOpen"
      @submit="handleSavePersonalSchedule"
    />

    <WeekScheduleDrawer
      :open="isWeekDrawerOpen"
      :rows="weekRows"
      :is-saving="isWeekSaving"
      :day-options="DAY_OPTIONS"
      :legend-items="shiftLegendItems"
      :get-shift-class="getShiftClass"
      :get-shift-label="getShiftLabel"
      :get-shift-time-text="formatShiftTimeText"
      :is-template-configured="isTemplateConfigured"
      :role-label-resolver="getRoleLabel"
      @update:open="setWeekDrawerOpen"
      @cycle-shift="cycleWeekShift"
      @submit="handleSaveWeekSchedule"
    />

    <CopyToStoresModal
      :open="isCopyModalOpen"
      title="复制员工排班到其他门店"
      confirm-text="确认复制"
      warning-text="仅复制班次模板与排班安排，不会复制员工档案"
      :copy-candidates="copyCandidates"
      :target-store-ids="copyTargetStoreIds"
      :is-all-checked="isCopyAllChecked"
      :is-indeterminate="isCopyIndeterminate"
      :is-submitting="isCopySubmitting"
      :selected-store-name="selectedStoreName"
      @update:open="setCopyModalOpen"
      @check-all="handleCopyCheckAll"
      @submit="handleCopySubmit"
      @toggle-store="
        ({ storeId, checked }) => toggleCopyStore(storeId, checked)
      "
    />
  </Page>
</template>

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