<script setup lang="ts">
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import type { Listing } from '@/features/listings'
import { formatCent, formatMoney } from '@/shared/utils/money'
import {
  formatEstimatedRentalDuration,
  getDailyLoss,
  getListingDisplayPrice,
  formatListingCode,
  getListingChips,
  getListingResources,
  getListingTitle,
  getLoginMethod,
  getServerRegion,
  getSkinNames,
  hasAcceleratedSaleRatio,
  hasGiftResources,
  getRatioValue,
  type ListingDisplayResource,
} from '@/shared/utils/listingDisplay'

interface Props {
  listing: Listing
}

const props = defineProps<Props>()

const coverURL = computed(() => props.listing.cover_url || props.listing.screenshot_urls?.[0] || '')
const dailyLoss = computed(() => getDailyLoss(props.listing))
const skinNames = computed(() => getSkinNames(props.listing))
const chipItems = computed(() => getListingChips(props.listing))
const resourceItems = computed(() => getListingResources(props.listing))
const rentalDuration = computed(() => formatEstimatedRentalDuration(props.listing))
const visibleSkinNames = computed(() => skinNames.value.slice(0, 4))
const skinOverflowCount = computed(() =>
  Math.max(0, skinNames.value.length - visibleSkinNames.value.length)
)
const accessTags = computed(() =>
  [getServerRegion(props.listing), getLoginMethod(props.listing)]
    .filter(Boolean)
    .map(item => accessBadgeMeta(item))
)
const metaBadges = computed(() =>
  [
    { label: formatListingCode(props.listing), tone: 'code' },
    dailyLoss.value ? { label: `消耗 ${dailyLoss.value}/天`, tone: 'muted' } : null,
    rentalDuration.value !== '--' ? { label: `租期 ${rentalDuration.value}`, tone: 'muted' } : null,
    getRatioValue(props.listing) > 0
      ? { label: `1元=${getRatioValue(props.listing).toFixed(0)}w哈夫币`, tone: 'ratio' }
      : null,
  ].filter((item): item is { label: string; tone: string } => Boolean(item))
)

function formatResourceQuantity(resource: ListingDisplayResource) {
  const suffix = resource.key === 'awmAmmo' ? '发' : ''
  return `${formatStatNumber(resource.quantity)}${suffix}`
}

function accessBadgeMeta(value: string) {
  const text = value.trim()
  if (text.includes('微信')) return { label: text, icon: 'wechat', tone: 'wechat' }
  if (text.toUpperCase().includes('QQ')) return { label: text, icon: 'qq', tone: 'qq' }
  if (text.includes('扫码')) return { label: text, icon: 'scan', tone: 'scan' }
  if (text.includes('账') || text.includes('密码'))
    return { label: text, icon: 'lock', tone: 'password' }
  if (text.includes('Steam')) return { label: text, icon: 'desktop-o', tone: 'steam' }
  return { label: text, icon: 'bookmark-o', tone: 'default' }
}

function formatStatNumber(value: number) {
  return Number.isInteger(value) ? String(value) : value.toFixed(1)
}
</script>

<template>
  <RouterLink class="listing-card-v2" :to="`/listings/${listing.id}`">
    <div class="card-cover">
      <img
        v-if="coverURL"
        :src="coverURL"
        :alt="getListingTitle(listing)"
        loading="lazy"
        decoding="async"
      />
      <div v-else class="empty-cover">HFB</div>
      <div class="cover-badges">
        <span v-if="hasAcceleratedSaleRatio(listing)" class="badge sale">特惠</span>
        <span v-if="hasGiftResources(listing)" class="badge gift">有赠送</span>
      </div>
      <div class="ratio-tag">比例 1:{{ getRatioValue(listing).toFixed(1) }}</div>
    </div>

    <div class="card-details">
      <h3>{{ getListingTitle(listing) }}</h3>

      <div class="meta-flow">
        <span v-for="badge in metaBadges" :key="badge.label" :class="`tone-${badge.tone}`">
          {{ badge.label }}
        </span>
      </div>

      <div class="access-flow">
        <span v-for="tag in accessTags" :key="tag.label" :class="`tone-${tag.tone}`">
          <van-icon :name="tag.icon" :size="16" />
          {{ tag.label }}
        </span>
      </div>

      <div class="chip-flow">
        <span v-for="chip in chipItems" :key="chip.label" class="info-chip">
          {{ chip.label }}:{{ chip.value }}
        </span>
      </div>

      <div v-if="skinNames.length" class="skin-line" :title="skinNames.join('、')">
        <span class="line-title">皮肤</span>
        <span class="skin-list">{{ visibleSkinNames.join(' / ') }}</span>
        <span v-if="skinOverflowCount" class="skin-count">+{{ skinOverflowCount }}</span>
      </div>

      <div v-if="resourceItems.length" class="resource-line">
        <span class="line-title">额外物资</span>
        <div class="resource-chips">
          <span v-for="resource in resourceItems" :key="resource.key" class="resource-chip">
            <em>{{ resource.label }}</em>
            <strong>{{ formatResourceQuantity(resource) }}</strong>
            <small v-if="resource.mode === '赠送'">赠送</small>
          </span>
        </div>
      </div>
    </div>

    <div class="card-price">
      <div class="price-main">
        <small>总租金</small>
        <strong>¥{{ formatMoney(getListingDisplayPrice(listing)) }}</strong>
      </div>
      <div class="price-deposit">
        <small>押金</small>
        <span>¥{{ formatCent(listing.deposit_amount_cent) }}</span>
      </div>
      <button class="rent-btn">立即租用</button>
    </div>
  </RouterLink>
</template>

<style scoped>
.listing-card-v2 {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 168px;
  gap: 20px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid #e7edf6;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(23, 35, 61, 0.04);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.listing-card-v2:hover {
  border-color: #ff6a00;
  box-shadow: 0 14px 34px rgba(255, 106, 0, 0.13);
  transform: translateY(-2px);
}

.card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f6fb;
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.empty-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 24px;
  font-weight: 900;
  color: #cbd5e1;
}

.cover-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
}

.badge.sale {
  background: #ef4444;
}
.badge.gift {
  background: #10b981;
}

.ratio-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: rgba(33, 28, 24, 0.76);
  color: #fbbf24;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.card-details {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 2px 0;
}

.card-details h3 {
  margin: 0;
  color: #111827;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.32;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.meta-flow,
.access-flow,
.chip-flow,
.resource-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.meta-flow span,
.access-flow span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.meta-flow .tone-code {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #2563eb;
}

.meta-flow .tone-muted {
  background: #eef2f7;
  color: #64748b;
}

.meta-flow .tone-ratio {
  background: #fff7ed;
  color: #ea580c;
}

.access-flow .tone-qq,
.access-flow .tone-wechat {
  background: #eaf3ff;
  color: #1677ff;
}

.access-flow .tone-scan {
  background: #fff7ed;
  color: #f97316;
}

.access-flow .tone-steam {
  background: #eef2ff;
  color: #4f46e5;
}

.access-flow .tone-password,
.access-flow .tone-default {
  background: #f1f5f9;
  color: #475569;
}

.info-chip {
  display: inline-flex;
  align-items: center;
  max-width: 280px;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-line,
.resource-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 2px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f8fafc;
}

.skin-line {
  overflow: hidden;
  border: 1px solid #edf2f7;
  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
}

.line-title {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 900;
}

.skin-list {
  min-width: 0;
  overflow: hidden;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-count {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 900;
}

.resource-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  font-weight: 900;
}

.resource-chip em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-chip strong {
  color: #ea580c;
}

.resource-chip small {
  padding: 1px 5px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 10px;
  font-weight: 800;
}

.card-price {
  display: grid;
  align-content: center;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 0 14px 18px;
  border-left: 1px solid #edf2f7;
}

.price-main,
.price-deposit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.price-main small,
.price-deposit small {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 900;
}

.price-main strong {
  color: #ff5f00;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.price-deposit span {
  color: #64748b;
  font-size: 16px;
  font-weight: 900;
}

.rent-btn {
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s;
}

.rent-btn:hover {
  background: linear-gradient(135deg, #ff7a1a 0%, #ff9544 100%);
  transform: translateY(-1px);
}

@media (max-width: 1280px) {
  .listing-card-v2 {
    grid-template-columns: 168px minmax(0, 1fr) 156px;
    gap: 16px;
  }

  .card-details h3 {
    font-size: 18px;
  }

  .meta-flow span,
  .access-flow span,
  .info-chip,
  .resource-chip {
    font-size: 12px;
  }

  .skin-list,
  .line-title {
    font-size: 12px;
  }

  .price-main strong {
    font-size: 28px;
  }
}
</style>
