<script setup lang="ts">
/**
 * 文件职责：精细时段规则区块。
 * 1. 展示规则配置表单。
 * 2. 透传规则变更与保存/重置事件。
 */
import type { PickupFineRuleDto, PickupWeekDay } from '#/api/store-pickup';
import type { PickupWeekDayOption } from '#/views/store/pickup/types';

import { Button, Card, InputNumber, Select, TimePicker } from 'ant-design-vue';

interface Props {
  fineRule: PickupFineRuleDto;
  intervalOptions: Array<{ label: string; value: number }>;
  isDaySelected: (day: PickupWeekDay) => boolean;
  isSaving: boolean;
  onQuickSelectDays: (mode: 'all' | 'weekday' | 'weekend') => void;
  onSetDayEndTime: (value: string) => void;
  onSetDayStartTime: (value: string) => void;
  onSetIntervalMinutes: (value: number) => void;
  onSetMinAdvanceHours: (value: number) => void;
  onSetSlotCapacity: (value: number) => void;
  onToggleDay: (day: PickupWeekDay) => void;
  weekDayOptions: PickupWeekDayOption[];
}

const props = defineProps<Props>();

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

function toNumber(value: unknown, fallback = 0) {
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : fallback;
}

function hasFormatMethod(
  value: unknown,
): value is { format: (pattern: string) => string } {
  return Boolean(
    value &&
    typeof value === 'object' &&
    'format' in value &&
    typeof (value as { format?: unknown }).format === 'function',
  );
}

function readTimeValue(value: unknown) {
  if (typeof value === 'string') return value;
  if (hasFormatMethod(value)) return value.format('HH:mm');
  return '';
}
</script>

<template>
  <Card :bordered="false" class="pickup-card">
    <template #title>
      <span class="section-title">生成规则</span>
    </template>

    <div class="pickup-fine-grid">
      <div class="pickup-fine-field">
        <label>时间间隔</label>
        <Select
          :value="props.fineRule.intervalMinutes"
          :options="props.intervalOptions"
          @update:value="
            (value) => props.onSetIntervalMinutes(toNumber(value, 30))
          "
        />
      </div>

      <div class="pickup-fine-field">
        <label>每个时段容量</label>
        <div class="field-input-with-unit">
          <InputNumber
            :value="props.fineRule.slotCapacity"
            :min="1"
            :precision="0"
            :controls="false"
            class="pickup-number-input"
            @update:value="
              (value) => props.onSetSlotCapacity(toNumber(value, 1))
            "
          />
          <span>单</span>
        </div>
        <div class="field-hint">每个时间窗口最大接单量</div>
      </div>

      <div class="pickup-fine-field">
        <label>每日开始时间</label>
        <TimePicker
          :value="props.fineRule.dayStartTime"
          value-format="HH:mm"
          format="HH:mm"
          :allow-clear="false"
          class="pickup-time-picker"
          input-read-only
          @update:value="
            (value) => props.onSetDayStartTime(readTimeValue(value))
          "
        />
      </div>

      <div class="pickup-fine-field">
        <label>每日结束时间</label>
        <TimePicker
          :value="props.fineRule.dayEndTime"
          value-format="HH:mm"
          format="HH:mm"
          :allow-clear="false"
          class="pickup-time-picker"
          input-read-only
          @update:value="(value) => props.onSetDayEndTime(readTimeValue(value))"
        />
      </div>

      <div class="pickup-fine-field">
        <label>最少提前预约</label>
        <div class="field-input-with-unit">
          <InputNumber
            :value="props.fineRule.minAdvanceHours"
            :min="0"
            :precision="0"
            :controls="false"
            class="pickup-number-input"
            @update:value="
              (value) => props.onSetMinAdvanceHours(toNumber(value, 0))
            "
          />
          <span>小时</span>
        </div>
        <div class="field-hint">下单时间距取餐时间的最小间隔</div>
      </div>
    </div>

    <div class="pickup-fine-week-wrap">
      <label>适用星期</label>
      <div class="pickup-day-pill-group">
        <button
          v-for="item in props.weekDayOptions"
          :key="item.value"
          type="button"
          class="pickup-day-pill"
          :class="{ selected: props.isDaySelected(item.value) }"
          @click="props.onToggleDay(item.value)"
        >
          {{ item.label }}
        </button>
      </div>
      <div class="pickup-quick-actions">
        <button type="button" @click="props.onQuickSelectDays('all')">
          全选
        </button>
        <button type="button" @click="props.onQuickSelectDays('weekday')">
          工作日
        </button>
        <button type="button" @click="props.onQuickSelectDays('weekend')">
          周末
        </button>
      </div>
    </div>

    <div class="pickup-form-actions">
      <Button :disabled="props.isSaving" @click="emit('reset')">重置</Button>
      <Button type="primary" :loading="props.isSaving" @click="emit('save')">
        保存规则
      </Button>
    </div>
  </Card>
</template>
