<script setup lang="ts">
/**
 * 文件职责：商品详情编辑页。
 * 1. 根据路由参数加载商品详情与分类。
 * 2. 提供商品基础信息编辑与保存能力。
 */
import type { ProductDetailDto } from '#/api/product';

import { computed, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';

import {
  Button,
  Card,
  Empty,
  Form,
  Input,
  InputNumber,
  message,
  Select,
  Space,
  Spin,
  Tag,
} from 'ant-design-vue';

import {
  getProductCategoryListApi,
  getProductDetailApi,
  saveProductApi,
} from '#/api/product';

import {
  formatCurrency,
  tagsToText,
  textToTags,
} from '../list/composables/product-list-page/helpers';

const route = useRoute();
const router = useRouter();

const isLoading = ref(false);
const isSubmitting = ref(false);
const detail = ref<null | ProductDetailDto>(null);
const categoryOptions = ref<Array<{ label: string; value: string }>>([]);

const form = reactive({
  id: '',
  name: '',
  subtitle: '',
  categoryId: '',
  kind: 'single' as 'combo' | 'single',
  description: '',
  price: 0,
  originalPrice: null as null | number,
  stock: 0,
  status: 'off_shelf' as 'off_shelf' | 'on_sale',
  tagsText: '',
});

const storeId = computed(() => String(route.query.storeId || ''));
const productId = computed(() => String(route.query.productId || ''));

const statusMeta = computed(() => {
  if (form.status === 'on_sale') {
    return { color: 'green', label: '在售' };
  }
  return { color: 'default', label: '下架' };
});

const originalPriceInput = computed<number | undefined>({
  get: () => form.originalPrice ?? undefined,
  set: (value) => {
    form.originalPrice = value ?? null;
  },
});

/** 将详情映射到编辑表单。 */
function patchForm(data: ProductDetailDto) {
  form.id = data.id;
  form.name = data.name;
  form.subtitle = data.subtitle;
  form.categoryId = data.categoryId;
  form.kind = data.kind;
  form.description = data.description;
  form.price = data.price;
  form.originalPrice = data.originalPrice;
  form.stock = data.stock;
  form.status = data.status === 'on_sale' ? 'on_sale' : 'off_shelf';
  form.tagsText = tagsToText(data.tags);
}

/** 加载商品详情与分类。 */
async function loadDetail() {
  if (!storeId.value || !productId.value) {
    detail.value = null;
    categoryOptions.value = [];
    return;
  }

  isLoading.value = true;
  try {
    const [detailData, categories] = await Promise.all([
      getProductDetailApi({
        storeId: storeId.value,
        productId: productId.value,
      }),
      getProductCategoryListApi(storeId.value),
    ]);

    detail.value = detailData;
    categoryOptions.value = categories.map((item) => ({
      label: item.name,
      value: item.id,
    }));
    patchForm(detailData);
  } catch (error) {
    console.error(error);
    detail.value = null;
    categoryOptions.value = [];
  } finally {
    isLoading.value = false;
  }
}

/** 保存商品详情。 */
async function saveDetail() {
  if (!storeId.value || !form.id) return;
  if (!form.name.trim()) {
    message.warning('请输入商品名称');
    return;
  }
  if (!form.categoryId) {
    message.warning('请选择商品分类');
    return;
  }

  isSubmitting.value = true;
  try {
    const saved = await saveProductApi({
      storeId: storeId.value,
      id: form.id,
      name: form.name.trim(),
      subtitle: form.subtitle.trim(),
      categoryId: form.categoryId,
      kind: form.kind,
      description: form.description.trim(),
      price: Number(form.price || 0),
      originalPrice:
        form.originalPrice && Number(form.originalPrice) > 0
          ? Number(form.originalPrice)
          : null,
      stock: Math.max(0, Math.floor(Number(form.stock || 0))),
      status: form.status,
      shelfMode: form.status === 'on_sale' ? 'now' : 'draft',
      tags: textToTags(form.tagsText),
    });
    detail.value = saved;
    patchForm(saved);
    message.success('商品详情已保存');
  } catch (error) {
    console.error(error);
  } finally {
    isSubmitting.value = false;
  }
}

/** 返回商品列表页。 */
function goBack() {
  router.push('/product/list');
}

watch([storeId, productId], loadDetail, { immediate: true });
</script>

<template>
  <Page title="商品详情" content-class="space-y-4 page-product-detail">
    <Card :bordered="false">
      <Space>
        <Button @click="goBack">返回商品列表</Button>
        <Button type="primary" :loading="isSubmitting" @click="saveDetail">
          保存商品
        </Button>
      </Space>
    </Card>

    <Spin :spinning="isLoading">
      <Card v-if="detail" :bordered="false">
        <div class="product-detail-header">
          <div class="product-detail-cover">
            {{ detail.name.slice(0, 1) }}
          </div>
          <div class="product-detail-title-wrap">
            <div class="title">{{ detail.name }}</div>
            <div class="sub">{{ detail.subtitle || '--' }}</div>
            <div class="spu">{{ detail.spuCode }}</div>
          </div>
          <Tag class="product-detail-status" :color="statusMeta.color">
            {{ statusMeta.label }}
          </Tag>
        </div>

        <Form layout="vertical">
          <Space style="display: flex; width: 100%">
            <Form.Item label="商品名称" required style="flex: 1">
              <Input v-model:value="form.name" :maxlength="30" show-count />
            </Form.Item>
            <Form.Item label="副标题" style="flex: 1">
              <Input v-model:value="form.subtitle" :maxlength="60" show-count />
            </Form.Item>
          </Space>

          <Space style="display: flex; width: 100%">
            <Form.Item label="分类" style="flex: 1">
              <Select
                v-model:value="form.categoryId"
                :options="categoryOptions"
                placeholder="请选择分类"
              />
            </Form.Item>
            <Form.Item label="商品类型" style="flex: 1">
              <Select
                v-model:value="form.kind"
                :options="[
                  { label: '单品', value: 'single' },
                  { label: '套餐', value: 'combo' },
                ]"
              />
            </Form.Item>
            <Form.Item label="状态" style="flex: 1">
              <Select
                v-model:value="form.status"
                :options="[
                  { label: '在售', value: 'on_sale' },
                  { label: '下架', value: 'off_shelf' },
                ]"
              />
            </Form.Item>
          </Space>

          <Space style="display: flex; width: 100%">
            <Form.Item label="售价" style="flex: 1">
              <InputNumber
                v-model:value="form.price"
                :min="0"
                :step="0.5"
                style="width: 100%"
              />
            </Form.Item>
            <Form.Item label="原价" style="flex: 1">
              <InputNumber
                v-model:value="originalPriceInput"
                :min="0"
                :step="0.5"
                style="width: 100%"
              />
            </Form.Item>
            <Form.Item label="库存" style="flex: 1">
              <InputNumber
                v-model:value="form.stock"
                :min="0"
                :step="1"
                style="width: 100%"
              />
            </Form.Item>
          </Space>

          <Form.Item label="标签（逗号分隔）">
            <Input
              v-model:value="form.tagsText"
              placeholder="例如：招牌,新品,辣"
            />
          </Form.Item>

          <Form.Item label="商品描述">
            <Input.TextArea
              v-model:value="form.description"
              :rows="4"
              :maxlength="500"
              show-count
            />
          </Form.Item>
        </Form>

        <div class="detail-extra">
          <span>商品ID：{{ detail.id }}</span>
          <span>SPU：{{ detail.spuCode }}</span>
          <span>月销：{{ detail.salesMonthly }}</span>
          <span>当前售价：{{ formatCurrency(detail.price) }}</span>
        </div>
      </Card>

      <Card v-else :bordered="false">
        <Empty description="未找到商品详情" />
      </Card>
    </Spin>
  </Page>
</template>

<style lang="less">
@import './styles/index.less';
</style>
