/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React from 'react';
import {
  Card,
  Tag,
  Tooltip,
  Checkbox,
  Empty,
  Pagination,
  Button,
  Avatar,
} from '@douyinfe/semi-ui';
import { IconHelpCircle } from '@douyinfe/semi-icons';
import { Copy } from 'lucide-react';
import {
  IllustrationNoResult,
  IllustrationNoResultDark,
} from '@douyinfe/semi-illustrations';
import {
  stringToColor,
  calculateModelPrice,
  getModelPriceItems,
  getLobeHubIcon,
  getUsedGroupContext,
  pickChannelScopedModelFloat,
  computeChannelBillingRates,
} from '../../../../../helpers';
import PricingCardSkeleton from './PricingCardSkeleton';
import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
import { renderLimitedItems } from '../../../../common/ui/RenderUtils';
import { useIsMobile } from '../../../../../hooks/common/useIsMobile';
const CARD_STYLES = {
  container:
    'w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md',
  icon: 'w-8 h-8 flex items-center justify-center',
  selected: 'border-blue-500 bg-blue-50',
  default: 'border-gray-200 hover:border-gray-300',
};

const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

const PricingCardView = ({
  filteredModels,
  loading,
  rowSelection,
  pageSize,
  setPageSize,
  currentPage,
  setCurrentPage,
  selectedGroup,
  groupRatio,
  groupModelPrice,
  groupModelRatio,
  copyText,
  setModalImageUrl,
  setIsModalOpenurl,
  currency,
  siteDisplayType,
  tokenUnit,
  displayPrice,
  showRatio,
  t,
  selectedRowKeys = [],
  setSelectedRowKeys,
  openModelDetail,
  showSizeChanger = true,
  blurPricing = false,
  searchValue = '',
  channelVideoRatio = {},
  channelVideoCompletionRatio = {},
  channelVideoPrice = {},
  gridCols = 0, // 当 > 0 时使用 grid 布局（如 gridCols=2 表示 2 列）
}) => {
  const showSkeleton = useMinimumLoadingTime(loading);
  const startIndex = (currentPage - 1) * pageSize;
  const paginatedModels = filteredModels.slice(
    startIndex,
    startIndex + pageSize,
  );
  const getModelKey = (model) => model.key ?? model.model_name ?? model.id;
  const isMobile = useIsMobile();
  const normalizedSearchValue = String(searchValue || '').trim();

  const renderHighlightedText = (value) => {
    const text = value == null ? '' : String(value);
    if (!normalizedSearchValue) return text;
    const regex = new RegExp(`(${escapeRegExp(normalizedSearchValue)})`, 'ig');
    return text.split(regex).map((part, idx) =>
      part.toLowerCase() === normalizedSearchValue.toLowerCase() ? (
        <span
          key={idx}
          style={{
            color: '#ef4444',
            fontWeight: 700,
            backgroundColor: 'rgba(239, 68, 68, 0.12)',
            borderRadius: 4,
          }}
        >
          {part}
        </span>
      ) : (
        part
      ),
    );
  };

  const handleCheckboxChange = (model, checked) => {
    if (!setSelectedRowKeys) return;
    const modelKey = getModelKey(model);
    const newKeys = checked
      ? Array.from(new Set([...selectedRowKeys, modelKey]))
      : selectedRowKeys.filter((key) => key !== modelKey);
    setSelectedRowKeys(newKeys);
    rowSelection?.onChange?.(newKeys, null);
  };

  // 根据 supplier_type 返回对应的 Tag 颜色
  const getSupplierTypeColor = (supplierType) => {
    switch (supplierType) {
      case '公有云':
        return 'green';
      case 'AIDC':
        return 'light-green';
      case '企业中转站':
        return 'lime';
      case '个人中转站':
        return 'yellow';
      default:
        return stringToColor(supplierType);
    }
  };

  // 根据模型的 channel_list 推导可展示的供应商项。
  // 无 logo 时不展示 supplier_alias，仅保留供应商类型标签。
  const getSupplierLogos = (model) => {
    if (!model?.channel_list || model.channel_list.length === 0) return [];
    const seen = new Set();
    const items = [];
    model.channel_list.forEach((ch, idx) => {
      const logo =
        (ch?.company_logo_url && String(ch.company_logo_url).trim()) || '';
      const supplierType =
        (ch?.supplier_type && String(ch.supplier_type).trim()) || '';
      const alias =
        (ch?.supplier_alias && String(ch.supplier_alias).trim()) || '';
      const name = ch?.channel_name || '';
      if (!logo && !supplierType) return;
      const displayAlias = logo ? alias : '';
      const dedupKey = `${logo}|${supplierType}|${displayAlias}`;
      if (seen.has(dedupKey)) return;
      seen.add(dedupKey);
      items.push({
        key: ch?.channel_id ?? `${dedupKey}-${idx}`,
        logo,
        supplierType,
        alias: displayAlias,
        name,
      });
    });
    return items;
  };

  const calculateChannelPrices = (model, opts = {}) => {
    const { skipSimpleVideoFlat = false, skipSimpleFixed = false } = opts;
    if (!model.channel_list || model.channel_list.length === 0) {
      return null;
    }

    const { usedGroupRatio } = getUsedGroupContext(
      model,
      selectedGroup,
      groupRatio,
    );

    // 辅助函数：格式化价格
    const formatPrice = (priceUSD) => {
      const rawDisplayPrice = displayPrice(priceUSD);
      const unitDivisor = tokenUnit === 'K' ? 1000 : 1;
      const numericPrice =
        parseFloat(rawDisplayPrice.replace(/[^0-9.]/g, '')) / unitDivisor;

      let symbol = '$';
      if (currency === 'CNY') {
        symbol = '¥';
      } else if (currency === 'CUSTOM') {
        try {
          const statusStr = localStorage.getItem('status');
          if (statusStr) {
            const s = JSON.parse(statusStr);
            symbol = s?.custom_currency_symbol || '¤';
          }
        } catch (e) {
          symbol = '¤';
        }
      }

      return { value: parseFloat(numericPrice.toFixed(2)), symbol };
    };

    const modelHasVideoRatio =
      model.video_ratio != null &&
      model.video_ratio !== undefined &&
      Number.isFinite(Number(model.video_ratio));
    const modelHasVideoCompletion =
      model.video_completion_ratio != null &&
      model.video_completion_ratio !== undefined &&
      Number.isFinite(Number(model.video_completion_ratio));
    const modelHasVideoFlatPrice =
      model.video_price != null &&
      model.video_price !== undefined &&
      Number.isFinite(Number(model.video_price));

    // 提取所有通道的价格（与 relay 一致：ch.model_ratio 已含渠道折扣；再乘分组倍率）
    const prices = {
      input: [],
      output: [],
      cache: [],
      createCache: [],
      fixed: [],
      videoToken: [],
      videoFlat: [],
    };
    const originalPrices = {
      input: [],
      output: [],
      cache: [],
      createCache: [],
      fixed: [],
      videoToken: [],
      videoFlat: [],
    };

    model.channel_list.forEach((ch) => {
      const cid = ch.channel_id;
      const mname = model.model_name;

      // ============================================================
      // 新计费公式参数：
      //   ch.model_ratio / ch.model_price 为原始渠道倍率（后端不再预乘成本折扣）
      //   成本折扣率 = price_discount_percent / 100
      //   加价倍率   = markup_discount_rate / 100
      //
      //   输入   = (ch.model_ratio × costDisc + globalMr × markupRate) × 2 × groupRatio
      //   输出   = (ch.model_ratio × cr × costDisc + globalMr × globalCR × markupRate) × 2 × groupRatio
      //   缓存读 = (ch.model_ratio × cacheRatio × costDisc + globalMr × globalCacheR × markupRate) × 2 × groupRatio
      //   缓存写 = (ch.model_ratio × createCacheRatio × costDisc + globalMr × globalCreateCacheR × markupRate) × 2 × groupRatio
      //   固定价 = (ch.model_price × costDisc + globalMp × markupRate) × groupRatio
      // ============================================================
      const priceDiscountPercent =
        ch.price_discount_percent != null ? ch.price_discount_percent : 100;
      const markupDiscountPercent = ch.markup_discount_rate || 0;
      const globalMr = model.model_ratio || 0;
      const globalMp = model.model_price || 0;

      const channelVideoFlatUsd =
        pickChannelScopedModelFloat(channelVideoPrice, cid, mname);
      const flatUsd =
        channelVideoFlatUsd != null
          ? channelVideoFlatUsd
          : modelHasVideoFlatPrice
            ? Number(model.video_price)
            : null;
      if (!skipSimpleVideoFlat && flatUsd != null && flatUsd > 0) {
        prices.videoFlat.push(formatPrice(flatUsd * usedGroupRatio));
        originalPrices.videoFlat.push(formatPrice(flatUsd));
      }

      // 全局子倍率（用于加价侧）
      const globalCR = model.completion_ratio || 0;
      const globalCacheR =
        model.cache_ratio != null ? Number(model.cache_ratio) : 0;
      const globalCreateCacheR =
        model.create_cache_ratio != null
          ? Number(model.create_cache_ratio)
          : 0;

      const billingRates = computeChannelBillingRates({
        channelModelRatio: ch.model_ratio,
        channelCompletionRatio: ch.completion_ratio,
        channelCacheRatio: ch.cache_ratio,
        channelCreateCacheRatio: ch.create_cache_ratio,
        channelModelPrice: ch.model_price,
        priceDiscountPercent,
        markupDiscountPercent,
        globalModelRatio: globalMr,
        globalModelPrice: globalMp,
        globalCompletionRatio: globalCR,
        globalCacheRatio: globalCacheR,
        globalCreateCacheRatio: globalCreateCacheR,
      });

      // 按量计费
      if (model.quota_type === 0) {
        if (ch.model_ratio !== undefined && ch.model_ratio !== null) {
          prices.input.push(
            formatPrice(billingRates.inputRatioPrice * usedGroupRatio),
          );
          originalPrices.input.push(formatPrice(billingRates.inputRatioPrice));

          // 输出价格：仅当全局模型配置了 completion_ratio 时才展示
          if (
            ch.completion_ratio !== undefined &&
            ch.completion_ratio !== null &&
            model.completion_ratio != null
          ) {
            prices.output.push(
              formatPrice(billingRates.completionRatioPrice * usedGroupRatio),
            );
            originalPrices.output.push(
              formatPrice(billingRates.completionRatioPrice),
            );
          }

          // 缓存读取价格：仅当全局模型配置了 cache_ratio 时才展示
          if (
            ch.cache_ratio !== undefined &&
            ch.cache_ratio !== null &&
            model.cache_ratio != null
          ) {
            prices.cache.push(
              formatPrice(billingRates.cacheRatioPrice * usedGroupRatio),
            );
            originalPrices.cache.push(formatPrice(billingRates.cacheRatioPrice));
          }

          // 缓存创建价格：仅当全局模型配置了 create_cache_ratio 时才展示
          if (
            ch.create_cache_ratio !== undefined &&
            ch.create_cache_ratio !== null &&
            model.create_cache_ratio != null
          ) {
            prices.createCache.push(
              formatPrice(
                billingRates.cacheCreationRatioPrice * usedGroupRatio,
              ),
            );
            originalPrices.createCache.push(
              formatPrice(billingRates.cacheCreationRatioPrice),
            );
          }

          const vrCh = pickChannelScopedModelFloat(
            channelVideoRatio,
            cid,
            mname,
          );
          const vcrCh = pickChannelScopedModelFloat(
            channelVideoCompletionRatio,
            cid,
            mname,
          );
          const effVr =
            vrCh != null
              ? vrCh
              : modelHasVideoRatio
                ? Number(model.video_ratio)
                : 1;
          const effVcr =
            vcrCh != null
              ? vcrCh
              : modelHasVideoCompletion
                ? Number(model.video_completion_ratio)
                : 1;

          const showVideoToken =
            modelHasVideoRatio ||
            modelHasVideoCompletion ||
            vrCh != null ||
            vcrCh != null;

          if (showVideoToken) {
            const videoTokUsd =
              billingRates.inputRatioPrice * effVr * effVcr * usedGroupRatio;
            prices.videoToken.push(formatPrice(videoTokUsd));
            originalPrices.videoToken.push(
              formatPrice(billingRates.inputRatioPrice * effVr * effVcr),
            );
          }
        }
      }
      // 按次计费
      else if (model.quota_type === 1 || ch.quota_type === 1) {
        if (!skipSimpleFixed && ch.model_price !== undefined && ch.model_price !== null) {
          prices.fixed.push(
            formatPrice(billingRates.effModelPrice * usedGroupRatio),
          );
          originalPrices.fixed.push(formatPrice(billingRates.effModelPrice));
        }
      }
    });

    // 根数据价格（用同一口径计算，用于与 channel 价格比较）
    const rootPrices = {};
    if (model.quota_type === 0) {
      if (model.model_ratio !== undefined && model.model_ratio !== null) {
        rootPrices.input = formatPrice(model.model_ratio * 2);
        if (
          model.completion_ratio !== undefined &&
          model.completion_ratio !== null
        ) {
          rootPrices.output = formatPrice(
            model.model_ratio * model.completion_ratio * 2,
          );
        }
        if (model.cache_ratio !== undefined && model.cache_ratio !== null) {
          rootPrices.cache = formatPrice(
            model.model_ratio * model.cache_ratio * 2,
          );
        }
        if (
          model.create_cache_ratio !== undefined &&
          model.create_cache_ratio !== null
        ) {
          rootPrices.createCache = formatPrice(
            model.model_ratio * model.create_cache_ratio * 2,
          );
        }
      }
    } else if (model.quota_type === 1) {
      if (
        !skipSimpleFixed &&
        model.model_price !== undefined &&
        model.model_price !== null
      ) {
        rootPrices.fixed = formatPrice(model.model_price);
      }
    }
    if (model.quota_type === 0) {
      if (model.model_ratio !== undefined && model.model_ratio !== null) {
        const rootVr = modelHasVideoRatio ? Number(model.video_ratio) : 1;
        const rootVcr = modelHasVideoCompletion
          ? Number(model.video_completion_ratio)
          : 1;
        if (modelHasVideoRatio || modelHasVideoCompletion) {
          rootPrices.videoToken = formatPrice(
            model.model_ratio * rootVr * rootVcr * 2,
          );
        }
      }
    }
    if (modelHasVideoFlatPrice && !skipSimpleVideoFlat) {
      rootPrices.videoFlat = formatPrice(Number(model.video_price));
    }

    // 若根价格高于任意一个 channel 的对应价格，则返回划线原价与折扣
    const getOriginal = (rootPrice, channelPriceArray) => {
      if (!rootPrice || !channelPriceArray || channelPriceArray.length === 0)
        return null;
      const minChannel = Math.min(...channelPriceArray.map((p) => p.value));
      if (rootPrice.value > minChannel && rootPrice.value > 0) {
        const discount = Math.round((1 - minChannel / rootPrice.value) * 100);
        return {
          text: `${rootPrice.symbol}${rootPrice.value}`,
          discount,
        };
      }
      return null;
    };

    // 计算范围
    const calculateRange = (priceArray) => {
      if (priceArray.length === 0) return null;
      if (priceArray.length === 1) {
        const p = priceArray[0];
        return {
          single: `${p.symbol}${p.value}`,
          min: null,
          max: null,
          symbol: p.symbol,
        };
      }

      const values = priceArray.map((p) => p.value);
      const uniqueValues = [...new Set(values)];

      if (uniqueValues.length === 1) {
        const p = priceArray[0];
        return {
          single: `${p.symbol}${p.value}`,
          min: null,
          max: null,
          symbol: p.symbol,
        };
      }

      const min = Math.min(...values);
      const max = Math.max(...values);
      const symbol = priceArray[0].symbol;
      return { single: null, min, max, symbol };
    };

    const unitLabel = tokenUnit === 'K' ? 'K' : 'M';
    const unitSuffix = ` / 1${unitLabel} Tokens`;
    const fixedSuffix = ` / ${t('次')}`;

    return {
      input: calculateRange(prices.input),
      output: calculateRange(prices.output),
      cache: calculateRange(prices.cache),
      createCache: calculateRange(prices.createCache),
      fixed: calculateRange(prices.fixed),
      original: {
        input: getOriginal(rootPrices.input, originalPrices.input),
        output: getOriginal(rootPrices.output, originalPrices.output),
        cache: getOriginal(rootPrices.cache, originalPrices.cache),
        createCache: getOriginal(
          rootPrices.createCache,
          originalPrices.createCache,
        ),
        fixed: getOriginal(rootPrices.fixed, originalPrices.fixed),
        videoToken: getOriginal(
          rootPrices.videoToken,
          originalPrices.videoToken,
        ),
        videoFlat: getOriginal(rootPrices.videoFlat, originalPrices.videoFlat),
      },
      videoToken: calculateRange(prices.videoToken),
      videoFlat: calculateRange(prices.videoFlat),
      unitSuffix,
      fixedSuffix,
      videoFlatSuffix: ` / ${t('条')}`,
      quotaType: model.quota_type,
    };
  };

  // 获取模型的价格项（优先使用 channel 价格）
  const getModelPriceItemsForCard = (model, priceData) => {
    const hint = model.video_flat_clip_hint;
    const useTieredVideoFlat =
      hint &&
      Number(hint.tier_count) > 0 &&
      Number(hint.min_usd_after_channel_discount) > 0;
    const imageHint = model.image_per_image_hint;
    const useTieredImagePerImage =
      imageHint &&
      Number(imageHint.tier_count) > 0 &&
      Number(imageHint.min_usd_after_channel_discount) > 0;

    const channelPrices = calculateChannelPrices(model, {
      skipSimpleVideoFlat: useTieredVideoFlat,
      skipSimpleFixed: useTieredImagePerImage,
    });

    // 如果没有 channel 价格，使用原有逻辑
    if (!channelPrices) {
      return getModelPriceItems(priceData, t, siteDisplayType);
    }

    // 使用 channel 价格构建价格项
    const items = [];
    const {
      input,
      output,
      cache,
      createCache,
      fixed,
      original,
      unitSuffix,
      fixedSuffix,
      videoToken,
      videoFlat,
      videoFlatSuffix,
      quotaType,
    } = channelPrices;

    // 按次计费
    if (quotaType === 1 && fixed) {
      items.push({
        key: 'fixed',
        label: t('模型价格'),
        value:
          fixed.single ||
          `${fixed.symbol}${fixed.min} ~ ${fixed.symbol}${fixed.max}`,
        suffix: fixedSuffix,
        original: original?.fixed,
      });
    }
    // 按量计费
    else {
      if (input) {
        items.push({
          key: 'input',
          label: t('输入价格'),
          value:
            input.single ||
            `${input.symbol}${input.min} ~ ${input.symbol}${input.max}`,
          suffix: unitSuffix,
          original: original?.input,
        });
      }

      if (output) {
        items.push({
          key: 'output',
          label: t('输出价格'),
          value:
            output.single ||
            `${output.symbol}${output.min} ~ ${output.symbol}${output.max}`,
          suffix: unitSuffix,
          original: original?.output,
        });
      }

      if (videoToken) {
        items.push({
          key: 'video-token',
          label: t('视频（倍率计价）'),
          value:
            videoToken.single ||
            `${videoToken.symbol}${videoToken.min} ~ ${videoToken.symbol}${videoToken.max}`,
          suffix: unitSuffix,
          original: original?.videoToken,
        });
      }

      // if (cache) {
      //   items.push({
      //     key: 'cache',
      //     label: t('缓存读取价格'),
      //     value: cache.single || `${cache.symbol}${cache.min} ~ ${cache.symbol}${cache.max}`,
      //     suffix: unitSuffix,
      //     original: original?.cache,
      //   });
      // }

      // if (createCache) {
      //   items.push({
      //     key: 'create-cache',
      //     label: t('缓存创建价格'),
      //     value: createCache.single || `${createCache.symbol}${createCache.min} ~ ${createCache.symbol}${createCache.max}`,
      //     suffix: unitSuffix,
      //     original: original?.createCache,
      //   });
      // }
    }

    if (videoFlat) {
      items.push({
        key: 'video-flat',
        label: t('视频按条（固定价）'),
        value:
          videoFlat.single ||
          `${videoFlat.symbol}${videoFlat.min} ~ ${videoFlat.symbol}${videoFlat.max}`,
        suffix: videoFlatSuffix || ` / ${t('条')}`,
        original: original?.videoFlat,
      });
    }

    if (useTieredVideoFlat) {
      const { usedGroupRatio } = getUsedGroupContext(
        model,
        selectedGroup,
        groupRatio,
      );
      const usd = Number(hint.min_usd_after_channel_discount) * usedGroupRatio;
      const perSecond = hint.billing_mode === 'per_second';
      items.push({
        key: 'video-flat-tiered',
        label: perSecond ? t('按秒') : t('按条'),
        valueNode: (
          <span className='font-bold text-black'>
            {t('最低价')}
            {displayPrice(usd)}
            {perSecond ? t('/秒起') : t('/条起')}
          </span>
        ),
      });
    }

    if (useTieredImagePerImage) {
      const { usedGroupRatio } = getUsedGroupContext(
        model,
        selectedGroup,
        groupRatio,
      );
      const usd =
        Number(imageHint.min_usd_after_channel_discount) * usedGroupRatio;
      items.push({
        key: 'image-per-image-tiered',
        label: t('按张'),
        valueNode: (
          <span className='font-bold text-black'>
            {t('最低价')}
            {displayPrice(usd)}
            {t('/张起')}
          </span>
        ),
      });
    }

    return items;
  };

  // 获取模型图标
  const getModelIcon = (model) => {
    if (!model || !model.model_name) {
      return (
        <div className={CARD_STYLES.container}>
          <Avatar size='large'>?</Avatar>
        </div>
      );
    }
    // 1) 优先使用模型自定义图标
    if (model.icon) {
      return (
        <div className={CARD_STYLES.container}>
          <div className={CARD_STYLES.icon}>
            {getLobeHubIcon(model.icon, 32)}
          </div>
        </div>
      );
    }
    // 2) 退化为供应商图标
    if (model.vendor_icon) {
      return (
        <div className={CARD_STYLES.container}>
          <div className={CARD_STYLES.icon}>
            {getLobeHubIcon(model.vendor_icon, 32)}
          </div>
        </div>
      );
    }

    // 如果没有供应商图标，使用模型名称生成头像

    const avatarText =
      (model.model_name || '').slice(0, 2).toUpperCase() || 'AI';
    return (
      <div className={CARD_STYLES.container}>
        <Avatar
          size='large'
          style={{
            width: 48,
            height: 48,
            borderRadius: 16,
            fontSize: 16,
            fontWeight: 'bold',
          }}
        >
          {avatarText}
        </Avatar>
      </div>
    );
  };

  // 获取模型描述
  const getModelDescription = (record) => {
    return record.description || '';
  };

  // 渲染标签
  const renderTags = (record) => {
    // 计费类型标签（左边）- 使用 channel_list[0].quota_type
    const channelQuotaType =
      record.channel_list && record.channel_list.length > 0
        ? record.channel_list[0].quota_type
        : record.quota_type;

    let billingTag = (
      <Tag key='billing' shape='circle' color='white' size='small'>
        -
      </Tag>
    );
    if (channelQuotaType === 1) {
      billingTag = (
        <Tag key='billing' shape='circle' color='teal' size='small'>
          {t('按次计费')}
        </Tag>
      );
    } else if (channelQuotaType === 0) {
      billingTag = (
        <Tag key='billing' shape='circle' color='violet' size='small'>
          {t('按量计费')}
        </Tag>
      );
    }

    // 自定义标签（右边）
    const customTags = [];
    if (record.tags) {
      const tagArr = record.tags.split(',').filter(Boolean);
      tagArr.forEach((tg, idx) => {
        customTags.push(
          <Tag
            key={`custom-${idx}`}
            shape='circle'
            color={stringToColor(tg)}
            size='small'
          >
            {renderHighlightedText(tg)}
          </Tag>,
        );
      });
    }

    return (
      <div className='flex items-center justify-between'>
        <div className='flex items-center gap-2'>{billingTag}</div>
        <div className='flex items-center gap-1'>
          {customTags.length > 0 &&
            renderLimitedItems({
              items: customTags.map((tag, idx) => ({
                key: `custom-${idx}`,
                element: tag,
              })),
              renderItem: (item, idx) => item.element,
              maxDisplay: 3,
            })}
        </div>
      </div>
    );
  };

  // 显示骨架屏
  if (showSkeleton) {
    return (
      <>
        <PricingCardSkeleton
          rowSelection={!!rowSelection}
          showRatio={showRatio}
        />
      </>
    );
  }

  if (!filteredModels || filteredModels.length === 0) {
    return (
      <>
        <div className='flex justify-center items-center py-20'>
          <Empty
            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
            darkModeImage={
              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
            }
            description={t('搜索无结果')}
          />
        </div>
      </>
    );
  }

  return (
    <>
      <div className={gridCols > 0 ? '' : 'px-2 pt-2'}>
        <div className={gridCols > 0 ? 'grid gap-4' : 'flex flex-wrap gap-4'} style={gridCols > 0 ? { gridTemplateColumns: `repeat(${gridCols}, 1fr)` } : undefined}>
          {paginatedModels.map((model, index) => {
            const modelKey = getModelKey(model);
            const isSelected = selectedRowKeys.includes(modelKey);

            const priceData = calculateModelPrice({
              record: model,
              selectedGroup,
              groupRatio,
              groupModelPrice,
              groupModelRatio,
              tokenUnit,
              displayPrice,
              currency,
              quotaDisplayType: siteDisplayType,
            });

            const supplierLogos = getSupplierLogos(model);
            const hasChannelList =
              Array.isArray(model.channel_list) &&
              model.channel_list.length > 0;

            return (
              <Card
                key={modelKey || index}
                className={`${gridCols > 0 ? '!w-full' : 'flex-1 min-w-[350px] max-w-[600px]'} !rounded-2xl transition-all duration-200 hover:shadow-lg border ${blurPricing ? '' : 'cursor-pointer'} ${isSelected ? CARD_STYLES.selected : CARD_STYLES.default}`}
                bodyStyle={{ height: '100%' }}
                onClick={() =>
                  !blurPricing && openModelDetail && openModelDetail(model)
                }
              >
                <div className='flex flex-col h-full'>
                  {/* 头部：图标 + 模型名称 + 操作按钮 */}
                  <div className='flex items-start justify-between mb-3'>
                    <div className='flex items-start space-x-3 flex-1 min-w-0'>
                      {getModelIcon(model)}
                      <div className='flex-1 min-w-0'>
                        <h3 className='text-lg font-bold text-gray-900 truncate'>
                          {renderHighlightedText(model.model_name)}
                        </h3>
                        <div
                          className='flex flex-col gap-1 text-xs mt-1'
                          style={
                            blurPricing
                              ? {
                                  filter: 'blur(6px)',
                                  userSelect: 'none',
                                  pointerEvents: 'none',
                                }
                              : undefined
                          }
                        >
                          {getModelPriceItemsForCard(model, priceData).map(
                            (item) => (
                              <div key={item.key} className='flex items-center'>
                                <span className='w-20 flex-shrink-0'>
                                  {item.label}
                                </span>
                                <span className='flex-1 font-bold text-black inline-flex items-center flex-wrap gap-1'>
                                  {item.valueNode ? (
                                    item.valueNode
                                  ) : item.original ? (
                                    <>
                                      <span className='line-through text-gray-400 font-normal text-[10px]'>
                                        <span
                                          style={{
                                            color: 'var(--semi-color-primary)',
                                          }}
                                        >
                                          官方
                                        </span>{' '}
                                        {item.original.text}
                                      </span>
                                      <Tag
                                        color='red'
                                        size='small'
                                        shape='circle'
                                      >
                                        -{item.original.discount}%
                                      </Tag>
                                      <span>
                                        <span
                                          style={{
                                            color: 'var(--semi-color-warning)',
                                          }}
                                        >
                                          我们
                                        </span>{' '}
                                        {item.value}
                                        {item.suffix}
                                      </span>
                                    </>
                                  ) : (
                                    <span>
                                      {item.value}
                                      {item.suffix}
                                    </span>
                                  )}
                                </span>
                              </div>
                            ),
                          )}
                          <div className='flex items-center'>
                            <span className='w-20 flex-shrink-0'>
                              {t('供应商')}
                            </span>
                            <div className='flex-1 flex items-center flex-wrap gap-1'>
                              {supplierLogos.length === 0 ? (
                                hasChannelList ? null : (
                                  <span className='font-bold text-black'>
                                    {t('官方')}
                                  </span>
                                )
                              ) : (
                                supplierLogos.map((s) => (
                                  <div
                                    key={s.key}
                                    className='h-7 rounded-md flex items-center overflow-hidden'
                                    style={{backgroundColor: 'var(--semi-color-fill-0)'}}
                                  >
                                    {s.logo ? (
                                      <img
                                        src={s.logo}
                                        alt={s.alias || s.name || ''}
                                        className='w-7 h-7 object-contain rounded-md'
                                      />
                                    ) : null}
                                    {s.supplierType && (
                                      <Tag
                                        size='small'
                                        shape='circle'
                                        color={getSupplierTypeColor(
                                          s.supplierType,
                                        )}
                                        className='mx-1'
                                      >
                                        {s.supplierType}
                                      </Tag>
                                    )}
                                  </div>
                                ))
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className='flex items-center space-x-2 ml-3'>
                      {/* 复制按钮 */}
                      <Button
                        size='small'
                        theme='outline'
                        type='tertiary'
                        icon={<Copy size={12} />}
                        onClick={(e) => {
                          e.stopPropagation();
                          copyText(model.model_name);
                        }}
                      />

                      {/* 选择框 */}
                      {rowSelection && (
                        <Checkbox
                          checked={isSelected}
                          onChange={(e) => {
                            e.stopPropagation();
                            handleCheckboxChange(model, e.target.checked);
                          }}
                        />
                      )}
                    </div>
                  </div>

                  {/* 模型描述 - 占据剩余空间 */}
                  <div
                    className='flex-1 mb-4'
                    style={
                      blurPricing
                        ? {
                            filter: 'blur(6px)',
                            userSelect: 'none',
                            pointerEvents: 'none',
                          }
                        : undefined
                    }
                  >
                    <p
                      className='text-xs line-clamp-2 leading-relaxed'
                      style={{ color: 'var(--semi-color-text-2)' }}
                    >
                      {renderHighlightedText(getModelDescription(model))}
                    </p>
                  </div>

                  {/* 底部区域 */}
                  <div
                    className='mt-auto'
                    style={
                      blurPricing
                        ? {
                            filter: 'blur(6px)',
                            userSelect: 'none',
                            pointerEvents: 'none',
                          }
                        : undefined
                    }
                  >
                    {/* 标签区域 */}
                    {renderTags(model)}

                    {/* 倍率信息（可选） */}
                    {showRatio && (
                      <div className='pt-3'>
                        <div className='flex items-center space-x-1 mb-2'>
                          <span className='text-xs font-medium text-gray-700'>
                            {t('倍率信息')}
                          </span>
                          <Tooltip
                            content={t('倍率是为了方便换算不同价格的模型')}
                          >
                            <IconHelpCircle
                              className='text-blue-500 cursor-pointer'
                              size='small'
                              onClick={(e) => {
                                e.stopPropagation();
                                setModalImageUrl('/ratio.png');
                                setIsModalOpenurl(true);
                              }}
                            />
                          </Tooltip>
                        </div>
                        <div className='grid grid-cols-3 gap-2 text-xs text-gray-600'>
                          <div>
                            {t('模型')}:{' '}
                            {model.quota_type === 0
                              ? (priceData?.inputRatio ?? model.model_ratio)
                              : t('无')}
                          </div>
                          <div>
                            {t('输出')}:{' '}
                            {model.quota_type === 0
                              ? parseFloat(model.completion_ratio.toFixed(2))
                              : t('无')}
                          </div>
                          <div>
                            {t('分组')}: {priceData?.usedGroupRatio ?? '-'}
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </Card>
            );
          })}
        </div>

        {/* 分页 */}
        {filteredModels.length > 0 && (
          <div className='flex justify-center mt-6 py-4 border-t pricing-pagination-divider'>
            <Pagination
              currentPage={currentPage}
              pageSize={pageSize}
              total={filteredModels.length}
              showSizeChanger={showSizeChanger}
              pageSizeOptions={[10, 20, 50, 100]}
              size={isMobile ? 'small' : 'default'}
              showQuickJumper={isMobile}
              onPageChange={(page) => setCurrentPage(page)}
              onPageSizeChange={(size) => {
                setPageSize(size);
                setCurrentPage(1);
              }}
            />
          </div>
        )}
      </div>
    </>
  );
};

export default PricingCardView;