<template>
  <Card
    padding="md"
    interactive
    class="cursor-pointer overflow-hidden min-w-36 shrink-0"
    :class="{ 'bg-base-200': selected }"
    @click="$emit('select')"
  >
    <div class="relative min-h-14">
      <!-- Sparkline chart background -->
      <div v-if="priceHistory.length > 1" class="absolute inset-0 opacity-15">
        <ClientOnly>
          <apexchart
            type="area"
            height="56"
            :options="chartOptions"
            :series="chartSeries"
          />
        </ClientOnly>
      </div>

      <!-- Content -->
      <div class="relative z-10">
        <Text weight="semibold" size="sm" class="mb-1">{{ name }}</Text>
        <div class="flex items-center gap-2">
          <Text v-if="currentPrice" size="sm" class="text-primary font-bold">
            {{ formattedPrice }}
          </Text>
          <span
            v-if="trend !== 0"
            class="text-xs font-medium"
            :class="trend > 0 ? 'text-success' : 'text-error'"
          >
            {{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}%
          </span>
        </div>
      </div>
    </div>
  </Card>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{
  name: string
  currentPrice?: number | null
  currency?: string | null
  priceHistory?: number[]
  selected?: boolean
}>(), {
  priceHistory: () => [],
  selected: false
})

defineEmits<{
  select: []
}>()

const formattedPrice = computed(() => {
  if (!props.currentPrice) return ''
  const symbol = getCurrencySymbol(props.currency)
  return `${symbol}${props.currentPrice.toLocaleString()}`
})

const getCurrencySymbol = (currency?: string | null) => {
  switch (currency?.toUpperCase()) {
    case 'USD': return '$'
    case 'EUR': return '€'
    case 'RUB': return '₽'
    case 'CNY': return '¥'
    default: return '$'
  }
}

// Calculate trend from price history
const trend = computed(() => {
  if (props.priceHistory.length < 2) return 0
  const first = props.priceHistory[0]
  const last = props.priceHistory[props.priceHistory.length - 1]
  if (!first || first === 0) return 0
  return Math.round(((last - first) / first) * 100)
})

// Chart configuration
const chartOptions = computed(() => ({
  chart: {
    type: 'area',
    sparkline: { enabled: true },
    animations: { enabled: false }
  },
  stroke: {
    curve: 'smooth',
    width: 2
  },
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.4,
      opacityTo: 0.1
    }
  },
  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
  tooltip: { enabled: false },
  xaxis: { labels: { show: false } },
  yaxis: { labels: { show: false } }
}))

const chartSeries = computed(() => [{
  name: 'Price',
  data: props.priceHistory.length > 0 ? props.priceHistory : [0]
}])
</script>
