<script setup>
/** @deprecated Внимание: старая версия (V1/V2). Используйте V3. */
import { computed } from 'vue';

const props = defineProps({
    title: { type: String, required: true },
    value: { type: [String, Number], required: true },
    subtitle: { type: String, default: '' },
    icon: { type: String, default: 'pi-chart-line' },
    accentColor: { type: String, default: '#5B89FF' },
    trendText: { type: String, default: '' },
    description: { type: String, default: '' }
});

function hexToRgba(hex, alpha) {
    const h = String(hex || '')
        .replace('#', '')
        .trim();
    const full =
        h.length === 3
            ? h
                  .split('')
                  .map((c) => c + c)
                  .join('')
            : h;
    if (full.length !== 6) return `rgba(91, 137, 255, ${alpha})`;
    const r = parseInt(full.slice(0, 2), 16);
    const g = parseInt(full.slice(2, 4), 16);
    const b = parseInt(full.slice(4, 6), 16);
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

const headerBg = computed(() => `linear-gradient(90deg, ${hexToRgba(props.accentColor, 0.2)}, ${hexToRgba(props.accentColor, 0.06)})`);
const iconBg = computed(() => hexToRgba(props.accentColor, 0.16));
</script>

<template>
    <div class="relative overflow-hidden rounded-2xl bg-white shadow-sm border border-slate-200/60">
        <!-- subtle top tint like PPT -->
        <div class="h-10 w-full" :style="{ background: headerBg }"></div>

        <div class="-mt-7 px-5 pb-4 pt-0">
            <div class="flex items-start justify-between gap-4">
                <div class="min-w-0">
                    <div class="flex items-center gap-3">
                        <div class="h-10 w-10 rounded-xl flex items-center justify-center shadow-sm border border-white/50" :style="{ background: iconBg, color: accentColor }">
                            <i class="pi" :class="icon"></i>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-1.5">
                                <div class="text-[13px] font-semibold text-slate-800 truncate">{{ title }}</div>
                                <i v-if="description" class="pi pi-question-circle text-[12px] text-slate-400 cursor-help flex-shrink-0" v-tooltip.top="description"></i>
                            </div>
                            <div v-if="subtitle" class="text-[12px] text-slate-500 truncate mt-0.5">{{ subtitle }}</div>
                        </div>
                    </div>
                </div>

                <div v-if="trendText" class="shrink-0">
                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-[12px] font-semibold border border-slate-200/70 bg-white/70 text-slate-700">
                        {{ trendText }}
                    </span>
                </div>
            </div>

            <div class="mt-4 flex items-end justify-between gap-3">
                <div class="text-[30px] leading-none font-semibold tracking-tight text-slate-900">
                    {{ value }}
                </div>
                <div v-if="$slots.right" class="shrink-0">
                    <slot name="right"></slot>
                </div>
            </div>
        </div>
    </div>
</template>
