<script setup lang="ts">
import type {
  AddDaysMode,
  AddSlotFormState,
  DayName,
  SlotTypeOption,
} from '../types';

import type { SlotType } from '#/api/store-hours';

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

interface Props {
  addSlotForm: AddSlotFormState;
  dayNames: DayName[];
  getSlotTypePillClass: (type: SlotType) => string;
  isAddDaySelected: (dayOfWeek: number) => boolean;
  isWeeklySubmitting: boolean;
  onSetCapacity: (value: number) => void;
  onSetEndTime: (value: string) => void;
  onSetRemark: (value: string) => void;
  onSetStartTime: (value: string) => void;
  onSetType: (type: SlotType) => void;
  open: boolean;
  slotTypeDelivery: SlotType;
  slotTypeOptions: SlotTypeOption[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'quickSelect', mode: AddDaysMode): void;
  (event: 'submit'): void;
  (event: 'toggleDay', dayOfWeek: number): void;
  (event: 'update:open', value: boolean): void;
}>();

function getInputValue(event: Event) {
  const target = event.target as HTMLInputElement | HTMLTextAreaElement | 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="add-slot-drawer-wrap"
    :open="props.open"
    title="添加时段"
    :width="480"
    :mask-closable="true"
    @update:open="(value) => emit('update:open', value)"
  >
    <div class="form-block">
      <label class="form-label required">时段类型</label>
      <div class="type-pill-group">
        <button
          v-for="item in props.slotTypeOptions"
          :key="item.value"
          type="button"
          class="type-pill"
          :class="[
            props.getSlotTypePillClass(item.value),
            { active: props.addSlotForm.type === item.value },
          ]"
          @click="props.onSetType(item.value)"
        >
          {{ item.label }}
        </button>
      </div>
    </div>

    <div class="form-block">
      <label class="form-label required">适用星期</label>
      <div class="day-pill-group">
        <button
          v-for="(day, index) in props.dayNames"
          :key="day.label"
          type="button"
          class="day-pill"
          :class="{ selected: props.isAddDaySelected(index) }"
          @click="emit('toggleDay', index)"
        >
          {{ day.label }}
        </button>
      </div>
      <div class="quick-actions">
        <button
          type="button"
          class="quick-btn"
          @click="emit('quickSelect', 'all')"
        >
          全选
        </button>
        <button
          type="button"
          class="quick-btn"
          @click="emit('quickSelect', 'weekday')"
        >
          工作日
        </button>
        <button
          type="button"
          class="quick-btn"
          @click="emit('quickSelect', 'weekend')"
        >
          周末
        </button>
      </div>
    </div>

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

    <div
      v-if="props.addSlotForm.type === props.slotTypeDelivery"
      class="form-block"
    >
      <label class="form-label">容量上限</label>
      <div class="capacity-row">
        <input
          :value="props.addSlotForm.capacity"
          type="number"
          class="native-input capacity-input"
          min="1"
          step="1"
          @input="
            (event) => {
              const value = Number(getInputValue(event));
              props.onSetCapacity(Number.isFinite(value) ? value : 0);
            }
          "
        />
        <span>单/小时</span>
      </div>
      <div class="capacity-hint">该时段内每小时最大接单量</div>
    </div>

    <div class="form-block">
      <label class="form-label">备注</label>
      <textarea
        :value="props.addSlotForm.remark"
        rows="2"
        class="native-textarea"
        placeholder="可选，如：午市高峰时段"
        @input="(event) => props.onSetRemark(getInputValue(event))"
      ></textarea>
    </div>

    <template #footer>
      <div class="drawer-footer">
        <Button @click="emit('update:open', false)">取消</Button>
        <Button
          type="primary"
          :loading="props.isWeeklySubmitting"
          @click="emit('submit')"
        >
          新增并保存
        </Button>
      </div>
    </template>
  </Drawer>
</template>
