<template>
    <div class="marketing-main-page bg-surface-50 dark:bg-surface-900 min-h-screen p-6">
        <div class="max-w-[1920px] mx-auto">
            <div class="flex justify-center">
                <!-- Navigation Menu -->
                <div class="w-full max-w-md">
                    <div class="card h-full">
                        <div class="card-header mb-4">
                            <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-0">Маркетинг</h2>
                        </div>
                        <div class="card-content space-y-3">
                            <div
                                v-for="item in menuItems"
                                :key="item.id"
                                class="menu-item p-4 rounded-lg cursor-pointer transition-colors"
                                :class="{
                                    'bg-primary-50 dark:bg-primary-900': activeMenu === item.id,
                                    'hover:bg-surface-100 dark:hover:bg-surface-800': activeMenu !== item.id
                                }"
                                @click="navigateTo(item.route)"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i :class="[item.icon, item.iconColor, 'text-xl']"></i>
                                        <span class="font-medium text-surface-900 dark:text-surface-0">{{ item.label }}</span>
                                    </div>
                                    <div class="w-2 h-2 rounded-full bg-surface-400"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// Menu items
const activeMenu = ref('main');
const menuItems = [
    {
        id: 'analysis',
        label: 'Маркетинговый анализ',
        icon: 'pi pi-search',
        iconColor: 'text-primary-500',
        route: '/marketing-analysis/analysis'
    },
    {
        id: 'analyses-list',
        label: 'Мои анализы',
        icon: 'pi pi-list',
        iconColor: 'text-primary-500',
        route: '/marketing-analysis/analyses'
    },
    {
        id: 'promotion',
        label: 'Продвижение',
        icon: 'pi pi-send',
        iconColor: 'text-primary-500',
        route: '/marketing-analysis/promotion'
    },
    {
        id: 'strategies-list',
        label: 'Мои стратегии',
        icon: 'pi pi-briefcase',
        iconColor: 'text-primary-500',
        route: '/marketing-analysis/strategies'
    },
    {
        id: 'credentials',
        label: 'Credentials социальных сетей',
        icon: 'pi pi-key',
        iconColor: 'text-primary-500',
        route: '/marketing-analysis/credentials'
    },
    {
        id: 'results',
        label: 'Результаты',
        icon: 'pi pi-chart-bar',
        iconColor: 'text-primary-500',
        route: '/marketing-analysis/results'
    }
];

// Methods
const navigateTo = (route) => {
    router.push(route);
};
</script>

<style scoped>
.marketing-main-page {
    font-family: var(--font-family);
}

.card {
    background: var(--surface-card);
    border-radius: 12px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
    padding: 1.5rem;
}

.card-header {
    border-bottom: 1px solid var(--surface-border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.card-content {
    padding-top: 0;
}

.menu-item {
    transition: all 0.2s ease;
}
</style>
