<script setup lang="ts">
type BonusCardStat = {
  label: string;
  value: string;
};

type BonusCardLink = {
  id: string;
  refereeName: string;
  refereeEmail: string;
  refereeCompanyName?: string | null;
  bonusPercent: number;
};

withDefaults(defineProps<{
  fullName: string;
  email: string;
  companyName?: string | null;
  balance: number;
  stats?: BonusCardStat[];
  sourceLinks?: BonusCardLink[];
  detailTo?: string;
  detailLabel?: string;
}>(), {
  companyName: null,
  stats: () => [],
  sourceLinks: () => [],
  detailTo: '',
  detailLabel: 'Открыть',
});

function formatAmount(value: number) {
  return new Intl.NumberFormat('ru-RU', {
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
  }).format(value);
}
</script>

<template>
  <article class="surface-card rounded-3xl p-5">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div class="space-y-1">
        <h2 class="text-lg font-bold text-[#123824]">{{ fullName }}</h2>
        <p class="text-sm text-[#466653]">{{ email }}</p>
        <p v-if="companyName" class="text-sm text-[#466653]">{{ companyName }}</p>
      </div>

      <NuxtLink
        v-if="detailTo"
        :to="detailTo"
        class="btn btn-accent btn-sm w-fit border-0"
      >
        {{ detailLabel }}
      </NuxtLink>
    </div>

    <div class="mt-5 rounded-[28px] bg-[linear-gradient(135deg,#123824_0%,#0d854a_100%)] px-5 py-4 text-white">
      <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Доступный бонус</p>
      <p class="mt-2 text-3xl font-black leading-none">{{ formatAmount(balance) }}</p>
    </div>

    <dl
      v-if="stats.length"
      class="mt-4 divide-y divide-[#deebe4] rounded-2xl border border-[#deebe4] bg-white"
    >
      <div
        v-for="stat in stats"
        :key="stat.label"
        class="flex items-center justify-between gap-3 px-4 py-3 text-sm"
      >
        <dt class="text-[#5c7b69]">{{ stat.label }}</dt>
        <dd class="text-right font-semibold text-[#123824]">{{ stat.value }}</dd>
      </div>
    </dl>

    <div class="mt-4 space-y-2 rounded-2xl bg-[#f4faf6] p-4 text-sm text-[#355947]">
      <p class="font-semibold text-[#123824]">Начисление идёт с заказов:</p>
      <div v-if="sourceLinks.length" class="space-y-2">
        <div
          v-for="link in sourceLinks"
          :key="link.id"
          class="rounded-2xl bg-white px-3 py-2"
        >
          <p class="font-medium text-[#123824]">{{ link.refereeName }}</p>
          <p>{{ link.refereeCompanyName || link.refereeEmail }}</p>
          <p class="text-xs text-[#5c7b69]">Бонус: {{ link.bonusPercent }}%</p>
        </div>
      </div>
      <p v-else class="rounded-2xl bg-white px-3 py-2 text-[#5c7b69]">
        Активных связок пока нет.
      </p>
    </div>
  </article>
</template>
