<template>
    <div class="grid">
        <div class="col-12">
            <div class="card">
                <h5>Генерация отчётов</h5>
                <p>Создайте новый отчёт с помощью AI-исследования по выбранной теме.</p>
            </div>
        </div>

        <!-- Форма генерации отчёта -->
        <div class="col-12 lg:col-6">
            <div class="card">
                <h5>Создать новый отчёт</h5>
                <form @submit.prevent="handleGenerate" class="p-fluid">
                    <div class="field">
                        <label for="query">Тема исследования *</label>
                        <InputText id="query" v-model="formData.query" :class="{ 'p-invalid': errors.query }" placeholder="Введите тему для исследования" />
                        <small v-if="errors.query" class="p-error">{{ errors.query }}</small>
                    </div>

                    <div class="field">
                        <label for="lang">Язык отчёта</label>
                        <Dropdown id="lang" v-model="formData.lang" :options="langOptions" optionLabel="label" optionValue="value" placeholder="Выберите язык" />
                    </div>

                    <div class="field">
                        <label for="report_type">Тип отчёта</label>
                        <Dropdown id="report_type" v-model="formData.report_type" :options="reportTypeOptions" optionLabel="label" optionValue="value" placeholder="Выберите тип" />
                    </div>

                    <div class="field">
                        <label for="depth">Глубина исследования: {{ formData.depth }}</label>
                        <Slider id="depth" v-model.number="formData.depth" :min="1" :max="5" :step="1" :disabled="false" />
                    </div>

                    <div class="field">
                        <label for="breadth">Широта исследования: {{ formData.breadth }}</label>
                        <Slider id="breadth" v-model.number="formData.breadth" :min="2" :max="10" :step="1" :disabled="false" />
                    </div>

                    <div class="field">
                        <Button type="submit" label="Сгенерировать отчёт" icon="pi pi-file-pdf" :loading="loading" :disabled="loading" class="w-full" />
                    </div>
                </form>
            </div>
        </div>

        <!-- Статистика -->
        <div class="col-12 lg:col-6">
            <div class="card">
                <h5>Статистика отчётов</h5>
                <div class="grid">
                    <div class="col-6">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-blue-500">{{ totalReports }}</div>
                            <div class="text-sm text-600">Всего отчётов</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-green-500">{{ thisMonthReports }}</div>
                            <div class="text-sm text-600">За этот месяц</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- История отчётов -->
        <div class="col-12">
            <div class="card">
                <div class="flex justify-content-between align-items-center mb-3">
                    <h5>История отчётов</h5>
                    <Button icon="pi pi-refresh" @click="loadReports" :loading="loading" severity="secondary" text />
                </div>

                <DataTable
                    :value="reports"
                    :loading="loading"
                    :paginator="true"
                    :rows="pageSize"
                    :totalRecords="totalElements"
                    :lazy="true"
                    @page="onPageChange"
                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                    :rowsPerPageOptions="[10, 20, 50]"
                    currentPageReportTemplate="Показано {first} - {last} из {totalRecords} записей"
                    emptyMessage="Отчёты не найдены"
                    responsiveLayout="scroll"
                >
                    <Column field="reportTitle" header="Заголовок" sortable>
                        <template #body="{ data }">
                            <div class="font-semibold">{{ data.reportTitle }}</div>
                        </template>
                    </Column>

                    <Column field="authorName" header="Автор" sortable></Column>

                    <Column field="companyName" header="Компания" sortable></Column>

                    <Column field="startDate" header="Период" sortable>
                        <template #body="{ data }">
                            <div>{{ formatDate(data.startDate) }} - {{ formatDate(data.endDate) }}</div>
                        </template>
                    </Column>

                    <Column field="format" header="Формат" sortable>
                        <template #body="{ data }">
                            <Tag :value="data.format" :severity="data.format === 'PDF' ? 'danger' : 'info'" />
                        </template>
                    </Column>

                    <Column field="fileSize" header="Размер" sortable>
                        <template #body="{ data }">
                            {{ formatFileSize(data.fileSize) }}
                        </template>
                    </Column>

                    <Column field="createdAt" header="Создан" sortable>
                        <template #body="{ data }">
                            {{ formatDateTime(data.createdAt) }}
                        </template>
                    </Column>

                    <Column header="Действия" :exportable="false">
                        <template #body="{ data }">
                            <Button icon="pi pi-download" @click="handleDownload(data.id)" severity="success" text rounded :loading="downloadingReports.includes(data.id)" />
                        </template>
                    </Column>
                </DataTable>
            </div>
        </div>
    </div>
</template>

<script setup>
import ReportService from '@/service/ReportService.js';
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, reactive, ref } from 'vue';

const toast = useToast();

// Реактивные данные
const loading = ref(false);
const reports = ref([]);
const totalElements = ref(0);
const pageSize = ref(20);
const currentPage = ref(0);
const downloadingReports = ref([]);

// Данные формы
const formData = reactive({
    query: '',
    lang: 'ru',
    depth: 1,
    breadth: 2,
    report_type: 'report'
});

// Ошибки валидации
const errors = reactive({
    query: null
});

// Опции
const langOptions = [
    { label: 'Русский', value: 'ru' },
    { label: 'English', value: 'en' }
];

const reportTypeOptions = [
    { label: 'Отчёт', value: 'report' },
    { label: 'Ответ', value: 'answer' }
];

// Вычисляемые свойства
const totalReports = computed(() => totalElements.value);
const thisMonthReports = computed(() => {
    const now = new Date();
    const thisMonth = now.getMonth();
    const thisYear = now.getFullYear();

    return reports.value.filter((report) => {
        const reportDate = new Date(report.createdAt);
        return reportDate.getMonth() === thisMonth && reportDate.getFullYear() === thisYear;
    }).length;
});

// Методы
const validateForm = () => {
    // Очистка предыдущих ошибок
    Object.keys(errors).forEach((key) => (errors[key] = null));

    let isValid = true;

    if (!formData.query.trim()) {
        errors.query = 'Тема исследования обязательна';
        isValid = false;
    }

    return isValid;
};

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

    loading.value = true;

    try {
        // Подготовка данных для API
        const reportData = {
            query: formData.query.trim(),
            lang: formData.lang,
            depth: formData.depth,
            breadth: formData.breadth,
            report_type: formData.report_type
        };

        // Генерируем и скачиваем отчёт (или показываем сообщение)
        const result = await ReportService.generateAndDownloadReport(reportData);

        if (result && result.downloaded) {
            toast.add({
                severity: 'success',
                summary: 'Отчёт сгенерирован',
                detail: 'PDF-файл с отчётом скачан',
                life: 5000
            });
        } else {
            toast.add({
                severity: 'info',
                summary: 'Информация',
                detail: result && result.message ? result.message : 'Запрос выполнен',
                life: 5000
            });
        }

        // Очищаем форму после успешной генерации
        resetForm();
    } catch (error) {
        console.error('Ошибка генерации отчёта:', error);
        toast.add({
            severity: 'error',
            summary: 'Ошибка',
            detail: ReportService.handleError(error),
            life: 5000
        });
    } finally {
        loading.value = false;
    }
};

const loadReports = async (page = 0) => {
    loading.value = true;

    try {
        const data = await ReportService.getReportHistory(page, pageSize.value, 'createdAt,desc');
        reports.value = data.content || [];
        totalElements.value = data.totalElements || 0;
        currentPage.value = page;
    } catch (error) {
        console.error('Ошибка загрузки истории:', error);
        toast.add({
            severity: 'error',
            summary: 'Ошибка',
            detail: ReportService.handleError(error),
            life: 5000
        });
    } finally {
        loading.value = false;
    }
};

const onPageChange = (event) => {
    loadReports(event.page);
};

const handleDownload = async (reportId) => {
    downloadingReports.value.push(reportId);

    try {
        const blob = await ReportService.downloadReport(reportId);

        // Получение имени файла из истории
        const report = reports.value.find((r) => r.id === reportId);
        const filename = report ? report.filename : `report_${reportId}.pdf`;

        ReportService.downloadFile(blob, filename);

        toast.add({
            severity: 'success',
            summary: 'Успешно',
            detail: 'Отчёт скачан',
            life: 3000
        });
    } catch (error) {
        console.error('Ошибка скачивания:', error);
        toast.add({
            severity: 'error',
            summary: 'Ошибка',
            detail: ReportService.handleError(error),
            life: 5000
        });
    } finally {
        downloadingReports.value = downloadingReports.value.filter((id) => id !== reportId);
    }
};

const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('ru-RU');
};

const formatDateTime = (dateString) => {
    return new Date(dateString).toLocaleString('ru-RU');
};

const formatFileSize = (bytes) => {
    return ReportService.formatFileSize(bytes);
};

const resetForm = () => {
    Object.assign(formData, {
        query: '',
        lang: 'ru',
        depth: 3,
        breadth: 5,
        report_type: 'report'
    });

    Object.keys(errors).forEach((key) => (errors[key] = null));
};

// Инициализация
onMounted(() => {
    loadReports();
});
</script>

<style scoped>
.p-fluid .field {
    margin-bottom: 1rem;
}

.card {
    margin-bottom: 1rem;
}

.text-600 {
    color: #6b7280;
}

.font-semibold {
    font-weight: 600;
}
</style>
