<template>
  <v-card class="market-card" elevation="0" :rounded="'lg'" @click="navigateToDetail">
    <div class="market-card-content">
      <!-- Top Section：头像 + 标题 + 半圆概率 / 多选项时仅标题 -->
      <div class="top-section">
        <div class="image-title-container">
          <v-avatar class="market-image" :size="40" color="#f0f0f0" rounded="sm">
            <v-img v-if="props.imageUrl" :src="props.imageUrl" cover />
          </v-avatar>
          <v-card-title class="market-title" :text="true" :shrink="true">
            {{ marketTitle }}
          </v-card-title>
        </div>
        <!-- 单一类型：右侧半圆进度条 -->
        <div v-if="!isMulti" class="chance-container">
          <div class="semi-progress-wrap">
            <svg class="semi-progress-svg" viewBox="0 0 60 36" preserveAspectRatio="xMidYMin meet">
              <path
                class="semi-progress-track"
                d="M 4 30 A 26 26 0 0 1 56 30"
                fill="none"
                stroke="#e8e8e8"
                stroke-width="5"
                stroke-linecap="round"
              />
              <path
                class="semi-progress-fill"
                d="M 4 30 A 26 26 0 0 1 56 30"
                fill="none"
                :stroke="semiProgressColor"
                stroke-width="5"
                stroke-linecap="round"
                stroke-dasharray="81.68"
                :stroke-dashoffset="semiProgressOffset"
              />
            </svg>
            <div class="semi-progress-inner">
              <span class="chance-value">{{ chanceValue }}%</span>
              <span class="chance-label">chance</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 单一类型：中间 Yes/No 或 Up/Down -->
      <template v-if="!isMulti">
        <div class="options-section">
          <v-btn
            class="option-yes"
            :color="'#b8e0b8'"
            :rounded="'sm'"
            :text="true"
            elevation="0"
            @click.stop="openTradeSingle('yes')"
          >
            <span class="option-text-yes">{{ yesLabel }}</span>
          </v-btn>
          <v-btn
            class="option-no"
            :color="'#f0b8b8'"
            :rounded="'sm'"
            :text="true"
            elevation="0"
            @click.stop="openTradeSingle('no')"
          >
            <span class="option-text-no">{{ noLabel }}</span>
          </v-btn>
        </div>
      </template>

      <!-- 多选项类型：左右滑动轮播，每页一项 = 左侧 title+% 右侧 Yes/No -->
      <div v-else class="multi-section">
        <v-carousel
          v-model="currentSlide"
          class="outcome-carousel"
          :continuous="true"
          :show-arrows="false"
          hide-delimiters
          height="35"
        >
          <v-carousel-item
            v-for="(outcome, idx) in props.outcomes"
            :key="idx"
            class="outcome-slide"
          >
            <div class="outcome-slide-inner">
              <div class="outcome-row">
                <div class="outcome-item">
                  <span class="outcome-title">{{ outcome.title }}</span>
                  <span class="outcome-chance-value">{{ outcome.chanceValue }}%</span>
                </div>
                <div class="outcome-buttons">
                  <v-btn
                    class="option-yes option-yes-no-compact"
                    :color="'#b8e0b8'"
                    :rounded="'sm'"
                    :text="true"
                    elevation="0"
                    @click.stop="openTradeMulti('yes', outcome)"
                  >
                    <span class="option-text-yes">{{ outcome.yesLabel ?? 'Yes' }}</span>
                  </v-btn>
                  <v-btn
                    class="option-no option-yes-no-compact"
                    :color="'#f0b8b8'"
                    :rounded="'sm'"
                    :text="true"
                    elevation="0"
                    @click.stop="openTradeMulti('no', outcome)"
                  >
                    <span class="option-text-no">{{ outcome.noLabel ?? 'No' }}</span>
                  </v-btn>
                </div>
              </div>
            </div>
          </v-carousel-item>
        </v-carousel>
        <div class="carousel-controls" @mousedown.stop @touchstart.stop>
          <button
            type="button"
            class="carousel-arrow carousel-arrow--left"
            :disabled="outcomeCount <= 1"
            aria-label="上一项"
            @click.stop="prevSlide"
          >
            <v-icon size="18">mdi-chevron-left</v-icon>
          </button>
          <div class="carousel-dots">
            <button
              v-for="(_, idx) in props.outcomes ?? []"
              :key="idx"
              type="button"
              :class="['carousel-dot', { active: currentSlide === idx }]"
              :aria-label="`选项 ${idx + 1}`"
              @click.stop="currentSlide = idx"
            />
          </div>
          <button
            type="button"
            class="carousel-arrow carousel-arrow--right"
            :disabled="outcomeCount <= 1"
            aria-label="下一项"
            @click.stop="nextSlide"
          >
            <v-icon size="18">mdi-chevron-right</v-icon>
          </button>
        </div>
      </div>

      <!-- Bottom Section -->
      <div class="bottom-section">
        <span class="market-info">
          <span v-if="props.isNew" class="new-badge">+ NEW</span>
          {{ marketInfo }}
        </span>
        <div class="icons-container">
          <v-icon class="gift-icon" size="16">mdi-gift</v-icon>
          <v-icon class="bookmark-icon" size="16">mdi-bookmark</v-icon>
        </div>
      </div>
    </div>
  </v-card>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { EventCardOutcome } from '../api/event'

const router = useRouter()
const emit = defineEmits<{
  openTrade: [
    side: 'yes' | 'no',
    market?: {
      id: string
      title: string
      marketId?: string
      outcomeTitle?: string
      clobTokenIds?: string[]
    },
  ]
}>()

const props = withDefaults(
  defineProps<{
    marketTitle: string
    chanceValue: number
    marketInfo: string
    id: string
    /** Event slug，用于 findPmEvent 传参 */
    slug?: string
    imageUrl?: string
    category?: string
    expiresAt?: string
    /** 展示类型：single 单一 Yes/No，multi 多选项左右滑动 */
    displayType?: 'single' | 'multi'
    /** 多选项时的选项列表（用于滑动） */
    outcomes?: EventCardOutcome[]
    /** 单一类型时左按钮文案，如 Up */
    yesLabel?: string
    /** 单一类型时右按钮文案，如 Down */
    noLabel?: string
    /** 是否显示 + NEW */
    isNew?: boolean
    /** 当前市场 ID（单 market 时供交易/Split 使用） */
    marketId?: string
    /** 用于下单 tokenId，单 market 时 */
    clobTokenIds?: string[]
  }>(),
  {
    marketTitle: 'Mamdan opens city-owned grocery store b...',
    chanceValue: 17,
    marketInfo: '$155k Vol.',
    id: '1',
    imageUrl: '',
    category: '',
    expiresAt: '',
    displayType: 'single',
    outcomes: () => [],
    yesLabel: 'Yes',
    noLabel: 'No',
    isNew: false,
    marketId: undefined,
  },
)

const isMulti = computed(() => props.displayType === 'multi' && (props.outcomes?.length ?? 0) > 1)
const currentSlide = ref(0)
const outcomeCount = computed(() => (props.outcomes ?? []).length)

function prevSlide() {
  if (outcomeCount.value <= 1) return
  currentSlide.value = (currentSlide.value - 1 + outcomeCount.value) % outcomeCount.value
}

function nextSlide() {
  if (outcomeCount.value <= 1) return
  currentSlide.value = (currentSlide.value + 1) % outcomeCount.value
}

// 半圆进度条：stroke-dashoffset，半圆弧长 ≈ π*26（左底 0° 顺时针至右底 180°）
const SEMI_CIRCLE_LENGTH = Math.PI * 26
const semiProgressOffset = computed(() => {
  const p = Math.min(100, Math.max(0, props.chanceValue)) / 100
  return SEMI_CIRCLE_LENGTH * (1 - p)
})

// 进度条纯色：0% 红 → 50% 图片橙黄 #FFBB5C → 100% 绿（两段 RGB 插值）
const COLOR_RED = { r: 239, g: 68, b: 68 }
const COLOR_ORANGE_YELLOW = { r: 255, g: 187, b: 92 }
const COLOR_GREEN = { r: 22, g: 163, b: 74 }
function rgbToHex(r: number, g: number, b: number): string {
  const toByte = (v: number) => Math.min(255, Math.max(0, Math.round(v)))
  return `#${toByte(r).toString(16).padStart(2, '0')}${toByte(g).toString(16).padStart(2, '0')}${toByte(b).toString(16).padStart(2, '0')}`
}
const semiProgressColor = computed(() => {
  const t = Math.min(1, Math.max(0, props.chanceValue / 100))
  if (t <= 0.5) {
    const u = t * 2
    return rgbToHex(
      COLOR_RED.r + (COLOR_ORANGE_YELLOW.r - COLOR_RED.r) * u,
      COLOR_RED.g + (COLOR_ORANGE_YELLOW.g - COLOR_RED.g) * u,
      COLOR_RED.b + (COLOR_ORANGE_YELLOW.b - COLOR_RED.b) * u,
    )
  }
  const u = (t - 0.5) * 2
  return rgbToHex(
    COLOR_ORANGE_YELLOW.r + (COLOR_GREEN.r - COLOR_ORANGE_YELLOW.r) * u,
    COLOR_ORANGE_YELLOW.g + (COLOR_GREEN.g - COLOR_ORANGE_YELLOW.g) * u,
    COLOR_ORANGE_YELLOW.b + (COLOR_GREEN.b - COLOR_ORANGE_YELLOW.b) * u,
  )
})

const navigateToDetail = () => {
  if (props.displayType === 'multi' && (props.outcomes?.length ?? 0) > 1) {
    router.push({
      path: `/event/${props.id}/markets`,
      query: { ...(props.slug && { slug: props.slug }) },
    })
    return
  }
  router.push({
    path: `/trade-detail/${props.id}`,
    query: {
      title: props.marketTitle,
      imageUrl: props.imageUrl || undefined,
      category: props.category || undefined,
      marketInfo: props.marketInfo || undefined,
      expiresAt: props.expiresAt || undefined,
      chance: String(props.chanceValue),
      ...(props.marketId && { marketId: props.marketId }),
      ...(props.slug && { slug: props.slug }),
    },
  })
}

function openTradeSingle(side: 'yes' | 'no') {
  emit('openTrade', side, {
    id: props.id,
    title: props.marketTitle,
    marketId: props.marketId,
    clobTokenIds: props.clobTokenIds,
  })
}

function openTradeMulti(side: 'yes' | 'no', outcome: EventCardOutcome) {
  emit('openTrade', side, {
    id: props.id,
    title: outcome.title,
    marketId: outcome.marketId,
    outcomeTitle: outcome.title,
    clobTokenIds: outcome.clobTokenIds,
  })
}
</script>

<style scoped>
/* 单 market 与多 market 统一高度 */
.market-card {
  position: relative;
  width: 310px;
  height: 176px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.market-card:hover {
  border-color: #d0d0d0;
}

.market-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

/* 扁平化：卡片内所有按钮无阴影 */
.market-card :deep(.v-btn),
.market-card .carousel-arrow {
  box-shadow: none !important;
}
.market-card :deep(.v-btn::before) {
  box-shadow: none;
}

/* Top Section */
.top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.image-title-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.market-image {
  flex-shrink: 0;
}

/* 覆盖 Vuetify v-card-title 的 padding、white-space，保证两行完整显示且不露第三行 */
.market-title {
  flex: 1;
  min-width: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #000000;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  /* 仅文字区域两行高，无 padding 占用 */
  max-height: 2.8em;
}

.chance-container {
  flex-shrink: 0;
  width: 60px;
}

.semi-progress-wrap {
  position: relative;
  width: 60px;
  height: 44px;
}

.semi-progress-svg {
  display: block;
  width: 60px;
  height: 36px;
  overflow: visible;
}

.semi-progress-track,
.semi-progress-fill {
  transition: stroke-dashoffset 0.25s ease;
}

/* 半圆弧 viewBox 0 0 60 36：弧的视觉中心约 y=17，百分比文字的 top 对齐该中心 */
.semi-progress-inner {
  position: absolute;
  left: 50%;
  top: 17px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}

.chance-value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  line-height: 1.2;
}

.chance-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: normal;
  color: #9ca3af;
  margin-top: 2px;
}

/* Options Section：单 market 时靠底对齐 */
.options-section {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.option-yes {
  flex: 1;
  background-color: #b8e0b8;
  border-radius: 6px;
  height: 40px;
}

.option-text-yes {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #006600;
}

.option-no {
  flex: 1;
  background-color: #f0b8b8;
  border-radius: 6px;
  height: 40px;
}

.option-text-no {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #cc0000;
}

/* Bottom Section：禁止被挤压，避免与 multi-section 重叠 */
.bottom-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  flex-shrink: 0;
}

.market-info {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #808080;
}

.icons-container {
  display: flex;
  gap: 16px;
}

.gift-icon {
  color: #808080;
}

.bookmark-icon {
  color: #808080;
}

/* 多选项：左右滑动区域，整体靠底对齐；预留底部 padding 避免与 bottom-section 重叠 */
.multi-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: auto;
  padding-bottom: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.outcome-carousel {
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.outcome-carousel :deep(.v-carousel__container) {
  touch-action: pan-y pinch-zoom;
}

.outcome-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.outcome-slide-inner {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 6px 12px 6px 10px;
}

.outcome-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.outcome-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.outcome-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outcome-chance-value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  flex-shrink: 0;
}

.outcome-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.outcome-buttons .option-yes-no-compact {
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
}

.outcome-buttons .option-text-yes,
.outcome-buttons .option-text-no {
  font-size: 13px;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background-color: #f0f0f0;
  color: #333;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
  box-shadow: none;
}
.carousel-arrow:hover:not(:disabled) {
  background-color: #e0e0e0;
  color: #000;
}
.carousel-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0;
  flex-shrink: 0;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background-color: #e0e0e0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.carousel-dot:hover {
  background-color: #bdbdbd;
}

.carousel-dot.active {
  background-color: rgb(var(--v-theme-primary));
  width: 8px;
  height: 6px;
  border-radius: 3px;
}

.new-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #000;
  background-color: #fef08a;
  border-radius: 4px;
}
</style>
