<script setup lang="ts">
/**
 * 文件职责：堂食桌位新增/编辑抽屉。
 * 1. 展示桌位编号、区域、座位、停用状态、标签。
 * 2. 通过回调更新父级状态并提交。
 */
import type { DineInTableStatus } from '#/api/store-dinein';
import type {
  DineInSeatsOption,
  DineInTableFormState,
} from '#/views/store/dine-in/types';

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

interface Props {
  areaOptions: Array<{ label: string; value: string }>;
  form: DineInTableFormState;
  isSaving: boolean;
  onSetAreaId: (value: string) => void;
  onSetCode: (value: string) => void;
  onSetDisabled: (value: boolean) => void;
  onSetSeats: (value: number) => void;
  onSetTags: (value: string[]) => void;
  open: boolean;
  seatsOptions: DineInSeatsOption[];
  statusLabelMap: Record<DineInTableStatus, string>;
  submitText: string;
  tagSuggestions: string[];
  title: string;
}

const props = defineProps<Props>();

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

const statusHintText = '就餐中/已预约由业务驱动，管理端仅控制是否停用';
const businessStatusClassMap: Record<DineInTableStatus, string> = {
  dining: 'business-status--dining',
  disabled: 'business-status--disabled',
  free: 'business-status--free',
  reserved: 'business-status--reserved',
};

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

function readString(value: unknown) {
  if (typeof value === 'number' || typeof value === 'string')
    return String(value);
  return '';
}

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

function readTagValues(value: unknown) {
  if (!Array.isArray(value)) return [];
  return value
    .map((item) => (typeof item === 'string' ? item : String(item)))
    .map((item) => item.trim())
    .filter(Boolean);
}

function resolveBusinessStatusClass(status: DineInTableStatus) {
  return businessStatusClassMap[status] ?? 'business-status--disabled';
}
</script>

<template>
  <Drawer
    class="dinein-table-drawer-wrap"
    :open="props.open"
    :title="props.title"
    :width="460"
    :mask-closable="true"
    @update:open="(value) => emit('update:open', value)"
  >
    <div class="drawer-form-block">
      <label class="drawer-form-label required">桌位编号</label>
      <Input
        :value="props.form.code"
        :maxlength="20"
        placeholder="如：A09"
        @input="(event) => props.onSetCode(readInputValue(event))"
      />
    </div>

    <div class="drawer-form-block">
      <label class="drawer-form-label">所属区域</label>
      <Select
        :value="props.form.areaId"
        :options="props.areaOptions"
        placeholder="请选择区域"
        @update:value="(value) => props.onSetAreaId(readString(value))"
      />
    </div>

    <div class="drawer-form-grid">
      <div class="drawer-form-block">
        <label class="drawer-form-label required">座位数</label>
        <Select
          :value="props.form.seats"
          :options="props.seatsOptions"
          @update:value="(value) => props.onSetSeats(readNumber(value, 4))"
        />
      </div>

      <div class="drawer-form-block">
        <label class="drawer-form-label">停用状态</label>
        <div class="drawer-switch-row">
          <Switch
            :checked="props.form.isDisabled"
            @update:checked="(value) => props.onSetDisabled(Boolean(value))"
          />
          <span class="drawer-form-hint">打开后桌位不可被分配</span>
        </div>
      </div>
    </div>

    <div class="drawer-form-block">
      <label class="drawer-form-label">业务状态</label>
      <div class="drawer-status-preview">
        <span
          class="business-status-pill"
          :class="resolveBusinessStatusClass(props.form.sourceStatus)"
        >
          <span class="business-status-dot"></span>
          {{ props.statusLabelMap[props.form.sourceStatus] ?? '--' }}
        </span>
        <span class="drawer-form-hint">{{ statusHintText }}</span>
      </div>
    </div>

    <div class="drawer-form-block">
      <label class="drawer-form-label">标签</label>
      <Select
        class="drawer-tag-select"
        mode="tags"
        :value="props.form.tags"
        :options="
          props.tagSuggestions.map((item) => ({ label: item, value: item }))
        "
        :max-tag-count="4"
        placeholder="输入后回车添加，如：靠窗、VIP"
        @update:value="(value) => props.onSetTags(readTagValues(value))"
      />
    </div>

    <template #footer>
      <div class="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>
