<template>
    <div class="marketing-promotion-page bg-surface-50 dark:bg-surface-900 min-h-screen p-6">
        <Toast />
        <div class="max-w-[1400px] mx-auto">
            <!-- Форма запуска генерации стратегии -->
            <div v-if="!strategyId && !strategyData" class="card">
                <div class="card-header mb-4">
                    <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-0">Генерация стратегии продвижения</h2>
                    <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">Создайте детальную стратегию продвижения на основе завершенного маркетингового анализа</p>
                </div>
                <div class="card-content">
                    <form @submit.prevent="handleGenerateStrategy" class="space-y-4 max-w-2xl">
                        <div class="field">
                            <label for="analysisId" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> ID анализа <span class="text-red-500">*</span> </label>
                            <InputText id="analysisId" v-model="formData.analysisId" placeholder="Введите ID завершенного анализа" class="w-full" :class="{ 'p-invalid': errors.analysisId }" />
                            <small v-if="errors.analysisId" class="p-error">{{ errors.analysisId }}</small>
                            <small class="text-surface-500 dark:text-surface-400"> ID можно получить из завершенного маркетингового анализа </small>
                        </div>

                        <div class="field">
                            <label for="durationWeeks" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Длительность стратегии (недели) </label>
                            <InputNumber id="durationWeeks" v-model="formData.durationWeeks" :min="1" :max="12" placeholder="4" class="w-full" :class="{ 'p-invalid': errors.durationWeeks }" />
                            <small v-if="errors.durationWeeks" class="p-error">{{ errors.durationWeeks }}</small>
                            <small class="text-surface-500 dark:text-surface-400">От 1 до 12 недель (по умолчанию: 4)</small>
                        </div>

                        <div class="field">
                            <label for="priorityPlatforms" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Приоритетные платформы </label>
                            <MultiSelect id="priorityPlatforms" v-model="formData.priorityPlatforms" :options="platformOptions" placeholder="Выберите платформы (необязательно)" class="w-full" display="chip" />
                            <small class="text-surface-500 dark:text-surface-400"> Если не указано, будут использованы все популярные платформы </small>
                        </div>

                        <Button type="submit" label="Сгенерировать стратегию" icon="pi pi-magic" class="w-full p-button-primary" :loading="generating" />

                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-3 text-center">Генерация стратегии занимает примерно 3-5 минут</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">Это может занять 3-5 минут. Пожалуйста, подождите.</p>
                        <Button label="Отменить ожидание" icon="pi pi-times" severity="secondary" class="mt-4" @click="resetStrategy" />
                    </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="resetStrategy" />
                    </div>
                </div>
            </div>

            <!-- Результаты стратегии -->
            <div v-else-if="status === 'completed' && strategyData?.strategy" 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>
                                <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">Длительность: {{ strategyData.durationWeeks }} {{ pluralize(strategyData.durationWeeks, 'неделя', 'недели', 'недель') }}</p>
                            </div>
                            <div class="flex gap-2">
                                <Button label="Запустить стратегию" icon="pi pi-play" severity="success" @click="handleStartStrategy" :loading="startingStrategy" :disabled="startingStrategy" />
                                <Button label="Создать новую стратегию" icon="pi pi-plus" severity="secondary" @click="resetStrategy" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Недельный план -->
                <div v-if="strategyData.strategy.weeklyPlans && strategyData.strategy.weeklyPlans.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">
                        <div class="grid">
                            <div v-for="plan in strategyData.strategy.weeklyPlans" :key="plan.weekNumber" class="col-12 md:col-6 lg:col-4 mb-4">
                                <div class="week-plan-card p-4 border-round bg-surface-0 dark:bg-surface-800 border-1 border-surface-200 dark:border-surface-700">
                                    <div class="flex align-items-center justify-content-between mb-3">
                                        <!-- <h4 class="text-lg font-semibold text-surface-900 dark:text-surface-0">Неделя {{ plan.weekNumber }}</h4> -->
                                        <Tag :value="`Неделя ${plan.weekNumber}`" severity="info" />
                                    </div>

                                    <div v-if="plan.mainThemes && plan.mainThemes.length > 0" class="mb-3">
                                        <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-2">Основные темы:</p>
                                        <ul class="list-none p-0 m-0">
                                            <li v-for="(theme, idx) in plan.mainThemes" :key="idx" class="flex align-items-start mb-2">
                                                <i class="pi pi-circle-fill text-primary-500 text-xs mr-2 mt-1"></i>
                                                <span class="text-surface-700 dark:text-surface-300 text-sm">{{ theme }}</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <div v-if="plan.contentRecommendations" class="mb-3">
                                        <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-2">Рекомендации:</p>
                                        <p class="text-surface-700 dark:text-surface-300 text-sm whitespace-pre-line">
                                            {{ plan.contentRecommendations }}
                                        </p>
                                    </div>

                                    <div v-if="plan.priorityPlatforms && plan.priorityPlatforms.length > 0">
                                        <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="platform in plan.priorityPlatforms" :key="platform" :value="platform" severity="secondary" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Календарь постов -->
                <div v-if="strategyData.strategy.postCalendar && strategyData.strategy.postCalendar.length > 0" class="card">
                    <div class="card-header mb-4">
                        <div class="flex justify-content-between align-items-center">
                            <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0">Календарь постов</h3>
                            <div class="flex gap-2">
                                <Button label="Экспорт CSV" icon="pi pi-download" severity="secondary" size="small" @click="exportToCsv" />
                                <Button label="Группировать по датам" icon="pi pi-calendar" severity="secondary" size="small" @click="toggleGroupByDate" />
                            </div>
                        </div>
                    </div>
                    <div class="card-content">
                        <!-- Группировка по датам -->
                        <div v-if="groupByDate">
                            <div v-for="(posts, date) in postsByDate" :key="date" class="date-group mb-4 pb-4 border-bottom-1 border-surface-200 dark:border-surface-700">
                                <h4 class="text-lg font-semibold text-surface-900 dark:text-surface-0 mb-3">
                                    {{ formatDate(date) }}
                                </h4>
                                <div class="grid">
                                    <div v-for="(post, idx) in posts" :key="idx" class="col-12 md:col-6 lg:col-4 mb-3">
                                        <div class="post-card p-4 border-round bg-surface-0 dark:bg-surface-800 border-1 border-surface-200 dark:border-surface-700 h-full">
                                            <div class="flex align-items-center justify-content-between mb-3">
                                                <div class="flex gap-2 flex-wrap">
                                                    <Tag :value="post.platform" severity="info" />
                                                    <Tag :value="post.contentType" severity="secondary" />
                                                    <Tag v-if="post.taskId" :value="`Задача: ${post.taskId.substring(0, 8)}...`" severity="success" class="text-xs" />
                                                </div>
                                                <span class="text-sm text-surface-500 dark:text-surface-400">{{ post.publishTime }}</span>
                                            </div>
                                            <div class="mb-2">
                                                <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-1">Тема:</p>
                                                <p class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{ post.theme }}</p>
                                            </div>
                                            <!-- Изображение поста -->
                                            <div v-if="hasImage(post) && !hasImageError(`${date}-${idx}`)" class="mb-3">
                                                <img :src="getImageUrl(post)" :alt="post.theme" class="post-image" loading="lazy" @error="handleImageError(`${date}-${idx}`)" />
                                            </div>
                                            <div v-else-if="hasImage(post) && hasImageError(`${date}-${idx}`)" class="mb-3 no-image-placeholder">
                                                <i class="pi pi-image text-4xl text-surface-400 dark:text-surface-600"></i>
                                                <p class="text-xs text-surface-500 dark:text-surface-400 mt-2">Изображение недоступно</p>
                                            </div>
                                            <div v-else class="mb-3 no-image-placeholder">
                                                <i class="pi pi-image text-4xl text-surface-400 dark:text-surface-600"></i>
                                                <p class="text-xs text-surface-500 dark:text-surface-400 mt-2">Изображение не сгенерировано</p>
                                            </div>
                                            <div class="mb-3">
                                                <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-1">Текст поста:</p>
                                                <p class="text-sm text-surface-700 dark:text-surface-300 whitespace-pre-line line-height-3">{{ post.postText }}</p>
                                            </div>
                                            <div v-if="post.hashtags && post.hashtags.length > 0" class="mb-3">
                                                <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-1">Хештеги:</p>
                                                <div class="flex flex-wrap gap-1">
                                                    <span v-for="(tag, tagIdx) in post.hashtags" :key="tagIdx" class="text-xs px-2 py-1 border-round bg-primary-50 dark:bg-primary-900 text-primary-700 dark:text-primary-300">
                                                        {{ tag }}
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex gap-2">
                                                <Button label="Копировать текст" icon="pi pi-copy" size="small" severity="secondary" class="flex-1" @click="handleCopyPost(post)" />
                                                <Button
                                                    v-if="post.taskId"
                                                    label="Запустить"
                                                    icon="pi pi-play"
                                                    size="small"
                                                    severity="success"
                                                    class="flex-1"
                                                    :loading="isTaskExecuting(post.taskId)"
                                                    :disabled="isTaskExecuting(post.taskId)"
                                                    @click="handleExecuteTask(post.taskId, post)"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Список всех постов -->
                        <div v-else class="grid">
                            <div v-for="(post, idx) in strategyData.strategy.postCalendar" :key="idx" class="col-12 md:col-6 lg:col-4 mb-3">
                                <div class="post-card p-4 border-round bg-surface-0 dark:bg-surface-800 border-1 border-surface-200 dark:border-surface-700 h-full">
                                    <div class="flex align-items-center justify-content-between mb-3">
                                        <div class="flex gap-2 flex-wrap">
                                            <Tag :value="post.platform" severity="info" />
                                            <Tag :value="post.contentType" severity="secondary" />
                                            <Tag v-if="post.taskId" :value="`Задача: ${post.taskId.substring(0, 8)}...`" severity="success" class="text-xs" />
                                        </div>
                                        <span class="text-sm text-surface-500 dark:text-surface-400">{{ post.publishTime }}</span>
                                    </div>
                                    <div class="mb-2">
                                        <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-1">Тема:</p>
                                        <p class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{ post.theme }}</p>
                                    </div>
                                    <!-- Изображение поста -->
                                    <div v-if="hasImage(post) && !hasImageError(idx)" class="mb-3">
                                        <img :src="getImageUrl(post)" :alt="post.theme" class="post-image" loading="lazy" @error="handleImageError(idx)" />
                                    </div>
                                    <div v-else-if="hasImage(post) && hasImageError(idx)" class="mb-3 no-image-placeholder">
                                        <i class="pi pi-image text-4xl text-surface-400 dark:text-surface-600"></i>
                                        <p class="text-xs text-surface-500 dark:text-surface-400 mt-2">Изображение недоступно</p>
                                    </div>
                                    <div v-else class="mb-3 no-image-placeholder">
                                        <i class="pi pi-image text-4xl text-surface-400 dark:text-surface-600"></i>
                                        <p class="text-xs text-surface-500 dark:text-surface-400 mt-2">Изображение не сгенерировано</p>
                                    </div>
                                    <div class="mb-3">
                                        <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-1">Текст поста:</p>
                                        <p class="text-sm text-surface-700 dark:text-surface-300 whitespace-pre-line line-height-3">{{ post.postText }}</p>
                                    </div>
                                    <div v-if="post.hashtags && post.hashtags.length > 0" class="mb-3">
                                        <p class="text-sm font-medium text-surface-600 dark:text-surface-400 mb-1">Хештеги:</p>
                                        <div class="flex flex-wrap gap-1">
                                            <span v-for="(tag, tagIdx) in post.hashtags" :key="tagIdx" class="text-xs px-2 py-1 border-round bg-primary-50 dark:bg-primary-900 text-primary-700 dark:text-primary-300">
                                                {{ tag }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex gap-2">
                                        <Button label="Копировать текст" icon="pi pi-copy" size="small" severity="secondary" class="flex-1" @click="handleCopyPost(post)" />
                                        <Button
                                            v-if="post.taskId"
                                            label="Запустить"
                                            icon="pi pi-play"
                                            size="small"
                                            severity="success"
                                            class="flex-1"
                                            :loading="isTaskExecuting(post.taskId)"
                                            :disabled="isTaskExecuting(post.taskId)"
                                            @click="handleExecuteTask(post.taskId, post)"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Диалог для настройки credentials -->
        <Dialog v-model:visible="credentialsDialogVisible" :header="'Настройка credentials'" :style="{ width: '600px' }" :modal="true">
            <div class="credentials-dialog-content">
                <p class="text-surface-700 dark:text-surface-300 mb-4">Для запуска стратегии необходимо настроить credentials для следующих платформ:</p>
                <div class="mb-4">
                    <Tag v-for="platform in missingPlatforms" :key="platform" :value="platform" severity="warning" class="mr-2 mb-2" />
                </div>
                <p class="text-surface-600 dark:text-surface-400 text-sm">Перейдите на страницу управления credentials для настройки необходимых платформ.</p>
            </div>
            <template #footer>
                <Button label="Отмена" icon="pi pi-times" @click="credentialsDialogVisible = false" severity="secondary" />
                <Button label="Настроить credentials" icon="pi pi-cog" @click="goToCredentials" severity="info" />
            </template>
        </Dialog>
    </div>
</template>

<script setup>
import MarketingService from '@/service/MarketingService';
import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import InputNumber from 'primevue/inputnumber';
import InputText from 'primevue/inputtext';
import MultiSelect from 'primevue/multiselect';
import ProgressSpinner from 'primevue/progressspinner';
import Tag from 'primevue/tag';
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 route = useRoute();
const router = useRouter();

// Form data
const formData = ref({
    analysisId: '',
    durationWeeks: 4,
    priorityPlatforms: []
});

const platformOptions = ['Instagram', 'Facebook', 'LinkedIn', 'Telegram', 'TikTok', 'YouTube', '21MC'];

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

// Strategy state
const strategyId = ref(null);
const status = ref(null);
const strategyData = 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 groupByDate = ref(true);
const startingStrategy = ref(false);
const credentialsDialogVisible = ref(false);
const missingPlatforms = ref([]);
const imageErrors = ref(new Set()); // Track image load errors by post index
const imageBlobUrls = ref({}); // Cache blob URLs for images with auth (reactive object)
const executingTasks = ref(new Set()); // Track which tasks are currently being executed

// Computed
const postsByDate = computed(() => {
    if (!strategyData.value?.strategy?.postCalendar) return {};

    return strategyData.value.strategy.postCalendar.reduce((acc, post) => {
        const date = new Date(post.publishDate).toISOString().split('T')[0];
        if (!acc[date]) {
            acc[date] = [];
        }
        acc[date].push(post);
        return acc;
    }, {});
});

// Get image URL for a post (with auth via blob URL)
const getImageUrl = (post) => {
    if (!post?.imageFilename) return null;
    return imageBlobUrls.value[post.imageFilename] || null;
};

// Preload all images when strategy data is loaded
const preloadImages = async () => {
    if (!strategyData.value?.strategy?.postCalendar) return;

    const imagePromises = strategyData.value.strategy.postCalendar
        .filter((post) => post?.imageFilename)
        .map(async (post) => {
            if (!imageBlobUrls.value[post.imageFilename]) {
                try {
                    const blobUrl = await MarketingService.loadImageAsBlobUrl(post.imageFilename);
                    if (blobUrl) {
                        imageBlobUrls.value[post.imageFilename] = blobUrl;
                    }
                } catch (error) {
                    console.error(`Ошибка при предзагрузке изображения ${post.imageFilename}:`, error);
                }
            }
        });

    await Promise.all(imagePromises);
};

// Cleanup blob URLs
const cleanupBlobUrls = () => {
    Object.values(imageBlobUrls.value).forEach((blobUrl) => {
        URL.revokeObjectURL(blobUrl);
    });
    imageBlobUrls.value = {};
};

// Check if post has image
const hasImage = (post) => {
    return post?.imageUrl && post?.imageFilename;
};

// Check if image has error
const hasImageError = (postIndex) => {
    return imageErrors.value.has(postIndex);
};

// Handle image error
const handleImageError = (postIndex) => {
    imageErrors.value.add(postIndex);
};

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

    if (!formData.value.analysisId || formData.value.analysisId.trim().length === 0) {
        errors.value.analysisId = 'ID анализа обязателен';
    }

    if (formData.value.durationWeeks && (formData.value.durationWeeks < 1 || formData.value.durationWeeks > 12)) {
        errors.value.durationWeeks = 'Длительность должна быть от 1 до 12 недель';
    }

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

// Start polling for strategy 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.getStrategy(id);
            status.value = result.status;

            if (result.status === 'completed' && result.strategy) {
                stopPolling();
                strategyData.value = result;
                imageErrors.value.clear(); // Reset image errors when new strategy is loaded
                cleanupBlobUrls(); // Cleanup old blob URLs
                await preloadImages(); // Preload all images with auth
                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 handleGenerateStrategy = async () => {
    if (!validateForm()) {
        toast.add({
            severity: 'error',
            summary: 'Ошибка валидации',
            detail: 'Пожалуйста, исправьте ошибки в форме',
            life: 3000
        });
        return;
    }

    generating.value = true;

    try {
        const options = {};
        if (formData.value.durationWeeks) {
            options.durationWeeks = formData.value.durationWeeks;
        }
        if (formData.value.priorityPlatforms && formData.value.priorityPlatforms.length > 0) {
            options.priorityPlatforms = formData.value.priorityPlatforms;
        }

        const result = await MarketingService.generateStrategy(formData.value.analysisId.trim(), options);

        strategyId.value = result.strategyId;
        status.value = result.status;

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

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

// Reset strategy and form
const resetStrategy = () => {
    stopPolling();
    strategyId.value = null;
    status.value = null;
    strategyData.value = null;
    pollingAttempts.value = 0;
    imageErrors.value.clear(); // Clear image errors when resetting
    cleanupBlobUrls(); // Cleanup blob URLs when resetting
    executingTasks.value.clear(); // Clear executing tasks when resetting
    formData.value = {
        analysisId: '',
        durationWeeks: 4,
        priorityPlatforms: []
    };
    errors.value = {};
};

// Handle copy post
const handleCopyPost = (post) => {
    const textToCopy = `${post.postText}\n\n${post.hashtags ? post.hashtags.join(' ') : ''}`;
    navigator.clipboard
        .writeText(textToCopy)
        .then(() => {
            toast.add({
                severity: 'success',
                summary: 'Скопировано',
                detail: 'Текст поста скопирован в буфер обмена',
                life: 2000
            });
        })
        .catch(() => {
            toast.add({
                severity: 'error',
                summary: 'Ошибка',
                detail: 'Не удалось скопировать текст',
                life: 3000
            });
        });
};

// Handle execute task
const handleExecuteTask = async (taskId, post) => {
    if (!taskId) {
        toast.add({
            severity: 'warn',
            summary: 'Ошибка',
            detail: 'ID задачи не найден',
            life: 3000
        });
        return;
    }

    // Add task to executing set
    executingTasks.value.add(taskId);

    try {
        const result = await MarketingService.executeTask(taskId);

        toast.add({
            severity: 'success',
            summary: 'Задача запущена',
            detail: `Задача публикации успешно запущена. Платформа: ${result.platform || post?.platform || 'N/A'}`,
            life: 5000
        });
    } catch (error) {
        console.error('Ошибка при запуске задачи:', error);

        // Handle specific error codes
        if (error.code === 'UNAUTHORIZED') {
            toast.add({
                severity: 'error',
                summary: 'Ошибка авторизации',
                detail: 'Необходимо войти в систему',
                life: 5000
            });
        } else if (error.code === 'FORBIDDEN') {
            toast.add({
                severity: 'error',
                summary: 'Доступ запрещен',
                detail: 'У вас нет доступа к этой задаче',
                life: 5000
            });
        } else if (error.code === 'NOT_FOUND') {
            toast.add({
                severity: 'error',
                summary: 'Задача не найдена',
                detail: 'Задача с указанным ID не найдена',
                life: 5000
            });
        } else if (error.code === 'INVALID_STATUS') {
            toast.add({
                severity: 'warn',
                summary: 'Задача не может быть запущена',
                detail: error.message || 'Задача не может быть выполнена в текущем статусе. Только задачи со статусом "pending" или "failed" могут быть запущены вручную.',
                life: 5000
            });
        } else {
            toast.add({
                severity: 'error',
                summary: 'Ошибка',
                detail: error.message || 'Не удалось запустить задачу. Попробуйте позже.',
                life: 5000
            });
        }
    } finally {
        // Remove task from executing set
        executingTasks.value.delete(taskId);
    }
};

// Check if task is executing
const isTaskExecuting = (taskId) => {
    return taskId ? executingTasks.value.has(taskId) : false;
};

// Export to CSV
const exportToCsv = () => {
    if (!strategyData.value?.strategy?.postCalendar) return;

    const headers = ['Дата', 'Время', 'Платформа', 'Тип контента', 'Тема', 'Текст поста', 'Хештеги'];
    const rows = strategyData.value.strategy.postCalendar.map((post) => {
        const date = new Date(post.publishDate);
        return [date.toLocaleDateString('ru-RU'), post.publishTime || '', post.platform || '', post.contentType || '', post.theme || '', `"${(post.postText || '').replace(/"/g, '""')}"`, (post.hashtags || []).join(' ')];
    });

    const csvContent = [headers.join(','), ...rows.map((row) => row.join(','))].join('\n');

    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `strategy_calendar_${new Date().toISOString().split('T')[0]}.csv`;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);

    toast.add({
        severity: 'success',
        summary: 'Экспорт выполнен',
        detail: 'Календарь постов экспортирован в CSV',
        life: 3000
    });
};

// Toggle group by date
const toggleGroupByDate = () => {
    groupByDate.value = !groupByDate.value;
};

// Handle start strategy
const handleStartStrategy = async () => {
    if (!strategyId.value) {
        toast.add({
            severity: 'error',
            summary: 'Ошибка',
            detail: 'ID стратегии не найден',
            life: 3000
        });
        return;
    }

    startingStrategy.value = true;

    try {
        const result = await MarketingService.startStrategy(strategyId.value);

        toast.add({
            severity: 'success',
            summary: 'Стратегия запущена',
            detail: `Стратегия успешно запущена. Создано задач: ${result.tasksCreated}. Платформы: ${result.platforms?.join(', ') || 'N/A'}`,
            life: 5000
        });
    } catch (error) {
        console.error('Ошибка при запуске стратегии:', error);

        // Handle specific error codes
        if (error.code === 'MISSING_CREDENTIALS') {
            // Show error message in toast
            toast.add({
                severity: 'error',
                summary: 'Ошибка',
                detail: error.message || 'Не удалось запустить стратегию',
                life: 5000
            });

            // Extract platform from error message (format: "Credentials not found for platform: facebook")
            const platformMatch = error.message?.match(/platform:\s*(\w+)/i) || error.message?.match(/for platform\s+(\w+)/i);
            if (platformMatch) {
                missingPlatforms.value = [platformMatch[1].toLowerCase()];
            } else {
                // Try to get platforms from strategy data
                const platforms = strategyData.value?.priorityPlatforms || strategyData.value?.strategy?.postCalendar?.map((p) => p.platform).filter((v, i, a) => a.indexOf(v) === i) || [];
                missingPlatforms.value = platforms.length > 0 ? platforms : ['facebook']; // Default to facebook if unknown
            }
            credentialsDialogVisible.value = true;
        } else if (error.code === 'INVALID_STATUS') {
            toast.add({
                severity: 'warn',
                summary: 'Стратегия не готова',
                detail: error.message || 'Стратегия еще не завершена. Дождитесь завершения генерации.',
                life: 5000
            });
        } else if (error.code === 'UNAUTHORIZED') {
            toast.add({
                severity: 'error',
                summary: 'Ошибка авторизации',
                detail: 'Необходимо войти в систему',
                life: 5000
            });
        } else if (error.code === 'NOT_FOUND') {
            toast.add({
                severity: 'error',
                summary: 'Не найдено',
                detail: 'Стратегия не найдена',
                life: 5000
            });
        } else if (error.code === 'FORBIDDEN') {
            toast.add({
                severity: 'error',
                summary: 'Доступ запрещен',
                detail: 'У вас нет доступа к этой стратегии',
                life: 5000
            });
        } else if (error.code === 'VALIDATION_ERROR') {
            toast.add({
                severity: 'error',
                summary: 'Ошибка валидации',
                detail: error.message || 'Проверьте правильность данных',
                life: 5000
            });
        } else {
            toast.add({
                severity: 'error',
                summary: 'Ошибка',
                detail: error.message || 'Не удалось запустить стратегию. Попробуйте позже.',
                life: 5000
            });
        }
    } finally {
        startingStrategy.value = false;
    }
};

// Go to credentials page
const goToCredentials = () => {
    credentialsDialogVisible.value = false;
    router.push({ name: 'marketing-credentials' });
};

// Format date
const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('ru-RU', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
    });
};

// Pluralize
const pluralize = (count, one, few, many) => {
    const mod10 = count % 10;
    const mod100 = count % 100;

    if (mod10 === 1 && mod100 !== 11) return one;
    if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20)) return few;
    return many;
};

// Load strategy from query params or try to get by analysisId
onMounted(async () => {
    const queryAnalysisId = route.query.analysisId;
    const queryStrategyId = route.query.strategyId;

    if (queryStrategyId) {
        // Try to load existing strategy
        try {
            const result = await MarketingService.getStrategy(queryStrategyId);
            strategyId.value = result.strategyId;
            status.value = result.status;
            if (result.status === 'completed' && result.strategy) {
                strategyData.value = result;
                cleanupBlobUrls(); // Cleanup old blob URLs
                await preloadImages(); // Preload all images with auth
            } else if (result.status === 'processing' || result.status === 'queued') {
                startPolling(result.strategyId);
            }
        } catch (error) {
            console.error('Ошибка при загрузке стратегии:', error);
        }
    } else if (queryAnalysisId) {
        // Try to get strategy by analysisId
        formData.value.analysisId = queryAnalysisId;
        try {
            const result = await MarketingService.getStrategyByAnalysis(queryAnalysisId);
            strategyId.value = result.strategyId;
            status.value = result.status;
            if (result.status === 'completed' && result.strategy) {
                strategyData.value = result;
                cleanupBlobUrls(); // Cleanup old blob URLs
                await preloadImages(); // Preload all images with auth
            } else if (result.status === 'processing' || result.status === 'queued') {
                startPolling(result.strategyId);
            }
        } catch (error) {
            // Strategy doesn't exist yet, show form
            console.log('Стратегия для анализа не найдена, показываем форму');
        }
    }
});

// Cleanup on unmount
onBeforeUnmount(() => {
    stopPolling();
    cleanupBlobUrls(); // Cleanup blob URLs on unmount
    executingTasks.value.clear(); // Clear executing tasks on unmount
});
</script>

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

.week-plan-card {
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.week-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.post-card {
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.date-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.post-image {
    width: 100%;
    max-width: 512px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.no-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--surface-50);
    border: 1px dashed var(--surface-300);
    border-radius: 8px;
    min-height: 200px;
    text-align: center;
}

.dark .no-image-placeholder {
    background: var(--surface-800);
    border-color: var(--surface-700);
}
</style>
