<template>
    <div class="grid">
        <div class="col-12">
            <div class="card">
                <div class="flex justify-content-between align-items-center">
                    <div>
                        <h5>История отчётов</h5>
                        <p>Просмотр и скачивание ранее созданных отчётов</p>
                    </div>
                    <div class="flex gap-2">
                        <Button icon="pi pi-refresh" @click="loadReports" :loading="loading" severity="secondary" text v-tooltip.top="'Обновить список'" />
                        <Button label="Создать отчёт" icon="pi pi-plus" @click="goToGenerator" severity="success" />
                    </div>
                </div>
            </div>
        </div>

        <!-- Фильтры -->
        <div class="col-12">
            <div class="card">
                <h6>Фильтры</h6>
                <div class="grid">
                    <div class="col-12 md:col-3">
                        <div class="field">
                            <label for="search">Поиск</label>
                            <InputText id="search" v-model="filters.search" placeholder="Поиск по заголовку, автору или компании" @input="onSearch" />
                        </div>
                    </div>
                    <div class="col-12 md:col-2">
                        <div class="field">
                            <label for="format">Формат</label>
                            <Dropdown id="format" v-model="filters.format" :options="formatOptions" optionLabel="label" optionValue="value" placeholder="Все форматы" @change="applyFilters" />
                        </div>
                    </div>
                    <div class="col-12 md:col-2">
                        <div class="field">
                            <label for="dateFrom">Дата с</label>
                            <Calendar id="dateFrom" v-model="filters.dateFrom" dateFormat="dd.mm.yy" placeholder="Выберите дату" @date-select="applyFilters" />
                        </div>
                    </div>
                    <div class="col-12 md:col-2">
                        <div class="field">
                            <label for="dateTo">Дата по</label>
                            <Calendar id="dateTo" v-model="filters.dateTo" dateFormat="dd.mm.yy" placeholder="Выберите дату" @date-select="applyFilters" />
                        </div>
                    </div>
                    <div class="col-12 md:col-3">
                        <div class="field">
                            <label>&nbsp;</label>
                            <div class="flex gap-2">
                                <Button label="Применить" icon="pi pi-filter" @click="applyFilters" severity="info" />
                                <Button label="Сбросить" icon="pi pi-times" @click="resetFilters" severity="secondary" text />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Статистика -->
        <div class="col-12">
            <div class="grid">
                <div class="col-12 md:col-3">
                    <div class="card 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-12 md:col-3">
                    <div class="card text-center">
                        <div class="text-2xl font-bold text-green-500">{{ thisMonthReports }}</div>
                        <div class="text-sm text-600">За этот месяц</div>
                    </div>
                </div>
                <div class="col-12 md:col-3">
                    <div class="card text-center">
                        <div class="text-2xl font-bold text-orange-500">{{ thisWeekReports }}</div>
                        <div class="text-sm text-600">За эту неделю</div>
                    </div>
                </div>
                <div class="col-12 md:col-3">
                    <div class="card text-center">
                        <div class="text-2xl font-bold text-purple-500">{{ totalSize }}</div>
                        <div class="text-sm text-600">Общий размер</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Таблица отчётов -->
        <div class="col-12">
            <div class="card">
                <DataTable
                    :value="reports"
                    :loading="loading"
                    :paginator="true"
                    :rows="pageSize"
                    :totalRecords="totalElements"
                    :lazy="true"
                    @page="onPageChange"
                    @sort="onSort"
                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                    :rowsPerPageOptions="[10, 20, 50]"
                    currentPageReportTemplate="Показано {first} - {last} из {totalRecords} записей"
                    emptyMessage="Отчёты не найдены"
                    responsiveLayout="scroll"
                    :sortField="sortField"
                    :sortOrder="sortOrder"
                    removableSort
                >
                    <Column field="reportTitle" header="Заголовок" sortable>
                        <template #body="{ data }">
                            <div class="flex flex-column">
                                <div class="font-semibold">{{ data.reportTitle }}</div>
                                <div class="text-sm text-600" v-if="data.description">{{ data.description }}</div>
                            </div>
                        </template>
                    </Column>

                    <Column field="authorName" header="Автор" sortable>
                        <template #body="{ data }">
                            <div class="flex align-items-center gap-2">
                                <i class="pi pi-user text-blue-500"></i>
                                <span>{{ data.authorName }}</span>
                            </div>
                        </template>
                    </Column>

                    <Column field="companyName" header="Компания" sortable>
                        <template #body="{ data }">
                            <div class="flex align-items-center gap-2">
                                <i class="pi pi-building text-green-500"></i>
                                <span>{{ data.companyName }}</span>
                            </div>
                        </template>
                    </Column>

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

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

                    <Column field="fileSize" header="Размер" sortable>
                        <template #body="{ data }">
                            <div class="flex align-items-center gap-2">
                                <i class="pi pi-database text-orange-500"></i>
                                <span>{{ formatFileSize(data.fileSize) }}</span>
                            </div>
                        </template>
                    </Column>

                    <Column field="createdAt" header="Создан" sortable>
                        <template #body="{ data }">
                            <div class="flex flex-column">
                                <div class="text-sm">{{ formatDateTime(data.createdAt) }}</div>
                                <div class="text-xs text-600">{{ getTimeAgo(data.createdAt) }}</div>
                            </div>
                        </template>
                    </Column>

                    <Column header="Действия" :exportable="false" style="min-width: 120px">
                        <template #body="{ data }">
                            <div class="flex gap-1">
                                <Button icon="pi pi-download" @click="handleDownload(data.id)" severity="success" text rounded :loading="downloadingReports.includes(data.id)" v-tooltip.top="'Скачать отчёт'" />
                                <Button icon="pi pi-eye" @click="viewReport(data)" severity="info" text rounded v-tooltip.top="'Просмотреть детали'" />
                                <Button icon="pi pi-trash" @click="confirmDelete(data)" severity="danger" text rounded v-tooltip.top="'Удалить отчёт'" />
                            </div>
                        </template>
                    </Column>
                </DataTable>
            </div>
        </div>
    </div>

    <!-- Диалог просмотра отчёта -->
    <Dialog v-model:visible="showReportDialog" :header="selectedReport?.reportTitle" :modal="true" :style="{ width: '50vw' }" :maximizable="true">
        <div v-if="selectedReport" class="flex flex-column gap-3">
            <div class="grid">
                <div class="col-6"><strong>Автор:</strong> {{ selectedReport.authorName }}</div>
                <div class="col-6"><strong>Компания:</strong> {{ selectedReport.companyName }}</div>
                <div class="col-6"><strong>Период:</strong> {{ formatDate(selectedReport.startDate) }} - {{ formatDate(selectedReport.endDate) }}</div>
                <div class="col-6">
                    <strong>Формат:</strong>
                    <Tag :value="selectedReport.format" :severity="selectedReport.format === 'PDF' ? 'danger' : 'info'" />
                </div>
                <div class="col-6"><strong>Размер:</strong> {{ formatFileSize(selectedReport.fileSize) }}</div>
                <div class="col-6"><strong>Создан:</strong> {{ formatDateTime(selectedReport.createdAt) }}</div>
            </div>
        </div>
        <template #footer>
            <Button label="Скачать" icon="pi pi-download" @click="handleDownload(selectedReport?.id)" severity="success" />
            <Button label="Закрыть" icon="pi pi-times" @click="showReportDialog = false" severity="secondary" text />
        </template>
    </Dialog>

    <!-- Диалог подтверждения удаления -->
    <Dialog v-model:visible="showDeleteDialog" :header="'Удаление отчёта'" :modal="true" :style="{ width: '25vw' }">
        <div class="flex align-items-center gap-3">
            <i class="pi pi-exclamation-triangle text-orange-500 text-2xl"></i>
            <span>Вы уверены, что хотите удалить этот отчёт? Это действие нельзя отменить.</span>
        </div>
        <template #footer>
            <Button label="Отмена" icon="pi pi-times" @click="showDeleteDialog = false" severity="secondary" text />
            <Button label="Удалить" icon="pi pi-trash" @click="handleDelete" severity="danger" />
        </template>
    </Dialog>
</template>

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

const router = useRouter();
const toast = useToast();
const confirm = useConfirm();

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

// Фильтры
const filters = reactive({
    search: '',
    format: null,
    dateFrom: null,
    dateTo: null
});

// Сортировка
const sortField = ref('createdAt');
const sortOrder = ref(-1);

// Опции
const formatOptions = [
    { label: 'Все форматы', value: null },
    { label: 'PDF', value: 'PDF' },
    { label: 'DOCX', value: 'DOCX' }
];

// Вычисляемые свойства
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 thisWeekReports = computed(() => {
    const now = new Date();
    const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);

    return reports.value.filter((report) => {
        const reportDate = new Date(report.createdAt);
        return reportDate >= weekAgo;
    }).length;
});

const totalSize = computed(() => {
    const totalBytes = reports.value.reduce((sum, report) => sum + (report.fileSize || 0), 0);
    return ReportService.formatFileSize(totalBytes);
});

// Методы
const loadReports = async (page = 0) => {
    loading.value = true;

    try {
        const sort = `${sortField.value},${sortOrder.value === 1 ? 'asc' : 'desc'}`;
        const data = await ReportService.getReportHistory(page, pageSize.value, sort);
        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 onSort = (event) => {
    sortField.value = event.sortField;
    sortOrder.value = event.sortOrder;
    loadReports(currentPage.value);
};

const onSearch = () => {
    // Debounce поиска
    clearTimeout(searchTimeout.value);
    searchTimeout.value = setTimeout(() => {
        applyFilters();
    }, 500);
};

const searchTimeout = ref(null);

const applyFilters = () => {
    // Здесь можно добавить логику фильтрации на клиенте
    // или передать параметры на сервер
    loadReports(0);
};

const resetFilters = () => {
    Object.assign(filters, {
        search: '',
        format: null,
        dateFrom: null,
        dateTo: null
    });
    loadReports(0);
};

const goToGenerator = () => {
    router.push('/reports/generator');
};

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 viewReport = (report) => {
    selectedReport.value = report;
    showReportDialog.value = true;
};

const confirmDelete = (report) => {
    reportToDelete.value = report;
    showDeleteDialog.value = true;
};

const handleDelete = async () => {
    // Здесь должна быть логика удаления отчёта
    // Пока что просто закрываем диалог
    showDeleteDialog.value = false;
    toast.add({
        severity: 'info',
        summary: 'Информация',
        detail: 'Функция удаления будет добавлена в следующих версиях',
        life: 3000
    });
};

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 getTimeAgo = (dateString) => {
    const now = new Date();
    const date = new Date(dateString);
    const diffInHours = Math.floor((now - date) / (1000 * 60 * 60));

    if (diffInHours < 1) return 'только что';
    if (diffInHours < 24) return `${diffInHours} ч. назад`;

    const diffInDays = Math.floor(diffInHours / 24);
    if (diffInDays < 7) return `${diffInDays} дн. назад`;

    const diffInWeeks = Math.floor(diffInDays / 7);
    if (diffInWeeks < 4) return `${diffInWeeks} нед. назад`;

    const diffInMonths = Math.floor(diffInDays / 30);
    return `${diffInMonths} мес. назад`;
};

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

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

.card {
    margin-bottom: 1rem;
}

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

.font-semibold {
    font-weight: 600;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.text-center {
    text-align: center;
}
</style>
