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

const props = defineProps({
    competitors: { type: Array, default: () => [] }
});

const COLORS = ['#4F46E5', '#7C3AED', '#EC4899', '#F97316', '#22C55E', '#06B6D4', '#EAB308', '#EF4444'];

const plotData = computed(() => {
    const arr = props.competitors.slice(0, 12);
    if (!arr.length) return [];

    const maxPosts = Math.max(...arr.map((c) => c.postsPerMonth ?? 0), 1);
    const maxEr = Math.max(...arr.map((c) => parseFloat(c.er) || 0), 1);
    const maxFoll = Math.max(...arr.map((c) => c.followers ?? 0), 1);

    const PAD = 50,
        W = 280,
        H = 150;

    return arr.map((c) => ({
        name: (c.name || '').slice(0, 12),
        cx: PAD + ((c.postsPerMonth ?? 0) / maxPosts) * W,
        cy: H - ((parseFloat(c.er) || 0) / maxEr) * H + 10,
        r: Math.max(5, Math.min(18, ((c.followers ?? 0) / maxFoll) * 18)),
        original: c
    }));
});
</script>

<template>
    <div class="rounded-xl border border-surface-200 dark:border-surface-700 p-4">
        <template v-if="competitors.length >= 2">
            <svg viewBox="0 0 340 200" class="w-full h-48">
                <!-- Grid lines -->
                <line v-for="i in 4" :key="'gy' + i" x1="40" :y1="40 * i" x2="330" :y2="40 * i" stroke="currentColor" stroke-width="0.5" class="text-surface-200 dark:text-surface-700" opacity="0.5" />
                <line v-for="i in 6" :key="'gx' + i" :x1="40 + i * 48" y1="0" :x2="40 + i * 48" y2="168" stroke="currentColor" stroke-width="0.5" class="text-surface-200 dark:text-surface-700" opacity="0.5" />
                <!-- Axes -->
                <line x1="40" y1="0" x2="40" y2="170" stroke="#9CA3AF" stroke-width="1" />
                <line x1="38" y1="168" x2="335" y2="168" stroke="#9CA3AF" stroke-width="1" />
                <!-- Axis labels -->
                <text x="185" y="195" fill="#9CA3AF" font-size="9" text-anchor="middle">Активность (постов/мес)</text>
                <text x="8" y="90" fill="#9CA3AF" font-size="9" text-anchor="middle" transform="rotate(-90,8,90)">Вовлечённость (ER%)</text>
                <!-- Bubbles -->
                <g v-for="(c, i) in plotData" :key="i">
                    <circle
                        :cx="c.cx"
                        :cy="c.cy"
                        :r="c.r"
                        :fill="COLORS[i % COLORS.length]"
                        opacity="0.7"
                        class="transition-all duration-300"
                        v-tooltip.top="`${c.name}\nПостов: ${c.original.postsPerMonth}, ER: ${c.original.er}%\nПодписчиков: ${c.original.followers}`"
                    />
                    <text :x="c.cx" :y="c.cy - c.r - 3" fill="#4B5563" font-size="7" text-anchor="middle" class="dark:fill-gray-300">{{ c.name }}</text>
                </g>
            </svg>
            <div class="mt-2 flex justify-between text-xs text-surface-500 dark:text-surface-400">
                <span>Размер пузыря = аудитория</span>
                <span>{{ plotData.length }} игроков</span>
            </div>
        </template>
        <template v-else>
            <div class="flex items-center justify-center h-48 rounded-lg border-2 border-dashed border-surface-300 dark:border-surface-600">
                <div class="text-center">
                    <i class="pi pi-chart-scatter text-2xl text-surface-400 mb-2" />
                    <p class="text-xs text-surface-400">Нет данных для Scatter Plot</p>
                </div>
            </div>
        </template>
    </div>
</template>
