<script setup>
const props = defineProps({
    data: { type: Object, default: null }
    // data: { min, q1, median, q3, max }
});

const scaleX = (val) => {
    if (!props.data) return 0;
    const { min, max } = props.data;
    const range = max - min || 1;
    const padding = 20;
    const width = 280 - padding * 2;
    return padding + ((val - min) / range) * width;
};
</script>

<template>
    <div class="rounded-xl border border-surface-200 dark:border-surface-700 p-4">
        <template v-if="data">
            <!-- Simplified SVG boxplot -->
            <svg viewBox="0 0 280 80" class="w-full h-20">
                <!-- whisker line -->
                <line :x1="scaleX(data.min)" y1="40" :x2="scaleX(data.max)" y2="40" stroke="currentColor" stroke-width="1.5" class="text-surface-400" />
                <!-- left whisker cap -->
                <line :x1="scaleX(data.min)" y1="28" :x2="scaleX(data.min)" y2="52" stroke="currentColor" stroke-width="1.5" class="text-surface-400" />
                <!-- right whisker cap -->
                <line :x1="scaleX(data.max)" y1="28" :x2="scaleX(data.max)" y2="52" stroke="currentColor" stroke-width="1.5" class="text-surface-400" />
                <!-- IQR box -->
                <rect :x="scaleX(data.q1)" y="22" :width="scaleX(data.q3) - scaleX(data.q1)" height="36" rx="4" fill="rgba(79,70,229,0.15)" stroke="#4F46E5" stroke-width="1.5" />
                <!-- median line -->
                <line :x1="scaleX(data.median)" y1="22" :x2="scaleX(data.median)" y2="58" stroke="#4F46E5" stroke-width="2.5" />
                <!-- labels -->
                <text :x="scaleX(data.min)" y="72" class="text-surface-400 text-[8px]" fill="#9CA3AF" text-anchor="middle" font-size="8">{{ data.min }}</text>
                <text :x="scaleX(data.q1)" y="72" class="text-surface-400 text-[8px]" fill="#9CA3AF" text-anchor="middle" font-size="8">Q1</text>
                <text :x="scaleX(data.median)" y="72" class="text-primary-500 text-[8px]" fill="#4F46E5" text-anchor="middle" font-size="8" font-weight="600">M</text>
                <text :x="scaleX(data.q3)" y="72" class="text-surface-400 text-[8px]" fill="#9CA3AF" text-anchor="middle" font-size="8">Q3</text>
                <text :x="scaleX(data.max)" y="72" class="text-surface-400 text-[8px]" fill="#9CA3AF" text-anchor="middle" font-size="8">{{ data.max }}</text>
            </svg>
            <div class="mt-2 flex justify-between text-xs text-surface-500 dark:text-surface-400">
                <span
                    >Медиана: <strong class="text-surface-700 dark:text-surface-300">{{ data.median }}</strong></span
                >
                <span
                    >IQR: <strong class="text-surface-700 dark:text-surface-300">{{ data.q1 }}–{{ data.q3 }}</strong></span
                >
            </div>
        </template>
        <template v-else>
            <div class="flex items-center justify-center h-20 rounded-lg border-2 border-dashed border-surface-300 dark:border-surface-600">
                <p class="text-xs text-surface-400 dark:text-surface-500">Нет данных по распределению отзывов</p>
            </div>
        </template>
    </div>
</template>
