<template>
  <component
    :is="linkable ? NuxtLink : 'div'"
    :to="linkable ? localePath(`/catalog/products/${product.uuid}`) : undefined"
    class="block"
    :class="{ 'cursor-pointer': selectable }"
    @click="selectable && $emit('select')"
  >
    <Card
      padding="sm"
      :interactive="linkable || selectable"
      class="relative overflow-hidden"
      :class="[
        isSelected && 'ring-2 ring-primary ring-offset-2'
      ]"
    >
      <!-- Sparkline background -->
      <div v-if="effectivePriceHistory.length > 1" class="absolute inset-0 opacity-15">
        <ClientOnly>
          <apexchart
            type="area"
            height="100%"
            :options="chartOptions"
            :series="chartSeries"
          />
        </ClientOnly>
      </div>

      <!-- Content -->
      <div class="relative z-10">
        <div class="flex items-start gap-3">
          <!-- Product icon -->
          <div class="w-10 h-10 shrink-0 bg-primary/10 text-primary rounded-lg flex items-center justify-center">
            <Icon name="lucide:package" size="20" />
          </div>

          <!-- Info -->
          <div class="min-w-0 flex-1">
            <div class="flex items-center justify-between gap-2 mb-1">
              <Text size="base" weight="semibold" class="truncate">{{ product.name }}</Text>
              <span
                v-if="trend !== 0"
                class="text-xs font-medium shrink-0"
                :class="trend > 0 ? 'text-success' : 'text-error'"
              >
                {{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}%
              </span>
            </div>

            <div class="flex items-center justify-between gap-2">
              <Text v-if="product.offersCount" tone="muted" size="sm">
                {{ product.offersCount }} {{ t('catalog.offers', product.offersCount) }}
              </Text>
              <Text v-if="effectivePrice" size="sm" class="text-primary font-bold shrink-0">
                {{ formattedPrice }}
              </Text>
            </div>

            <Text v-if="product.description && !compact" tone="muted" size="sm" class="mt-1">
              {{ product.description }}
            </Text>
          </div>
        </div>
      </div>
    </Card>
  </component>
</template>

<script setup lang="ts">
import { NuxtLink } from '#components'

interface Product {
  uuid?: string | null
  name?: string | null
  description?: string | null
  offersCount?: number | null
}

const props = withDefaults(defineProps<{
  product: Product
  selectable?: boolean
  isSelected?: boolean
  compact?: boolean
  priceHistory?: number[]
  currentPrice?: number | null
  currency?: string | null
}>(), {
  priceHistory: () => []
})

defineEmits<{
  (e: 'select'): void
}>()

const localePath = useLocalePath()
const { t } = useI18n()

const linkable = computed(() => !props.selectable && !!props.product.uuid)

// Generate mock price history based on uuid for consistency
const effectivePriceHistory = computed(() => {
  if (props.priceHistory && props.priceHistory.length > 0) {
    return props.priceHistory
  }
  if (!props.product.uuid) return []
  const seed = props.product.uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
  const basePrice = 100 + (seed % 200)
  return Array.from({ length: 7 }, (_, i) => {
    const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
    return Math.round(basePrice + variation)
  })
})

// Effective price - use provided or last from history
const effectivePrice = computed(() => {
  if (props.currentPrice) return props.currentPrice
  if (effectivePriceHistory.value.length > 0) {
    return effectivePriceHistory.value[effectivePriceHistory.value.length - 1]
  }
  return null
})

// Price formatting
const formattedPrice = computed(() => {
  if (!effectivePrice.value) return ''
  const symbol = getCurrencySymbol(props.currency)
  return `${symbol}${effectivePrice.value.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 (effectivePriceHistory.value.length < 2) return 0
  const first = effectivePriceHistory.value[0]
  const last = effectivePriceHistory.value[effectivePriceHistory.value.length - 1]
  if (!first || first === 0 || !last) 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: effectivePriceHistory.value.length > 0 ? effectivePriceHistory.value : [0]
}])
</script>
