<script setup>
import { computed } from 'vue'

// AG Grid cell renderer for the marketplace order-id columns (eBay/Amazon) on
// the accounting reconciliation grids. Renders the order id as a link that
// opens the order on the marketplace (eBay Seller Hub / Amazon Seller Central)
// in a NEW tab — so the current grid (filters, grouping, scroll) stays put.
//
// Configure via cellRendererParams:
//   { marketplace: 'ebay' | 'amazon', colorByMatch?: boolean }
//   - colorByMatch: tint the id by match status (orders-check pages) — green
//     matched / grey canceled / red missing. Off → neutral link colour.

const props = defineProps({ params: Object })

const marketplace = computed(() => props.params?.marketplace || 'ebay')
const colorByMatch = computed(() => !!props.params?.colorByMatch)

const id = computed(() => {
  const v = props.params?.value
  return v == null ? '' : String(v)
})

const href = computed(() => {
  if (!id.value) return ''
  if (marketplace.value === 'amazon') {
    // Amazon Seller Central order page.
    return `https://sellercentral.amazon.de/orders-v3/order/${encodeURIComponent(id.value)}`
  }
  // eBay Seller Hub order details.
  return `https://www.ebay.de/mesh/ord/details?mode=SH&srn=669&orderid=${encodeURIComponent(id.value)}`
})

const textColor = computed(() => {
  const d = props.params?.data
  if (colorByMatch.value && d) {
    if (d.matched) return '#2e7d32'
    if (d.isCanceled) return '#90a4ae'
    return '#c62828'
  }
  return '#1565c0'
})
</script>

<template>
  <a
    v-if="id && href"
    :href="href"
    target="_blank"
    rel="noopener"
    class="agmp-link"
    :style="{ color: textColor, fontWeight: 600 }"
  >{{ id }}<i class="ti ti-external-link agmp-ext"></i></a>
  <span v-else-if="id" :style="{ color: textColor, fontWeight: 600 }">{{ id }}</span>
</template>

<style scoped>
.agmp-link { text-decoration: none; }
.agmp-link:hover { text-decoration: underline; }
.agmp-ext { font-size: 12px; margin-left: 4px; opacity: 0.7; vertical-align: middle; }
</style>
