<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;
  avatarSrc?: string;
  initials?: string;
  compact?: boolean;
  stats?: BonusCardStat[];
  sourceLinks?: BonusCardLink[];
}>(), {
  email: '',
  companyName: null,
  avatarSrc: '',
  initials: 'FR',
  compact: false,
  stats: () => [],
  sourceLinks: () => [],
});

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

<template>
  <article
    class="surface-card rounded-[32px]"
    :class="compact ? 'flex min-h-[280px] flex-col p-6' : 'p-6'"
  >
    <template v-if="compact">
      <div class="flex justify-center">
        <img
          v-if="avatarSrc"
          :src="avatarSrc"
          :alt="fullName"
          class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
        >
        <div
          v-else
          class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
        >
          {{ initials }}
        </div>
      </div>

      <div class="flex-1" />

      <div class="pt-8 text-center">
        <h2 class="text-lg font-bold leading-tight text-[#123824]">{{ fullName }}</h2>
      </div>

      <div class="pt-6 text-left">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Доступный бонус</p>
        <p class="mt-2 text-2xl font-black leading-none text-[#123824]">{{ formatAmount(balance) }}</p>
      </div>
    </template>

    <template v-else>
      <div class="space-y-1">
        <h1 class="text-2xl font-bold leading-tight text-[#123824]">{{ fullName }}</h1>
        <p v-if="companyName || email" class="text-sm text-[#5c7b69]">
          {{ companyName || email }}
        </p>
      </div>

      <div class="mt-6 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
        <div
          v-for="stat in stats"
          :key="stat.label"
          class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
        >
          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">{{ stat.label }}</p>
          <p class="mt-2 text-xl font-bold leading-none text-[#123824]">{{ stat.value }}</p>
        </div>
      </div>

      <div class="mt-6 rounded-[24px] bg-[#f6fbf8] px-4 py-4">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Доступный бонус</p>
        <p class="mt-2 text-3xl font-black leading-none text-[#123824]">{{ formatAmount(balance) }}</p>
      </div>

      <div v-if="sourceLinks.length" class="mt-6 space-y-2">
        <div
          v-for="link in sourceLinks"
          :key="link.id"
          class="rounded-[24px] bg-[#f6fbf8] px-4 py-4 text-sm text-[#355947]"
        >
          <p class="font-semibold text-[#123824]">{{ link.refereeName }}</p>
          <p class="mt-1">{{ link.refereeCompanyName || link.refereeEmail }}</p>
          <p class="mt-2 text-xs text-[#5c7b69]">Бонус {{ link.bonusPercent }}%</p>
        </div>
      </div>
    </template>
  </article>
</template>
