<script setup lang="ts">
/**
 * 文件职责：包装费设置卡片。
 * 1. 展示按订单/按商品模式切换。
 * 2. 展示固定包装费、阶梯包装费与操作表格。
 */
import type { PackagingFeeTierDto } from '#/api/store-fees';

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

interface Props {
  canOperate: boolean;
  fixedPackagingFee: number;
  formatCurrency: (value: number) => string;
  formatTierRange: (tier: PackagingFeeTierDto) => string;
  isSaving: boolean;
  isSwitchingMode: boolean;
  onSetFixedPackagingFee: (value: number) => void;
  onSetPackagingMode: (value: 'item' | 'order') => void;
  onSetTieredEnabled: (value: boolean) => void;
  packagingMode: 'item' | 'order';
  tieredEnabled: boolean;
  tiers: PackagingFeeTierDto[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'addTier'): void;
  (event: 'deleteTier', tier: PackagingFeeTierDto): void;
  (event: 'editTier', tier: PackagingFeeTierDto): void;
  (event: 'reset'): void;
  (event: 'save'): void;
}>();

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

function getModeLabel(mode: 'item' | 'order') {
  return mode === 'order' ? '按订单收取' : '按商品收取';
}

function getModeHint(mode: 'item' | 'order') {
  return mode === 'order' ? '按订单金额统一计算包装费' : '按商品维度汇总包装费';
}

function getModeEffect(mode: 'item' | 'order') {
  return mode === 'order'
    ? '固定包装费/阶梯包装费生效，商品包装费暂不生效。'
    : '商品包装费生效，本页固定包装费/阶梯包装费暂不生效。';
}
</script>

<template>
  <Card :bordered="false" class="fees-card">
    <template #title>
      <span class="section-title">包装费设置</span>
    </template>

    <div class="packaging-mode-panel">
      <div class="packaging-mode-header">
        <div class="packaging-mode-title">包装费收取方式</div>
        <div class="packaging-mode-badge">
          {{
            props.isSwitchingMode
              ? '切换中...'
              : `当前：${getModeLabel(props.packagingMode)}`
          }}
        </div>
      </div>

      <div class="packaging-mode-grid">
        <button
          type="button"
          class="packaging-mode-card"
          :class="{ active: props.packagingMode === 'order' }"
          :disabled="!props.canOperate || props.isSwitchingMode"
          @click="props.onSetPackagingMode('order')"
        >
          <div class="packaging-mode-card-title">
            <span class="packaging-mode-dot"></span>
            {{ getModeLabel('order') }}
          </div>
          <div class="packaging-mode-card-hint">{{ getModeHint('order') }}</div>
        </button>

        <button
          type="button"
          class="packaging-mode-card"
          :class="{ active: props.packagingMode === 'item' }"
          :disabled="!props.canOperate || props.isSwitchingMode"
          @click="props.onSetPackagingMode('item')"
        >
          <div class="packaging-mode-card-title">
            <span class="packaging-mode-dot"></span>
            {{ getModeLabel('item') }}
          </div>
          <div class="packaging-mode-card-hint">{{ getModeHint('item') }}</div>
        </button>
      </div>

      <div class="packaging-mode-effect">
        切换后效果：{{ getModeEffect(props.packagingMode) }}
      </div>
    </div>

    <template v-if="props.packagingMode === 'order'">
      <div class="fees-field-grid">
        <div class="fees-field">
          <label>固定包装费</label>
          <div class="fees-input-row">
            <span class="fees-unit">¥</span>
            <InputNumber
              :value="props.fixedPackagingFee"
              :min="0"
              :precision="2"
              :step="0.5"
              :controls="false"
              :disabled="!props.canOperate"
              class="fees-input"
              placeholder="如：2.00"
              @update:value="
                (value) =>
                  props.onSetFixedPackagingFee(
                    toNumber(value, props.fixedPackagingFee),
                  )
              "
            />
          </div>
          <div class="fees-hint">每笔订单统一收取的包装费</div>
        </div>
      </div>

      <div class="packaging-tier-block">
        <div class="packaging-tier-toggle-row">
          <Switch
            :checked="props.tieredEnabled"
            :disabled="!props.canOperate"
            @update:checked="
              (value) => props.onSetTieredEnabled(Boolean(value))
            "
          />
          <span class="packaging-tier-toggle-label">启用阶梯包装费</span>
        </div>

        <template v-if="props.tieredEnabled">
          <div class="packaging-tier-note">
            启用后将按订单金额区间收取不同包装费，覆盖上方固定包装费
          </div>

          <div class="packaging-tier-table-wrap">
            <table class="packaging-tier-table">
              <thead>
                <tr>
                  <th>订单金额区间</th>
                  <th>包装费</th>
                  <th style="width: 112px">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="tier in props.tiers" :key="tier.id">
                  <td>{{ props.formatTierRange(tier) }}</td>
                  <td>{{ props.formatCurrency(tier.fee) }}</td>
                  <td>
                    <a
                      class="fees-table-link"
                      @click="props.canOperate && emit('editTier', tier)"
                    >
                      编辑
                    </a>
                    <a
                      class="fees-table-link danger"
                      @click="props.canOperate && emit('deleteTier', tier)"
                    >
                      删除
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="packaging-tier-add-row">
            <Button :disabled="!props.canOperate" @click="emit('addTier')">
              + 添加阶梯
            </Button>
          </div>
        </template>
      </div>
    </template>

    <template v-else>
      <div class="packaging-item-mode-tip">
        <div class="tip-title">按商品收取包装费</div>
        <div class="tip-desc">
          每个商品单独设置包装费，请在商品管理中配置，系统将自动汇总订单内所有商品包装费。
        </div>
      </div>
    </template>

    <div class="fees-actions">
      <Button
        :disabled="props.isSaving || !props.canOperate"
        @click="emit('reset')"
      >
        重置
      </Button>
      <Button
        type="primary"
        :loading="props.isSaving"
        :disabled="!props.canOperate"
        @click="emit('save')"
      >
        保存设置
      </Button>
    </div>
  </Card>
</template>
