<template>
    <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4">
        <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-1.5">
                <div class="text-[15px] font-semibold text-slate-800">{{ title }}</div>
                <i v-if="description" class="pi pi-question-circle text-[12px] text-slate-400 cursor-help" v-tooltip.top="description"></i>
            </div>
            <div v-if="subtitle" class="text-[12px] text-slate-500">{{ subtitle }}</div>
        </div>

        <div class="relative w-full">
            <svg :viewBox="`0 0 ${viewW} ${viewH}`" class="w-full h-auto">
                <g v-for="(s, idx) in normalizedSteps" :key="s.key">
                    <polygon :points="polygonPoints(idx)" :fill="s.color" opacity="0.95"></polygon>
                    <polygon :points="polygonPoints(idx)" fill="none" stroke="rgba(255,255,255,0.65)" stroke-width="2"></polygon>

                    <text :x="viewW / 2" :y="stageTextY(idx) - 6" text-anchor="middle" fill="rgba(15,23,42,0.85)" font-size="14" font-weight="600">
                        {{ s.label }}
                    </text>
                    <text :x="viewW / 2" :y="stageTextY(idx) + 14" text-anchor="middle" fill="rgba(15,23,42,0.75)" font-size="13">
                        {{ s.value }}
                    </text>

                    <!-- conversion badge between stages -->
                    <g v-if="s.rateToNext && idx < normalizedSteps.length - 1">
                        <rect :x="viewW / 2 - 34" :y="badgeY(idx)" rx="10" ry="10" width="68" height="22" fill="white" stroke="rgba(15,23,42,0.12)"></rect>
                        <text :x="viewW / 2" :y="badgeY(idx) + 15" text-anchor="middle" fill="#52C41A" font-size="12" font-weight="700">
                            {{ s.rateToNext }}
                        </text>
                    </g>
                </g>
            </svg>
        </div>
    </div>
</template>

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

const props = defineProps({
    title: { type: String, default: 'Потери на воронке' },
    subtitle: { type: String, default: '' },
    description: { type: String, default: '' },
    steps: {
        type: Array,
        required: true
        // [{ key, label, value, color, rateToNext }]
    }
});

const viewW = 1000;
const stageH = 92;
const gap = 26;

const normalizedSteps = computed(() => {
    const defaults = ['#7CB9FF', '#52C41A', '#5B89FF', '#FF8E4F', '#FF6B6B'];
    return (props.steps || []).map((s, i) => ({
        key: s.key ?? String(i),
        label: s.label ?? '—',
        value: s.value ?? '—',
        rateToNext: s.rateToNext ?? '',
        color: s.color ?? defaults[i % defaults.length]
    }));
});

const viewH = computed(() => normalizedSteps.value.length * stageH + (normalizedSteps.value.length - 1) * gap);

function widthAt(index) {
    const n = Math.max(1, normalizedSteps.value.length);
    const top = 900;
    const bottom = 420;
    if (n === 1) return top;
    const t = index / (n - 1);
    return top + (bottom - top) * t;
}

function polygonPoints(index) {
    const y = index * (stageH + gap);
    const topW = widthAt(index);
    const bottomW = widthAt(index + 1);
    const cx = viewW / 2;

    const x1 = cx - topW / 2;
    const x2 = cx + topW / 2;
    const x3 = cx + bottomW / 2;
    const x4 = cx - bottomW / 2;

    const y1 = y;
    const y2 = y + stageH;

    return `${x1},${y1} ${x2},${y1} ${x3},${y2} ${x4},${y2}`;
}

function stageTextY(index) {
    const y = index * (stageH + gap);
    return y + stageH / 2;
}

function badgeY(index) {
    const y = index * (stageH + gap);
    return y + stageH + (gap - 22) / 2;
}
</script>
