<script setup lang="ts">
import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
import { formatOrderCode } from '~/composables/useOrderCodePresentation';
import { formatPrice } from '~/composables/useOrderDetailPresentation';

type OrderCardItem = {
  id: string;
  productName: string;
  quantity: number;
};

const props = defineProps<{
  to: string;
  code: string;
  status: string;
  createdAt: string | Date;
  totalPrice?: number | null;
  items: OrderCardItem[];
}>();

const DATE_FORMATTER = new Intl.DateTimeFormat('ru-RU', {
  day: '2-digit',
  month: 'short',
  hour: '2-digit',
  minute: '2-digit',
});

const coverPresets = [
  ['#d9f5e6', '#9ce8c1', '#6fd09d'],
  ['#eaf9ef', '#b3e8cb', '#76c89f'],
  ['#e8f5ec', '#b2e0c6', '#7dd0a9'],
];

function formatCreatedAt(value: string | Date) {
  return DATE_FORMATTER.format(new Date(value));
}

function createProductCover(name: string, seedKey: string) {
  const seed = `${name}${seedKey}`.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  const [start, middle, finish] = coverPresets[seed % coverPresets.length];
  const firstLetter = name.trim().charAt(0).toUpperCase() || 'P';

  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88">
      <defs>
        <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="${start}" />
          <stop offset="55%" stop-color="${middle}" />
          <stop offset="100%" stop-color="${finish}" />
        </linearGradient>
      </defs>
      <rect width="88" height="88" fill="url(#g)" rx="24" />
      <g opacity="0.16">
        <circle cx="72" cy="18" r="20" fill="#0f7a49" />
        <circle cx="14" cy="80" r="22" fill="#0f7a49" />
      </g>
      <text x="50%" y="56%" text-anchor="middle" fill="#11412c" font-family="Manrope, sans-serif" font-size="34" font-weight="700">${firstLetter}</text>
    </svg>
  `.trim();

  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
}

const visibleItems = computed(() => props.items.slice(0, 4));
const hiddenCount = computed(() => Math.max(props.items.length - visibleItems.value.length, 0));
const totalPriceLabel = computed(() => formatPrice(props.totalPrice) ?? '—');
const codeLabel = computed(() => formatOrderCode(props.code));
</script>

<template>
  <NuxtLink
    :to="to"
    class="surface-card surface-card-interactive group block rounded-[30px] bg-white px-4 py-4 md:px-5"
  >
    <div class="grid gap-4 md:grid-cols-4 md:items-center md:gap-6">
      <div class="min-w-0">
        <h2 class="truncate text-lg font-bold text-[#123824]">{{ codeLabel }}</h2>
        <p class="mt-1 text-sm text-[#688676]">{{ formatCreatedAt(createdAt) }}</p>
      </div>

      <div class="min-w-0">
        <div class="flex flex-wrap items-center gap-2 md:gap-1">
          <div class="flex -space-x-3">
            <div
              v-for="item in visibleItems"
              :key="item.id"
              class="h-11 w-11 overflow-hidden rounded-[16px] border-2 border-white bg-[#edf8f1] shadow-[0_6px_16px_rgba(18,56,36,0.08)]"
              :title="`${item.productName} × ${item.quantity}`"
            >
              <img
                :src="createProductCover(item.productName, item.id)"
                :alt="item.productName"
                class="h-full w-full object-cover"
              >
            </div>
          </div>
          <div
            v-if="hiddenCount > 0"
            class="flex h-11 w-11 items-center justify-center rounded-[16px] bg-[#123824] text-xs font-bold text-white shadow-[0_6px_16px_rgba(18,56,36,0.14)]"
          >
            +{{ hiddenCount }}
          </div>
        </div>
      </div>

      <div class="flex items-center md:justify-center">
        <OrderStatusBadge :status="status" />
      </div>

      <div class="text-left md:text-right">
        <p class="text-base font-bold text-[#123824]">{{ totalPriceLabel }}</p>
      </div>
    </div>
  </NuxtLink>
</template>
