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

const route = useRoute();

const steps = [
    { key: 'analysis', label: 'Анализ' },
    { key: 'strategy', label: 'Стратегия' },
    { key: 'creative', label: 'Креатив' },
    { key: 'launch', label: 'Запуск' }
];

const currentStepIndex = computed(() => {
    if (route.name === 'targeting-input') return 0;
    if (route.name === 'targeting-analysis') return 0;
    if (route.name === 'targeting-strategy') return 1;
    if (route.name === 'targeting-creative' && route.query.strategyId) {
        return route.query.completed === '1' ? 3 : 3;
    }
    if (route.name === 'targeting-creative') {
        return route.query.completed === '1' ? 3 : 2;
    }
    return 0;
});

function isCompleted(index) {
    return index < currentStepIndex.value;
}

function isActive(index) {
    return index === currentStepIndex.value;
}
</script>

<template>
    <div class="min-h-screen bg-gradient-to-b from-gray-50 via-white to-gray-50">
        <div class="max-w-6xl mx-auto px-4 py-6 lg:px-8 lg:py-8">
            <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="px-5 py-4 lg:px-6 border-b border-gray-100 bg-[linear-gradient(135deg,rgba(59,130,246,0.08),rgba(16,185,129,0.04))]">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div>
                            <p class="text-sm font-medium text-gray-500 uppercase tracking-[0.18em]">AI Targeting System</p>
                            <p class="text-gray-600 mt-1">Единый поток: анализ, стратегия, креатив и запуск рекламы.</p>
                        </div>
                        <div class="rounded-full bg-gray-50 border border-gray-200 px-3 py-1 text-sm text-gray-500">
                            Шаг {{ currentStepIndex + 1 }} из 4
                        </div>
                    </div>
                </div>

                <div class="px-5 py-5 lg:px-6">
                    <div class="flex items-center gap-2 overflow-x-auto">
                        <template v-for="(step, index) in steps" :key="step.key">
                            <div class="flex items-center min-w-fit">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-9 h-9 rounded-full border flex items-center justify-center text-sm font-semibold transition-colors"
                                        :class="{
                                            'bg-primary border-primary text-white shadow-sm': isActive(index),
                                            'bg-green-500 border-green-500 text-white': isCompleted(index),
                                            'bg-white border-gray-300 text-gray-400': !isActive(index) && !isCompleted(index)
                                        }"
                                    >
                                        <span v-if="isCompleted(index)">✓</span>
                                        <span v-else>{{ index + 1 }}</span>
                                    </div>
                                    <span
                                        class="text-sm font-medium whitespace-nowrap transition-colors"
                                        :class="{
                                            'text-primary underline underline-offset-4': isActive(index),
                                            'text-gray-500': isCompleted(index),
                                            'text-gray-400': !isActive(index) && !isCompleted(index)
                                        }"
                                    >
                                        {{ step.label }}
                                    </span>
                                </div>

                                <div
                                    v-if="index < steps.length - 1"
                                    class="h-0.5 w-8 sm:w-14 mx-3 rounded-full"
                                    :class="isCompleted(index + 1) || isActive(index + 1) ? 'bg-primary/50' : 'bg-gray-200'"
                                ></div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <router-view />
        </div>
    </div>
</template>
