<script setup lang="ts">
/**
 * 文件职责：大时段新增/编辑抽屉。
 * 1. 展示时段编辑表单。
 * 2. 通过回调更新父级状态并提交。
 */
import type { PickupWeekDay } from '#/api/store-pickup';
import type {
  PickupSlotFormState,
  PickupWeekDayOption,
} from '#/views/store/pickup/types';

import {
  Button,
  Drawer,
  Input,
  InputNumber,
  Switch,
  TimePicker,
} from 'ant-design-vue';

interface Props {
  form: PickupSlotFormState;
  isDaySelected: (day: PickupWeekDay) => boolean;
  isSaving: boolean;
  onQuickSelectDays: (mode: 'all' | 'weekday' | 'weekend') => void;
  onSetCapacity: (value: number) => void;
  onSetCutoffMinutes: (value: number) => void;
  onSetEnabled: (value: boolean) => void;
  onSetEndTime: (value: string) => void;
  onSetName: (value: string) => void;
  onSetStartTime: (value: string) => void;
  onToggleDay: (day: PickupWeekDay) => void;
  open: boolean;
  title: string;
  weekDayOptions: PickupWeekDayOption[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'submit'): void;
  (event: 'update:open', value: boolean): void;
}>();

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

function readInputValue(event: Event) {
  const target = event.target as HTMLInputElement | null;
  return target?.value ?? '';
}

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>
  <Drawer
    class="pickup-slot-drawer-wrap"
    :open="props.open"
    :title="props.title"
    :width="480"
    :mask-closable="true"
    @update:open="(value) => emit('update:open', value)"
  >
    <div class="pickup-drawer-field">
      <label class="drawer-label required">时段名称</label>
      <Input
        :value="props.form.name"
        :maxlength="20"
        placeholder="如：上午时段"
        @input="(event) => props.onSetName(readInputValue(event))"
      />
    </div>

    <div class="pickup-drawer-grid">
      <div class="pickup-drawer-field">
        <label class="drawer-label required">开始时间</label>
        <TimePicker
          :value="props.form.startTime"
          value-format="HH:mm"
          format="HH:mm"
          :allow-clear="false"
          class="pickup-time-picker"
          input-read-only
          @update:value="(value) => props.onSetStartTime(readTimeValue(value))"
        />
      </div>
      <div class="pickup-drawer-field">
        <label class="drawer-label required">结束时间</label>
        <TimePicker
          :value="props.form.endTime"
          value-format="HH:mm"
          format="HH:mm"
          :allow-clear="false"
          class="pickup-time-picker"
          input-read-only
          @update:value="(value) => props.onSetEndTime(readTimeValue(value))"
        />
      </div>
    </div>

    <div class="pickup-drawer-grid">
      <div class="pickup-drawer-field">
        <label class="drawer-label required">截止时间</label>
        <div class="field-input-with-unit">
          <InputNumber
            :value="props.form.cutoffMinutes"
            :min="0"
            :precision="0"
            :controls="false"
            class="pickup-number-input"
            @update:value="
              (value) => props.onSetCutoffMinutes(toNumber(value, 0))
            "
          />
          <span>分钟</span>
        </div>
        <div class="field-hint">时段开始前停止接单</div>
      </div>

      <div class="pickup-drawer-field">
        <label class="drawer-label required">容量上限</label>
        <div class="field-input-with-unit">
          <InputNumber
            :value="props.form.capacity"
            :min="0"
            :precision="0"
            :controls="false"
            class="pickup-number-input"
            @update:value="(value) => props.onSetCapacity(toNumber(value, 0))"
          />
          <span>单</span>
        </div>
        <div class="field-hint">该时段最大接单数</div>
      </div>
    </div>

    <div class="pickup-drawer-field">
      <label class="drawer-label required">适用星期</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-drawer-field">
      <label class="drawer-label">启用状态</label>
      <Switch
        :checked="props.form.enabled"
        @update:checked="(value) => props.onSetEnabled(Boolean(value))"
      />
    </div>

    <template #footer>
      <div class="pickup-drawer-footer">
        <Button @click="emit('update:open', false)">取消</Button>
        <Button
          type="primary"
          :loading="props.isSaving"
          @click="emit('submit')"
        >
          {{ props.form.id ? '保存修改' : '新增并保存' }}
        </Button>
      </div>
    </template>
  </Drawer>
</template>
