<script setup lang="ts">
import type { ProductPreviewItem } from '../types';

/**
 * 文件职责：分类详情与商品预览面板。
 */
import type { ProductCategoryManageDto } from '#/api/product';

import { IconifyIcon } from '@vben/icons';

import { Button } from 'ant-design-vue';

import {
  CATEGORY_CHANNEL_META,
  CATEGORY_CHANNEL_ORDER,
  formatPrice,
  getProductStatusClass,
  getProductStatusText,
} from '../types';

interface Props {
  categoryProducts: ProductPreviewItem[];
  isCategoryProductsLoading: boolean;
  selectedCategory: ProductCategoryManageDto | undefined;
}

interface Emits {
  (event: 'edit'): void;
  (event: 'openPicker'): void;
  (event: 'remove'): void;
  (event: 'unbind', item: ProductPreviewItem): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

function isImageUrl(value: string) {
  const source = value.trim();
  if (!source) return false;
  return (
    source.startsWith('data:image/') ||
    source.startsWith('http://') ||
    source.startsWith('https://') ||
    source.startsWith('/')
  );
}
</script>

<template>
  <div class="pcat-right">
    <template v-if="props.selectedCategory">
      <div class="pcat-info-card">
        <div class="pcat-info-hd">
          <div>
            <div class="pcat-info-title">{{ props.selectedCategory.name }}</div>
            <div class="pcat-info-desc">
              {{ props.selectedCategory.description || '暂无分类描述' }}
            </div>
          </div>
          <div class="pcat-info-actions">
            <Button class="pcat-action-btn" @click="emit('edit')">
              <template #icon>
                <IconifyIcon icon="lucide:pencil" />
              </template>
              编辑
            </Button>
            <Button
              danger
              class="pcat-action-btn pcat-action-btn-danger"
              @click="emit('remove')"
            >
              <template #icon>
                <IconifyIcon icon="lucide:trash-2" />
              </template>
              删除
            </Button>
          </div>
        </div>

        <div class="pcat-attr-grid">
          <div class="pcat-attr-item">
            <span class="pcat-attr-label">商品数量</span>
            <span class="pcat-attr-value">
              {{ props.selectedCategory.productCount }}
            </span>
          </div>
          <div class="pcat-attr-item">
            <span class="pcat-attr-label">排序权重</span>
            <span class="pcat-attr-value">{{
              props.selectedCategory.sort
            }}</span>
          </div>
          <div class="pcat-attr-item">
            <span class="pcat-attr-label">启用状态</span>
            <span class="pcat-attr-value">
              <span
                class="pcat-status-tag"
                :class="
                  props.selectedCategory.status === 'enabled'
                    ? 'enabled'
                    : 'disabled'
                "
              >
                {{
                  props.selectedCategory.status === 'enabled'
                    ? '已启用'
                    : '已停用'
                }}
              </span>
            </span>
          </div>
          <div class="pcat-attr-item">
            <span class="pcat-attr-label">分类图标</span>
            <span class="pcat-attr-value icon-value">
              <img
                v-if="isImageUrl(props.selectedCategory.icon)"
                :src="props.selectedCategory.icon"
                class="pcat-category-icon-preview"
                alt="分类图标"
              />
              <span v-else class="pcat-category-icon-empty">未设置</span>
            </span>
          </div>
        </div>
      </div>

      <div class="pcat-channel-card">
        <div class="pcat-channel-hd">渠道可见性</div>
        <div class="pcat-channel-list">
          <div
            v-for="channel in CATEGORY_CHANNEL_ORDER"
            :key="`vis-${channel}`"
            class="pcat-channel-item"
          >
            <div
              class="pcat-ch-icon"
              :class="CATEGORY_CHANNEL_META[channel].cardClass"
            >
              <IconifyIcon
                :icon="CATEGORY_CHANNEL_META[channel].icon"
                class="pcat-ch-icon-svg"
              />
            </div>
            <div class="pcat-ch-info">
              <div class="pcat-ch-name">
                {{ CATEGORY_CHANNEL_META[channel].label }}
              </div>
              <div class="pcat-ch-sub">
                {{ CATEGORY_CHANNEL_META[channel].subText }}
              </div>
            </div>
            <div
              class="pcat-ch-status"
              :class="
                props.selectedCategory.channels.includes(channel) ? 'on' : 'off'
              "
            >
              <span class="pcat-ch-status-dot"></span>
              {{
                props.selectedCategory.channels.includes(channel)
                  ? '已开启'
                  : '未开启'
              }}
            </div>
          </div>
        </div>
      </div>

      <div class="pcat-prod-card">
        <div class="pcat-prod-hd">
          <div class="pcat-prod-title">
            分类商品
            <span>{{ props.categoryProducts.length }} 个商品</span>
          </div>
          <Button class="pcat-add-product-btn" @click="emit('openPicker')">
            <template #icon>
              <IconifyIcon icon="lucide:plus" />
            </template>
            添加商品到此分类
          </Button>
        </div>
        <table class="pcat-prod-table">
          <thead>
            <tr>
              <th>商品</th>
              <th>价格</th>
              <th>月销</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="props.isCategoryProductsLoading">
              <td colspan="5" class="pcat-table-empty">商品加载中...</td>
            </tr>
            <tr v-else-if="props.categoryProducts.length === 0">
              <td colspan="5" class="pcat-table-empty">该分类暂无商品</td>
            </tr>
            <tr v-for="item in props.categoryProducts" v-else :key="item.id">
              <td>
                <div class="pcat-prod-name">
                  <div class="pcat-prod-thumb">
                    <img
                      v-if="item.imageUrl"
                      :src="item.imageUrl"
                      :alt="item.name"
                      class="pcat-prod-thumb-img"
                    />
                    <IconifyIcon
                      v-else
                      icon="lucide:image"
                      class="pcat-prod-thumb-icon"
                    />
                  </div>
                  <div class="pcat-prod-info">
                    <div class="name">{{ item.name }}</div>
                    <div class="spu">{{ item.spuCode }}</div>
                  </div>
                </div>
              </td>
              <td class="pcat-prod-price">{{ formatPrice(item.price) }}</td>
              <td>{{ item.monthlySales }}</td>
              <td>
                <span
                  class="pcat-status-tag"
                  :class="getProductStatusClass(item.status)"
                >
                  {{ getProductStatusText(item.status) }}
                </span>
              </td>
              <td>
                <button
                  type="button"
                  class="pcat-link-btn"
                  @click="emit('unbind', item)"
                >
                  移出
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>

    <div v-else class="pcat-empty-card">暂无分类数据</div>
  </div>
</template>
