<script setup lang="ts">
/**
 * 文件职责：周排班看板。
 * 1. 展示各员工周排班只读视图。
 * 2. 提供“编辑排班”入口。
 */
import type { ShiftType, StaffDayShiftDto } from '#/api/store-staff';
import type { DayOption, WeekEditorRow } from '#/views/store/staff/types';

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

interface Props {
  dayOptions: DayOption[];
  getShiftClass: (shiftType: ShiftType) => string;
  getShiftLabel: (shiftType: ShiftType) => string;
  getShiftTimeText: (shift: StaffDayShiftDto) => string;
  isScheduleConfigured: boolean;
  isTemplateConfigured: boolean;
  roleLabelResolver: (roleType: WeekEditorRow['roleType']) => string;
  rows: WeekEditorRow[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'editWeek'): void;
}>();

/** 读取员工某日排班，缺失时返回未配置。 */
function resolveDayShift(
  row: WeekEditorRow,
  dayOfWeek: number,
): StaffDayShiftDto | undefined {
  return row.shifts.find((item) => item.dayOfWeek === dayOfWeek);
}

/** 读取某单元格样式。 */
function resolveCellClass(shift: StaffDayShiftDto | undefined) {
  if (!shift) return 'shift-unconfigured';
  return props.getShiftClass(shift.shiftType);
}

/** 读取某单元格时间文案。 */
function resolveCellTimeText(shift: StaffDayShiftDto | undefined) {
  if (!shift) return '未配置';
  return props.getShiftTimeText(shift);
}

/** 读取某单元格班次文案。 */
function resolveCellLabel(shift: StaffDayShiftDto | undefined) {
  if (!shift) return '未配置';
  return props.getShiftLabel(shift.shiftType);
}
</script>

<template>
  <Card :bordered="false" class="staff-card">
    <template #title>
      <span class="section-title">本周排班</span>
    </template>
    <template #extra>
      <Button
        :disabled="!props.isTemplateConfigured"
        :title="props.isTemplateConfigured ? '' : '请先配置班次模板'"
        @click="emit('editWeek')"
      >
        编辑排班
      </Button>
    </template>

    <div v-if="!props.isTemplateConfigured" class="schedule-empty">
      <Empty description="未配置班次模板，请先在上方完成模板设置" />
    </div>

    <div v-else-if="props.rows.length === 0" class="schedule-empty">
      <Empty description="暂无可排班员工" />
    </div>

    <div v-else class="schedule-board-wrap">
      <div v-if="!props.isScheduleConfigured" class="schedule-board-tip">
        当前门店还没有排班数据，点击“编辑排班”开始配置。
      </div>

      <table class="schedule-board-table">
        <thead>
          <tr>
            <th>员工</th>
            <th v-for="day in props.dayOptions" :key="day.dayOfWeek">
              {{ day.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in props.rows" :key="row.staffId">
            <td class="schedule-staff-cell">
              <div class="schedule-staff-name">{{ row.staffName }}</div>
              <div class="schedule-staff-role">
                {{ props.roleLabelResolver(row.roleType) }}
              </div>
            </td>

            <td
              v-for="day in props.dayOptions"
              :key="`${row.staffId}-${day.dayOfWeek}`"
            >
              <div
                class="schedule-cell"
                :class="resolveCellClass(resolveDayShift(row, day.dayOfWeek))"
              >
                <span class="schedule-cell-time">
                  {{ resolveCellTimeText(resolveDayShift(row, day.dayOfWeek)) }}
                </span>
                <span class="schedule-cell-label">
                  {{ resolveCellLabel(resolveDayShift(row, day.dayOfWeek)) }}
                </span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </Card>
</template>
