<template>
    <div class="marketing-analysis-page bg-surface-50 dark:bg-surface-900 min-h-screen p-6">
        <Toast />
        <div class="max-w-[1200px] mx-auto">
            <!-- Форма запуска анализа -->
            <div v-if="!analysisId" 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">
                    <form @submit.prevent="handleSubmit" class="space-y-4 max-w-2xl">
                        <div class="field">
                            <label for="businessNiche" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Ниша бизнеса * </label>
                            <InputText id="businessNiche" v-model="formData.businessNiche" placeholder="Например: E-commerce платформы" class="w-full" :class="{ 'p-invalid': errors.businessNiche }" />
                            <small v-if="errors.businessNiche" class="p-error">{{ errors.businessNiche }}</small>
                        </div>

                        <div class="field">
                            <label for="product" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Что вы продаете? * </label>
                            <InputText id="product" v-model="formData.product" placeholder="Введите название продукта или услуги" class="w-full" :class="{ 'p-invalid': errors.product }" />
                            <small v-if="errors.product" class="p-error">{{ errors.product }}</small>
                        </div>

                        <div class="field">
                            <label class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Целевая аудитория * </label>

                            <!-- Гендер -->
                            <div class="mb-3">
                                <label class="block text-sm font-medium mb-2 text-surface-600 dark:text-surface-400">Гендер:</label>
                                <div class="flex gap-4 flex-wrap">
                                    <div v-for="gender in VALID_GENDERS" :key="gender" class="flex align-items-center">
                                        <Checkbox :inputId="`gender-${gender}`" :value="gender" v-model="formData.targetAudience.genders" />
                                        <label :for="`gender-${gender}`" class="ml-2 cursor-pointer">{{ gender }}</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Возраст -->
                            <div class="mb-3">
                                <label class="block text-sm font-medium mb-2 text-surface-600 dark:text-surface-400">Возраст:</label>
                                <div class="flex gap-4 flex-wrap">
                                    <div v-for="age in VALID_AGE_RANGES" :key="age" class="flex align-items-center">
                                        <Checkbox :inputId="`age-${age}`" :value="age" v-model="formData.targetAudience.ageRanges" />
                                        <label :for="`age-${age}`" class="ml-2 cursor-pointer">{{ age }}</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Тип -->
                            <div class="mb-3">
                                <label class="block text-sm font-medium mb-2 text-surface-600 dark:text-surface-400">Тип:</label>
                                <div class="flex gap-4 flex-wrap">
                                    <div v-for="type in VALID_AUDIENCE_TYPES" :key="type" class="flex align-items-center">
                                        <Checkbox :inputId="`type-${type}`" :value="type" v-model="formData.targetAudience.types" />
                                        <label :for="`type-${type}`" class="ml-2 cursor-pointer">{{ type }}</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Отображение выбранных значений -->
                            <div v-if="formData.targetAudience.genders.length > 0 || formData.targetAudience.ageRanges.length > 0 || formData.targetAudience.types.length > 0" class="mt-2 p-2 border-round bg-surface-100 dark:bg-surface-800">
                                <small class="text-surface-600 dark:text-surface-400">
                                    <strong>Выбрано:</strong>
                                    <span v-if="formData.targetAudience.genders.length > 0"> Гендер: {{ formData.targetAudience.genders.join(', ') }}</span>
                                    <span v-if="formData.targetAudience.ageRanges.length > 0"> Возраст: {{ formData.targetAudience.ageRanges.join(', ') }}</span>
                                    <span v-if="formData.targetAudience.types.length > 0"> Тип: {{ formData.targetAudience.types.join(', ') }}</span>
                                </small>
                            </div>

                            <small v-if="errors.targetAudience" class="p-error">{{ errors.targetAudience }}</small>
                            <small class="text-surface-500 dark:text-surface-400 mt-1 block">Выберите хотя бы одну опцию для целевой аудитории</small>
                        </div>

                        <div class="field">
                            <label for="region" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Регион (город Казахстана) * </label>
                            <MultiSelect id="region" v-model="formData.region" :options="VALID_REGIONS" placeholder="Выберите регионы" class="w-full" display="chip" :class="{ 'p-invalid': errors.region }" />
                            <small v-if="errors.region" class="p-error">{{ errors.region }}</small>
                            <small class="text-surface-500 dark:text-surface-400 mt-1 block">Выберите один или несколько регионов</small>
                        </div>

                        <div class="field">
                            <label for="goal" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Цель на 6-12 месяцев * </label>
                            <Textarea id="goal" v-model="formData.goal" placeholder="Опишите вашу цель на ближайшие 6-12 месяцев" rows="3" class="w-full" :class="{ 'p-invalid': errors.goal }" />
                            <small v-if="errors.goal" class="p-error">{{ errors.goal }}</small>
                        </div>

                        <div class="field">
                            <label class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Уровень детализации анализа * </label>
                            <div class="flex gap-4">
                                <div v-for="level in DETAIL_LEVELS" :key="level" class="flex align-items-center">
                                    <RadioButton :inputId="`detailLevel-${level}`" v-model="formData.detailLevel" :value="level" :class="{ 'p-invalid': errors.detailLevel }" />
                                    <label :for="`detailLevel-${level}`" class="ml-2 cursor-pointer">
                                        {{ level === 'КРАТКО' ? 'Кратко' : level === 'СТАНДАРТНО' ? 'Стандартно' : 'Подробно' }}
                                    </label>
                                </div>
                            </div>
                            <small v-if="errors.detailLevel" class="p-error">{{ errors.detailLevel }}</small>
                            <small class="text-surface-500 dark:text-surface-400 mt-1 block">Выберите уровень детализации анализа</small>
                        </div>

                        <div class="field">
                            <label for="strongSide" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Сильная сторона бизнеса </label>
                            <Textarea id="strongSide" v-model="formData.strongSide" placeholder="Опишите сильные стороны вашего бизнеса (опционально)" rows="2" class="w-full" :class="{ 'p-invalid': errors.strongSide }" />
                            <small v-if="errors.strongSide" class="p-error">{{ errors.strongSide }}</small>
                        </div>

                        <div class="field">
                            <label for="weakSide" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Слабая сторона бизнеса </label>
                            <Textarea id="weakSide" v-model="formData.weakSide" placeholder="Опишите слабые стороны вашего бизнеса (опционально)" rows="2" class="w-full" :class="{ 'p-invalid': errors.weakSide }" />
                            <small v-if="errors.weakSide" class="p-error">{{ errors.weakSide }}</small>
                        </div>

                        <div class="field">
                            <label for="analysisType" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Тип анализа * </label>
                            <MultiSelect id="analysisType" v-model="formData.analysisType" :options="VALID_ANALYSIS_TYPES" placeholder="Выберите типы анализа" class="w-full" display="chip" :class="{ 'p-invalid': errors.analysisType }">
                                <template #value="slotProps">
                                    <div v-if="slotProps.value && slotProps.value.length > 0" class="flex flex-wrap gap-2">
                                        <Tag v-for="type in slotProps.value" :key="type" :value="getAnalysisTypeLabel(type)" severity="info" />
                                    </div>
                                    <span v-else class="text-surface-400">{{ slotProps.placeholder }}</span>
                                </template>
                                <template #option="slotProps">
                                    <div class="flex align-items-center">
                                        <span>{{ getAnalysisTypeLabel(slotProps.option) }}</span>
                                    </div>
                                </template>
                            </MultiSelect>
                            <small v-if="errors.analysisType" class="p-error">{{ errors.analysisType }}</small>
                            <small class="text-surface-500 dark:text-surface-400 mt-1 block">Выберите один или несколько типов анализа. При выборе нескольких типов будут созданы отдельные анализы для каждого типа.</small>
                        </div>

                        <Button type="submit" label="Начать анализ" icon="pi pi-send" class="w-full p-button-primary" :loading="submitting" />

                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-3 text-center">На основе ваших ответов будет создан подробный и полезный маркетинговый отчет</p>
                    </form>
                </div>
            </div>

            <!-- Статус обработки -->
            <div v-else-if="status === 'processing' || status === 'queued'" 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">
                    <div class="text-center py-6">
                        <ProgressSpinner size="50" />
                        <p class="mt-4 text-lg text-surface-700 dark:text-surface-300">Анализ обрабатывается...</p>
                        <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">Это может занять 5-10 минут. Пожалуйста, подождите.</p>
                        <p v-if="estimatedCompletionTime" class="mt-2 text-sm text-surface-500 dark:text-surface-400">Ожидаемое время завершения: {{ formatDateTime(estimatedCompletionTime) }}</p>
                        <Button label="Отменить" icon="pi pi-times" severity="secondary" class="mt-4" @click="resetAnalysis" />
                    </div>
                </div>
            </div>

            <!-- Ошибка -->
            <div v-else-if="status === 'failed'" 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">
                    <div class="text-center py-6">
                        <i class="pi pi-exclamation-triangle text-6xl text-red-500 mb-3"></i>
                        <p class="mt-4 text-lg text-surface-700 dark:text-surface-300">Анализ завершился с ошибкой</p>
                        <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">Попробуйте запустить анализ снова или обратитесь в поддержку.</p>
                        <Button label="Попробовать снова" icon="pi pi-refresh" class="mt-4" @click="resetAnalysis" />
                    </div>
                </div>
            </div>

            <!-- Результаты анализа -->
            <div v-else-if="status === 'completed' && report" class="space-y-4">
                <!-- Заголовок с кнопкой скачивания -->
                <div class="card">
                    <div class="card-header mb-4">
                        <div class="flex justify-content-between align-items-center">
                            <div>
                                <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-0">Результаты анализа</h2>
                                <div v-if="currentAnalysisType" class="mt-2">
                                    <Tag :value="getAnalysisTypeLabel(currentAnalysisType)" severity="info" />
                                </div>
                            </div>
                            <Button label="Скачать PDF" icon="pi pi-download" @click="handleDownloadPdf" :loading="downloadingPdf" />
                        </div>
                    </div>
                </div>

                <!-- Краткое резюме -->
                <div class="card">
                    <div class="card-header mb-4">
                        <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0">Краткое резюме</h3>
                    </div>
                    <div class="card-content">
                        <div v-if="report.summary" class="markdown-content" v-html="renderedSummary"></div>
                        <div v-else class="text-surface-500 dark:text-surface-400">Резюме недоступно</div>
                    </div>
                </div>

                <!-- Целевая аудитория -->
                <div class="card">
                    <div class="card-header mb-4">
                        <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0">Целевая аудитория</h3>
                    </div>
                    <div class="card-content">
                        <p class="text-surface-700 dark:text-surface-300 mb-4 whitespace-pre-line">{{ report.targetAudience?.description }}</p>
                        <div v-if="report.targetAudience?.channels && report.targetAudience.channels.length > 0">
                            <p class="text-sm font-medium mb-2 text-surface-700 dark:text-surface-300">Рекомендуемые каналы:</p>
                            <div class="flex flex-wrap gap-2">
                                <Tag v-for="channel in report.targetAudience.channels" :key="channel" :value="channel" severity="info" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Рекомендации -->
                <div v-if="report.recommendations && report.recommendations.length > 0" class="card">
                    <div class="card-header mb-4">
                        <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0">Рекомендации</h3>
                    </div>
                    <div class="card-content">
                        <ul class="list-none p-0 m-0">
                            <li v-for="(recommendation, index) in report.recommendations" :key="index" class="flex align-items-start mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2 mt-1"></i>
                                <span class="text-surface-700 dark:text-surface-300">{{ recommendation }}</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Стратегия -->
                <div v-if="report.strategy" class="card">
                    <div class="card-header mb-4">
                        <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0">Маркетинговая стратегия</h3>
                    </div>
                    <div class="card-content">
                        <div class="grid">
                            <div v-if="report.strategy.duration" class="col-12 md:col-4 mb-3">
                                <div class="p-3 border-round bg-blue-50 dark:bg-blue-900">
                                    <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-1">Длительность</p>
                                    <p class="text-lg font-semibold text-surface-900 dark:text-surface-0">{{ report.strategy.duration }}</p>
                                </div>
                            </div>
                            <div v-if="report.strategy.channels && (Array.isArray(report.strategy.channels) ? report.strategy.channels.length > 0 : report.strategy.channels.trim())" class="col-12 mb-3">
                                <div class="p-4 border-round bg-surface-0 dark:bg-surface-800 border-1 border-surface-200 dark:border-surface-700">
                                    <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-3">Каналы</p>
                                    <div class="markdown-content" v-html="renderMarkdown(Array.isArray(report.strategy.channels) ? report.strategy.channels.join('\n') : report.strategy.channels)"></div>
                                </div>
                            </div>
                            <div v-if="report.strategy.contentTypes && report.strategy.contentTypes.length > 0" class="col-12 md:col-4 mb-3">
                                <div class="p-3 border-round bg-purple-50 dark:bg-purple-900">
                                    <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-2">Типы контента</p>
                                    <div class="flex flex-wrap gap-2">
                                        <Tag v-for="type in report.strategy.contentTypes" :key="type" :value="type" severity="secondary" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Кнопки действий -->
                <div class="card">
                    <div class="card-content text-center">
                        <div class="flex gap-3 justify-content-center flex-wrap">
                            <Button label="Создать стратегию на основе анализа" icon="pi pi-magic" severity="success" @click="goToStrategy" />
                            <Button label="Создать новый анализ" icon="pi pi-plus" severity="secondary" @click="resetAnalysis" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import MarketingService from '@/service/MarketingService';
import { marked } from 'marked';
import Button from 'primevue/button';
import Checkbox from 'primevue/checkbox';
import InputText from 'primevue/inputtext';
import MultiSelect from 'primevue/multiselect';
import ProgressSpinner from 'primevue/progressspinner';
import RadioButton from 'primevue/radiobutton';
import Tag from 'primevue/tag';
import Textarea from 'primevue/textarea';
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const toast = useToast();
const router = useRouter();
const route = useRoute();

// Constants
const VALID_REGIONS = [
    'Алматы',
    'Астана',
    'Шымкент',
    'Караганда',
    'Актобе',
    'Тараз',
    'Павлодар',
    'Усть-Каменогорск',
    'Семей',
    'Костанай',
    'Кызылорда',
    'Уральск',
    'Петропавловск',
    'Атырау',
    'Актау',
    'Туркестан',
    'Кокшетау',
    'Талдыкорган',
    'Экибастуз',
    'Рудный'
];

const VALID_GENDERS = ['Женщины', 'Мужчины'];
const VALID_AGE_RANGES = ['20-40', '25-45', '18-25', '40-60', '60+'];
const VALID_AUDIENCE_TYPES = ['Семьи', 'Молодёжь', 'Все подряд'];
const VALID_ANALYSIS_TYPES = ['РЫНОК', 'КОНКУРЕНТЫ', 'ЦА', 'КАНАЛЫ', 'SWOT'];

const DETAIL_LEVELS = ['КРАТКО', 'СТАНДАРТНО', 'ПОДРОБНО'];

// Form data
const formData = ref({
    businessNiche: '',
    product: '',
    targetAudience: {
        genders: [],
        ageRanges: [],
        types: []
    },
    region: [],
    goal: '',
    detailLevel: 'СТАНДАРТНО',
    strongSide: '',
    weakSide: '',
    analysisType: []
});

const analysisTypeOptions = [
    { label: 'РЫНОК - Анализ внешней среды', value: 'РЫНОК' },
    { label: 'КОНКУРЕНТЫ - Анализ конкурентов', value: 'КОНКУРЕНТЫ' },
    { label: 'ЦА - Анализ целевой аудитории', value: 'ЦА' },
    { label: 'КАНАЛЫ - Анализ рекламных каналов', value: 'КАНАЛЫ' },
    { label: 'SWOT - SWOT-анализ', value: 'SWOT' }
];

const submitting = ref(false);
const errors = ref({});

// Analysis state
const analysisId = ref(null);
const status = ref(null);
const report = ref(null);
const currentAnalysisType = ref(null);
const estimatedCompletionTime = ref(null);
const pollingInterval = ref(null);
const pollingAttempts = ref(0);
const maxPollingAttempts = 60; // 10 minutes with 10 second intervals
const pollingIntervalMs = 10000; // 10 seconds
const downloadingPdf = ref(false);

// Validation
const validateForm = () => {
    errors.value = {};

    // BusinessNiche validation
    if (!formData.value.businessNiche || formData.value.businessNiche.trim().length < 3) {
        errors.value.businessNiche = 'Ниша бизнеса должна содержать минимум 3 символа';
    } else if (formData.value.businessNiche.trim().length > 200) {
        errors.value.businessNiche = 'Ниша бизнеса не должна превышать 200 символов';
    }

    // Product validation
    if (!formData.value.product || formData.value.product.trim().length < 3) {
        errors.value.product = 'Название продукта должно содержать минимум 3 символа';
    } else if (formData.value.product.trim().length > 200) {
        errors.value.product = 'Название продукта не должно превышать 200 символов';
    }

    // TargetAudience validation
    const hasGenders = formData.value.targetAudience.genders && formData.value.targetAudience.genders.length > 0;
    const hasAgeRanges = formData.value.targetAudience.ageRanges && formData.value.targetAudience.ageRanges.length > 0;
    const hasTypes = formData.value.targetAudience.types && formData.value.targetAudience.types.length > 0;

    if (!hasGenders && !hasAgeRanges && !hasTypes) {
        errors.value.targetAudience = 'Выберите хотя бы одну опцию для целевой аудитории (гендер, возраст или тип)';
    } else {
        // Валидация значений
        if (formData.value.targetAudience.genders) {
            const invalidGenders = formData.value.targetAudience.genders.filter((g) => !VALID_GENDERS.includes(g));
            if (invalidGenders.length > 0) {
                errors.value.targetAudience = `Недопустимые значения гендера: ${invalidGenders.join(', ')}`;
            }
        }
        if (formData.value.targetAudience.ageRanges) {
            const invalidAges = formData.value.targetAudience.ageRanges.filter((a) => !VALID_AGE_RANGES.includes(a));
            if (invalidAges.length > 0) {
                errors.value.targetAudience = `Недопустимые значения возраста: ${invalidAges.join(', ')}`;
            }
        }
        if (formData.value.targetAudience.types) {
            const invalidTypes = formData.value.targetAudience.types.filter((t) => !VALID_AUDIENCE_TYPES.includes(t));
            if (invalidTypes.length > 0) {
                errors.value.targetAudience = `Недопустимые значения типа: ${invalidTypes.join(', ')}`;
            }
        }
    }

    // Region validation
    if (!formData.value.region || formData.value.region.length === 0) {
        errors.value.region = 'Выберите хотя бы один регион';
    } else {
        const invalidRegions = formData.value.region.filter((r) => !VALID_REGIONS.includes(r));
        if (invalidRegions.length > 0) {
            errors.value.region = `Недопустимые регионы: ${invalidRegions.join(', ')}`;
        }
    }

    // Goal validation
    if (!formData.value.goal || formData.value.goal.trim().length < 10) {
        errors.value.goal = 'Цель должна содержать минимум 10 символов';
    } else if (formData.value.goal.trim().length > 500) {
        errors.value.goal = 'Цель не должна превышать 500 символов';
    }

    // DetailLevel validation
    if (!formData.value.detailLevel || !DETAIL_LEVELS.includes(formData.value.detailLevel)) {
        errors.value.detailLevel = 'Пожалуйста, выберите уровень детализации';
    }

    // StrongSide validation (optional)
    if (formData.value.strongSide && formData.value.strongSide.trim().length > 500) {
        errors.value.strongSide = 'Сильная сторона не должна превышать 500 символов';
    }

    // WeakSide validation (optional)
    if (formData.value.weakSide && formData.value.weakSide.trim().length > 500) {
        errors.value.weakSide = 'Слабая сторона не должна превышать 500 символов';
    }

    // AnalysisType validation
    if (!formData.value.analysisType || formData.value.analysisType.length === 0) {
        errors.value.analysisType = 'Выберите хотя бы один тип анализа';
    } else {
        const invalidTypes = formData.value.analysisType.filter((t) => !VALID_ANALYSIS_TYPES.includes(t));
        if (invalidTypes.length > 0) {
            errors.value.analysisType = `Недопустимые типы анализа: ${invalidTypes.join(', ')}`;
        }
    }

    return Object.keys(errors.value).length === 0;
};

// Start polling for analysis status
const startPolling = (id) => {
    pollingAttempts.value = 0;
    pollingInterval.value = setInterval(async () => {
        pollingAttempts.value++;

        if (pollingAttempts.value > maxPollingAttempts) {
            stopPolling();
            toast.add({
                severity: 'warn',
                summary: 'Таймаут',
                detail: 'Превышено время ожидания анализа. Попробуйте проверить результат позже.',
                life: 5000
            });
            return;
        }

        try {
            const result = await MarketingService.getAnalysisResult(id);
            status.value = result.status;

            if (result.status === 'completed' && result.report) {
                stopPolling();
                report.value = result.report;
                // Сохраняем тип анализа из результата, если он есть
                if (result.analysisType) {
                    currentAnalysisType.value = result.analysisType;
                }
                toast.add({
                    severity: 'success',
                    summary: 'Анализ завершен',
                    detail: 'Маркетинговый анализ успешно завершен',
                    life: 3000
                });
            } else if (result.status === 'failed') {
                stopPolling();
                toast.add({
                    severity: 'error',
                    summary: 'Ошибка анализа',
                    detail: 'Анализ завершился с ошибкой',
                    life: 5000
                });
            }
        } catch (error) {
            console.error('Ошибка при проверке статуса анализа:', error);
            // Continue polling on error, but log it
        }
    }, pollingIntervalMs);
};

// Stop polling
const stopPolling = () => {
    if (pollingInterval.value) {
        clearInterval(pollingInterval.value);
        pollingInterval.value = null;
    }
};

// Handle form submit
const handleSubmit = async () => {
    if (!validateForm()) {
        toast.add({
            severity: 'error',
            summary: 'Ошибка валидации',
            detail: 'Пожалуйста, исправьте ошибки в форме',
            life: 3000
        });
        return;
    }

    submitting.value = true;

    try {
        // Формируем объект targetAudience (удаляем пустые массивы)
        const targetAudience = {};
        if (formData.value.targetAudience.genders && formData.value.targetAudience.genders.length > 0) {
            targetAudience.genders = formData.value.targetAudience.genders;
        }
        if (formData.value.targetAudience.ageRanges && formData.value.targetAudience.ageRanges.length > 0) {
            targetAudience.ageRanges = formData.value.targetAudience.ageRanges;
        }
        if (formData.value.targetAudience.types && formData.value.targetAudience.types.length > 0) {
            targetAudience.types = formData.value.targetAudience.types;
        }

        const requestData = {
            businessNiche: formData.value.businessNiche.trim(),
            product: formData.value.product.trim(),
            targetAudience: targetAudience,
            region: formData.value.region,
            goal: formData.value.goal.trim(),
            detailLevel: formData.value.detailLevel,
            analysisType: formData.value.analysisType
        };

        // Добавляем опциональные поля только если они заполнены
        if (formData.value.strongSide && formData.value.strongSide.trim()) {
            requestData.strongSide = formData.value.strongSide.trim();
        }
        if (formData.value.weakSide && formData.value.weakSide.trim()) {
            requestData.weakSide = formData.value.weakSide.trim();
        }

        const result = await MarketingService.startAnalysis(requestData);

        // Обработка ответа: может быть массив или один объект
        if (Array.isArray(result)) {
            // Множественные анализы
            const firstAnalysis = result[0];
            analysisId.value = firstAnalysis.analysisId;
            status.value = firstAnalysis.status;
            estimatedCompletionTime.value = firstAnalysis.estimatedCompletion;

            // Сохраняем типы анализов
            currentAnalysisType.value = formData.value.analysisType.length === 1 ? formData.value.analysisType[0] : null;

            toast.add({
                severity: 'success',
                summary: 'Анализы запущены',
                detail: `Создано ${result.length} анализов. Они будут обработаны параллельно.`,
                life: 5000
            });

            // Запускаем polling для первого анализа (можно расширить для всех)
            startPolling(firstAnalysis.analysisId);
        } else {
            // Один анализ
            analysisId.value = result.analysisId;
            status.value = result.status;
            currentAnalysisType.value = formData.value.analysisType.length === 1 ? formData.value.analysisType[0] : null;
            estimatedCompletionTime.value = result.estimatedCompletion;

            toast.add({
                severity: 'success',
                summary: 'Анализ запущен',
                detail: result.message || 'Анализ успешно запущен. Результаты будут готовы в течение 5-10 минут.',
                life: 5000
            });

            // Start polling
            startPolling(result.analysisId);
        }
    } catch (error) {
        console.error('Ошибка при запуске анализа:', error);
        toast.add({
            severity: 'error',
            summary: 'Ошибка',
            detail: error.message || 'Не удалось запустить анализ. Пожалуйста, попробуйте снова.',
            life: 5000
        });
    } finally {
        submitting.value = false;
    }
};

// Handle PDF download
const handleDownloadPdf = async () => {
    if (!analysisId.value) return;

    downloadingPdf.value = true;

    try {
        await MarketingService.downloadPdfFile(analysisId.value);
        toast.add({
            severity: 'success',
            summary: 'PDF скачан',
            detail: 'PDF отчет успешно скачан',
            life: 3000
        });
    } catch (error) {
        console.error('Ошибка при скачивании PDF:', error);
        toast.add({
            severity: 'error',
            summary: 'Ошибка',
            detail: error.message || 'Не удалось скачать PDF отчет',
            life: 5000
        });
    } finally {
        downloadingPdf.value = false;
    }
};

// Reset analysis and form
const resetAnalysis = () => {
    stopPolling();
    analysisId.value = null;
    status.value = null;
    report.value = null;
    currentAnalysisType.value = null;
    estimatedCompletionTime.value = null;
    pollingAttempts.value = 0;
    formData.value = {
        businessNiche: '',
        product: '',
        targetAudience: {
            genders: [],
            ageRanges: [],
            types: []
        },
        region: [],
        goal: '',
        detailLevel: 'СТАНДАРТНО',
        strongSide: '',
        weakSide: '',
        analysisType: []
    };
    errors.value = {};
};

// Render markdown to HTML
const renderMarkdown = (markdown) => {
    if (!markdown || typeof markdown !== 'string') {
        return '';
    }
    try {
        // В marked v17 используется marked.parse() с опциями вторым параметром
        return marked.parse(markdown, { breaks: true, gfm: true });
    } catch (error) {
        console.error('Error rendering markdown:', error);
        // В случае ошибки возвращаем исходный текст
        return markdown;
    }
};

// Computed свойство для рендеринга summary
const renderedSummary = computed(() => {
    if (!report.value || !report.value.summary) return '';
    return renderMarkdown(report.value.summary);
});

// Get analysis type label
const getAnalysisTypeLabel = (type) => {
    const labels = {
        РЫНОК: 'Анализ внешней среды',
        КОНКУРЕНТЫ: 'Анализ конкурентов',
        ЦА: 'Анализ целевой аудитории',
        КАНАЛЫ: 'Анализ рекламных каналов',
        SWOT: 'SWOT-анализ'
    };
    return labels[type] || type;
};

// Format date time
const formatDateTime = (dateString) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    date.setHours(date.getHours() + 5);
    return date.toLocaleString('ru-RU', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
};

// Navigate to strategy page
const goToStrategy = () => {
    if (analysisId.value) {
        router.push({
            name: 'marketing-promotion',
            query: { analysisId: analysisId.value }
        });
    } else {
        toast.add({
            severity: 'warn',
            summary: 'Предупреждение',
            detail: 'ID анализа не найден',
            life: 3000
        });
    }
};

// Load analysis from query params
onMounted(async () => {
    const queryAnalysisId = route.query.analysisId;
    if (queryAnalysisId) {
        // Try to load existing analysis
        try {
            analysisId.value = queryAnalysisId;
            const result = await MarketingService.getAnalysisResult(queryAnalysisId);
            status.value = result.status;

            // Сохраняем тип анализа, если он есть
            if (result.analysisType) {
                currentAnalysisType.value = result.analysisType;
            }

            if (result.status === 'completed' && result.report) {
                report.value = result.report;
            } else if (result.status === 'processing' || result.status === 'queued') {
                estimatedCompletionTime.value = result.estimatedCompletionTime;
                startPolling(queryAnalysisId);
            }
        } catch (error) {
            console.error('Ошибка при загрузке анализа:', error);
            toast.add({
                severity: 'error',
                summary: 'Ошибка',
                detail: error.message || 'Не удалось загрузить анализ',
                life: 5000
            });
        }
    }
});

// Cleanup on unmount
onBeforeUnmount(() => {
    stopPolling();
});
</script>

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

.markdown-content {
    line-height: 1.7;
    color: var(--text-color);
    font-size: 0.95rem;
}

.markdown-content :deep(h1) {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-color);
    line-height: 1.3;
}

.markdown-content :deep(h1:first-child) {
    margin-top: 0;
}

.markdown-content :deep(h2) {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-color);
    line-height: 1.3;
}

.markdown-content :deep(h3) {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-color);
    line-height: 1.4;
}

.markdown-content :deep(h4) {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    line-height: 1.4;
}

.markdown-content :deep(h5),
.markdown-content :deep(h6) {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    line-height: 1.4;
}

.markdown-content :deep(p) {
    margin-bottom: 1rem;
    color: var(--text-color);
    line-height: 1.7;
}

.markdown-content :deep(p:last-child) {
    margin-bottom: 0;
}

.markdown-content :deep(ul),
.markdown-content :deep(ol) {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 2rem;
    color: var(--text-color);
}

.markdown-content :deep(ul) {
    list-style-type: disc;
}

.markdown-content :deep(ol) {
    list-style-type: decimal;
}

.markdown-content :deep(li) {
    margin-bottom: 0.5rem;
    line-height: 1.7;
    color: var(--text-color);
}

.markdown-content :deep(li > p) {
    margin-bottom: 0.5rem;
}

.markdown-content :deep(li > ul),
.markdown-content :deep(li > ol) {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.markdown-content :deep(strong) {
    font-weight: 600;
    color: var(--text-color);
}

.markdown-content :deep(em) {
    font-style: italic;
}

.markdown-content :deep(code) {
    background-color: var(--surface-100);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'Courier New', monospace;
}

.markdown-content :deep(pre) {
    background-color: var(--surface-100);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown-content :deep(pre code) {
    background-color: transparent;
    padding: 0;
}

.markdown-content :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.markdown-content :deep(thead) {
    background-color: var(--surface-100);
}

.markdown-content :deep(th) {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 2px solid var(--surface-border);
}

.markdown-content :deep(td) {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-color);
}

.markdown-content :deep(tr:last-child td) {
    border-bottom: none;
}

.markdown-content :deep(tr:hover) {
    background-color: var(--surface-50);
}
</style>
