<template>
    <div class="marketing-credentials-page bg-surface-50 dark:bg-surface-900 min-h-screen p-6">
        <Toast />
        <div class="max-w-[1200px] mx-auto">
            <div class="card mb-4">
                <div class="card-header mb-4">
                    <h2 class="text-2xl font-bold text-surface-900 dark:text-surface-0">Управление credentials социальных сетей</h2>
                    <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">Настройте access tokens для платформ, на которых вы хотите автоматически публиковать контент</p>
                </div>
                <div class="card-content">
                    <form @submit.prevent="handleSaveCredentials" class="space-y-4">
                        <div class="grid">
                            <div class="col-12 md:col-4">
                                <div class="field">
                                    <label for="platform" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Платформа <span class="text-red-500">*</span> </label>
                                    <Dropdown id="platform" v-model="formData.platform" :options="platformOptions" placeholder="Выберите платформу" class="w-full" :class="{ 'p-invalid': errors.platform }" />
                                    <small v-if="errors.platform" class="p-error">{{ errors.platform }}</small>
                                </div>
                            </div>
                            <!-- Поля для простых платформ (Facebook, LinkedIn, etc.) -->
                            <template v-if="formData.platform && formData.platform !== 'telegram'">
                                <div class="col-12 md:col-6">
                                    <div class="field">
                                        <label for="credentials" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Access Token <span class="text-red-500">*</span> </label>
                                        <InputText id="credentials" v-model="formData.credentials" type="password" placeholder="Введите access token" class="w-full" :class="{ 'p-invalid': errors.credentials }" />
                                        <small v-if="errors.credentials" class="p-error">{{ errors.credentials }}</small>
                                        <small class="text-surface-500 dark:text-surface-400 mt-1 block"> Токен будет зашифрован перед сохранением </small>
                                    </div>
                                </div>
                            </template>

                            <!-- Поля для Telegram -->
                            <template v-if="formData.platform === 'telegram'">
                                <div class="col-12 md:col-3">
                                    <div class="field">
                                        <label for="botToken" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Bot Token <span class="text-red-500">*</span> </label>
                                        <InputText id="botToken" v-model="formData.botToken" type="password" placeholder="Введите bot token от @BotFather" class="w-full" :class="{ 'p-invalid': errors.botToken }" />
                                        <small v-if="errors.botToken" class="p-error">{{ errors.botToken }}</small>
                                        <small class="text-surface-500 dark:text-surface-400 mt-1 block"> Токен бота, полученный от @BotFather </small>
                                    </div>
                                </div>
                                <div class="col-12 md:col-3">
                                    <div class="field">
                                        <label for="chatId" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Chat ID <span class="text-red-500">*</span> </label>
                                        <InputText id="chatId" v-model="formData.chatId" type="text" placeholder="Введите chat ID (например: -1001234567890)" class="w-full" :class="{ 'p-invalid': errors.chatId }" />
                                        <small v-if="errors.chatId" class="p-error">{{ errors.chatId }}</small>
                                        <small class="text-surface-500 dark:text-surface-400 mt-1 block"> ID чата/канала (может быть отрицательным для групп и каналов) </small>
                                    </div>
                                </div>
                            </template>

                            <div class="col-12 md:col-2">
                                <div class="field">
                                    <label class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300">&nbsp;</label>
                                    <Button type="submit" label="Сохранить" icon="pi pi-save" class="w-full" :loading="saving" />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div 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>
                        <Button label="Обновить" icon="pi pi-refresh" severity="secondary" @click="loadCredentials" :loading="loading" />
                    </div>
                </div>
                <div class="card-content">
                    <DataTable :value="credentials" :loading="loading" paginator :rows="10" :rowsPerPageOptions="[5, 10, 20]" dataKey="platform" :emptyMessage="'Нет настроенных платформ'">
                        <Column field="platform" header="Платформа" :sortable="true" style="min-width: 150px">
                            <template #body="slotProps">
                                <Tag :value="slotProps.data.platform" severity="info" />
                            </template>
                        </Column>

                        <Column field="hasCredentials" header="Статус" :sortable="true" style="min-width: 120px">
                            <template #body="slotProps">
                                <Tag :value="slotProps.data.hasCredentials ? 'Настроено' : 'Не настроено'" :severity="slotProps.data.hasCredentials ? 'success' : 'warning'" />
                            </template>
                        </Column>

                        <Column field="createdAt" header="Создано" :sortable="true" style="min-width: 180px">
                            <template #body="slotProps">
                                <span v-if="slotProps.data.createdAt">{{ formatDateTime(slotProps.data.createdAt) }}</span>
                                <span v-else class="text-surface-400">—</span>
                            </template>
                        </Column>

                        <Column field="updatedAt" header="Обновлено" :sortable="true" style="min-width: 180px">
                            <template #body="slotProps">
                                <span v-if="slotProps.data.updatedAt">{{ formatDateTime(slotProps.data.updatedAt) }}</span>
                                <span v-else class="text-surface-400">—</span>
                            </template>
                        </Column>

                        <Column header="Действия" style="min-width: 150px">
                            <template #body="slotProps">
                                <Button icon="pi pi-trash" severity="danger" size="small" v-tooltip.top="'Удалить credentials'" @click="confirmDelete(slotProps.data.platform)" :disabled="!slotProps.data.hasCredentials" />
                            </template>
                        </Column>
                    </DataTable>
                </div>
            </div>
        </div>

        <!-- Диалог подтверждения удаления -->
        <Dialog v-model:visible="deleteDialogVisible" :header="'Подтверждение удаления'" :style="{ width: '450px' }" :modal="true">
            <div class="confirmation-content">
                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                <span
                    >Вы уверены, что хотите удалить credentials для платформы <b>{{ platformToDelete }}</b
                    >?</span
                >
            </div>
            <template #footer>
                <Button label="Отмена" icon="pi pi-times" @click="deleteDialogVisible = false" severity="secondary" />
                <Button label="Удалить" icon="pi pi-check" @click="handleDeleteCredentials" severity="danger" :loading="deleting" />
            </template>
        </Dialog>
    </div>
</template>

<script setup>
import MarketingService from '@/service/MarketingService';
import Button from 'primevue/button';
import Column from 'primevue/column';
import DataTable from 'primevue/datatable';
import Dialog from 'primevue/dialog';
import Dropdown from 'primevue/dropdown';
import InputText from 'primevue/inputtext';
import Tag from 'primevue/tag';
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';
import { onMounted, ref, watch } from 'vue';

const toast = useToast();

// Form data
const formData = ref({
    platform: null,
    credentials: '', // Для простых платформ (facebook, linkedin, etc.)
    botToken: '', // Для Telegram
    chatId: '' // Для Telegram
});

const platformOptions = ['facebook', 'instagram', 'linkedin', 'telegram', 'tiktok', 'youtube'];

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

// Data
const credentials = ref([]);
const loading = ref(false);
const deleteDialogVisible = ref(false);
const platformToDelete = ref(null);
const deleting = ref(false);

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

    if (!formData.value.platform) {
        errors.value.platform = 'Пожалуйста, выберите платформу';
    }

    // Валидация для Telegram
    if (formData.value.platform === 'telegram') {
        if (!formData.value.botToken || formData.value.botToken.trim().length === 0) {
            errors.value.botToken = 'Bot token обязателен';
        } else if (formData.value.botToken.trim().length < 10) {
            errors.value.botToken = 'Bot token слишком короткий';
        }

        if (!formData.value.chatId || formData.value.chatId.trim().length === 0) {
            errors.value.chatId = 'Chat ID обязателен';
        }
    } else {
        // Валидация для остальных платформ
        if (!formData.value.credentials || formData.value.credentials.trim().length === 0) {
            errors.value.credentials = 'Access token обязателен';
        } else if (formData.value.credentials.trim().length < 10) {
            errors.value.credentials = 'Access token слишком короткий';
        }
    }

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

// Load credentials
const loadCredentials = async () => {
    loading.value = true;
    try {
        const data = await MarketingService.getAllCredentials();
        credentials.value = data || [];
    } catch (error) {
        console.error('Ошибка при загрузке credentials:', error);
        toast.add({
            severity: 'error',
            summary: 'Ошибка',
            detail: error.message || 'Не удалось загрузить список credentials',
            life: 5000
        });
    } finally {
        loading.value = false;
    }
};

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

    saving.value = true;

    try {
        // Подготовка credentials в зависимости от платформы
        let credentialsToSave;
        if (formData.value.platform === 'telegram') {
            // Для Telegram отправляем объект
            credentialsToSave = {
                botToken: formData.value.botToken.trim(),
                chatId: formData.value.chatId.trim()
            };
        } else {
            // Для остальных платформ отправляем строку
            credentialsToSave = formData.value.credentials.trim();
        }

        await MarketingService.saveCredentials(formData.value.platform, credentialsToSave);
        toast.add({
            severity: 'success',
            summary: 'Успешно',
            detail: `Credentials для ${formData.value.platform} успешно сохранены`,
            life: 3000
        });

        // Reset form
        formData.value = {
            platform: null,
            credentials: '',
            botToken: '',
            chatId: ''
        };
        errors.value = {};

        // Reload credentials list
        await loadCredentials();
    } catch (error) {
        console.error('Ошибка при сохранении credentials:', error);

        // Handle specific error codes
        if (error.code === 'VALIDATION_ERROR') {
            toast.add({
                severity: 'error',
                summary: 'Ошибка валидации',
                detail: error.message || 'Проверьте правильность введенных данных',
                life: 5000
            });
        } else if (error.code === 'UNAUTHORIZED') {
            toast.add({
                severity: 'error',
                summary: 'Ошибка авторизации',
                detail: 'Необходимо войти в систему',
                life: 5000
            });
        } else {
            toast.add({
                severity: 'error',
                summary: 'Ошибка',
                detail: error.message || 'Не удалось сохранить credentials',
                life: 5000
            });
        }
    } finally {
        saving.value = false;
    }
};

// Confirm delete
const confirmDelete = (platform) => {
    platformToDelete.value = platform;
    deleteDialogVisible.value = true;
};

// Handle delete credentials
const handleDeleteCredentials = async () => {
    if (!platformToDelete.value) return;

    deleting.value = true;

    try {
        await MarketingService.deleteCredentials(platformToDelete.value);
        toast.add({
            severity: 'success',
            summary: 'Успешно',
            detail: `Credentials для ${platformToDelete.value} успешно удалены`,
            life: 3000
        });

        deleteDialogVisible.value = false;
        platformToDelete.value = null;

        // Reload credentials list
        await loadCredentials();
    } catch (error) {
        console.error('Ошибка при удалении credentials:', error);

        if (error.code === 'NOT_FOUND') {
            toast.add({
                severity: 'warn',
                summary: 'Не найдено',
                detail: `Credentials для ${platformToDelete.value} не найдены`,
                life: 5000
            });
        } else if (error.code === 'UNAUTHORIZED') {
            toast.add({
                severity: 'error',
                summary: 'Ошибка авторизации',
                detail: 'Необходимо войти в систему',
                life: 5000
            });
        } else {
            toast.add({
                severity: 'error',
                summary: 'Ошибка',
                detail: error.message || 'Не удалось удалить credentials',
                life: 5000
            });
        }
    } finally {
        deleting.value = false;
    }
};

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

// Watch platform changes to reset form fields
watch(
    () => formData.value.platform,
    (newPlatform) => {
        // Сброс полей при смене платформы
        formData.value.credentials = '';
        formData.value.botToken = '';
        formData.value.chatId = '';
        errors.value = {};
    }
);

// Load on mount
onMounted(() => {
    loadCredentials();
});
</script>

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

.confirmation-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}
</style>
