<template>
    <div class="marketing-results-page bg-surface-50 dark:bg-surface-900 min-h-screen p-6">
        <div class="max-w-[1200px] mx-auto">
            <div class="card">
                <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">
                    <!-- Metrics -->
                    <div class="grid grid-cols-3 gap-4 mb-6">
                        <div class="metric-card bg-surface-0 dark:bg-surface-800 rounded-lg p-4 text-center">
                            <p class="text-sm text-surface-500 dark:text-surface-400 mb-1">Охват</p>
                            <p class="text-2xl font-bold text-surface-900 dark:text-surface-0">15 000</p>
                        </div>
                        <div class="metric-card bg-surface-0 dark:bg-surface-800 rounded-lg p-4 text-center">
                            <p class="text-sm text-surface-500 dark:text-surface-400 mb-1">Клики</p>
                            <p class="text-2xl font-bold text-surface-900 dark:text-surface-0">1 200</p>
                        </div>
                        <div class="metric-card bg-surface-0 dark:bg-surface-800 rounded-lg p-4 text-center">
                            <p class="text-sm text-surface-500 dark:text-surface-400 mb-1">Заявки</p>
                            <p class="text-2xl font-bold text-surface-900 dark:text-surface-0">150</p>
                        </div>
                    </div>

                    <!-- Chart -->
                    <div class="chart-container mb-6" style="height: 300px">
                        <Chart type="line" :data="chartData" :options="chartOptions" />
                    </div>

                    <!-- By Channels -->
                    <div class="mb-6">
                        <h4 class="text-sm font-semibold mb-4 text-surface-700 dark:text-surface-300">По каналам</h4>
                        <div class="flex gap-6 justify-center">
                            <div class="text-center">
                                <div class="w-16 h-16 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mb-2 mx-auto">
                                    <i class="pi pi-instagram text-primary-600 dark:text-primary-300 text-2xl"></i>
                                </div>
                                <p class="text-xl font-semibold text-surface-900 dark:text-surface-0">900</p>
                            </div>
                            <div class="text-center">
                                <div class="w-16 h-16 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mb-2 mx-auto">
                                    <i class="pi pi-send text-primary-600 dark:text-primary-300 text-2xl"></i>
                                </div>
                                <p class="text-xl font-semibold text-surface-900 dark:text-surface-0">250</p>
                            </div>
                            <div class="text-center">
                                <div class="w-16 h-16 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mb-2 mx-auto">
                                    <i class="pi pi-hashtag text-primary-600 dark:text-primary-300 text-2xl"></i>
                                </div>
                                <p class="text-xl font-semibold text-surface-900 dark:text-surface-0">50</p>
                            </div>
                        </div>
                    </div>

                    <!-- Recommendation -->
                    <div class="recommendation-card bg-primary-50 dark:bg-primary-900 rounded-lg p-4">
                        <h4 class="text-sm font-semibold mb-2 text-surface-900 dark:text-surface-0">Рекомендация</h4>
                        <p class="text-sm text-surface-700 dark:text-surface-300">Instagram стал ведущим каналом - вам стоит продолжать работу с визуальным контентом</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import Chart from 'primevue/chart';
import { ref } from 'vue';

// Chart data
const chartData = ref({
    labels: ['Неделя 1', 'Неделя 2', 'Неделя 3', 'Неделя 4', 'Неделя 5', 'Неделя 6'],
    datasets: [
        {
            label: 'Охват',
            data: [5000, 8000, 10000, 12000, 13000, 15000],
            borderColor: '#3B82F6',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            tension: 0.4,
            fill: true
        }
    ]
});

const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: false
        }
    },
    scales: {
        y: {
            beginAtZero: true,
            grid: {
                color: 'rgba(0, 0, 0, 0.05)'
            }
        },
        x: {
            grid: {
                display: false
            }
        }
    }
};
</script>

<style scoped>
.marketing-results-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;
}

.metric-card {
    border: 1px solid var(--surface-border);
}

.recommendation-card {
    border: 1px solid var(--primary-200);
}

.chart-container {
    position: relative;
}
</style>
