{% extends "base.html" %}

{% block title %}TaskWatch - 报告中心{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">报告中心</h1>
    <p class="mt-1 text-sm text-gray-500">查看日报和周报历史</p>
</div>

<!-- Quick Actions -->
<div class="mb-6 flex gap-4">
    <button onclick="generateDailyReport()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
        手动生成今日日报
    </button>
    <button onclick="generateWeeklyReport()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
        手动生成本周周报
    </button>
</div>

<!-- Daily Reports -->
<div class="bg-white shadow rounded-lg mb-8">
    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
        <h3 class="text-lg font-medium text-gray-900">日报历史</h3>
        <div class="flex gap-2 items-center">
            <input type="date" id="dailyStartDate" class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-1" onchange="loadDailyReports()">
            <span class="text-gray-400">~</span>
            <input type="date" id="dailyEndDate" class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-1" onchange="loadDailyReports()">
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">日期</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">任务总数</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">成功数</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">失败数</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">成功率</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">发送状态</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200" id="dailyReportsTable">
                <tr>
                    <td colspan="7" class="px-6 py-8 text-center text-sm text-gray-500">加载中...</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="px-6 py-3 flex items-center justify-between border-t border-gray-200" id="dailyPaginationArea">
        <div class="text-sm text-gray-500" id="dailyPaginationInfo"></div>
        <div class="flex gap-1" id="dailyPaginationButtons"></div>
    </div>
</div>

<!-- Weekly Reports -->
<div class="bg-white shadow rounded-lg">
    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
        <h3 class="text-lg font-medium text-gray-900">周报历史</h3>
        <div class="flex gap-2 items-center">
            <input type="date" id="weeklyStartDate" class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-1" onchange="loadWeeklyReports()">
            <span class="text-gray-400">~</span>
            <input type="date" id="weeklyEndDate" class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-1" onchange="loadWeeklyReports()">
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">周期</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">任务总数</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">成功率趋势</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">发送状态</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200" id="weeklyReportsTable">
                <tr>
                    <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">加载中...</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="px-6 py-3 flex items-center justify-between border-t border-gray-200" id="weeklyPaginationArea">
        <div class="text-sm text-gray-500" id="weeklyPaginationInfo"></div>
        <div class="flex gap-1" id="weeklyPaginationButtons"></div>
    </div>
</div>

<!-- Report Detail Modal -->
<div id="reportModal" class="fixed inset-0 z-50 hidden">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
            <div class="absolute inset-0 bg-gray-500 opacity-75" onclick="closeReportModal()"></div>
        </div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <h3 class="text-lg font-medium text-gray-900 mb-4">报告详情</h3>
                <div id="reportContent" class="overflow-auto max-h-96"></div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button onclick="closeReportModal()" class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm">
                    关闭
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    let dailyPage = 1;
    const dailyPageSize = 14;
    let weeklyPage = 1;
    const weeklyPageSize = 8;

    function formatDateLocal(date) {
        const y = date.getFullYear();
        const m = String(date.getMonth() + 1).padStart(2, '0');
        const d = String(date.getDate()).padStart(2, '0');
        return `${y}-${m}-${d}`;
    }

    function parseSummary(report) {
        try {
            return typeof report.summary === 'string' ? JSON.parse(report.summary) : (report.summary || {});
        } catch (e) {
            return {};
        }
    }

    function renderSentStatus(sentStatus) {
        if (sentStatus === 'success') return '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已发送</span>';
        if (sentStatus === 'failed') return '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">发送失败</span>';
        return '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">未发送</span>';
    }

    function renderPagination(container, infoEl, buttonsEl, currentPage, pageSize, total, onPageChange) {
        const totalPages = Math.max(1, Math.ceil(total / pageSize));
        const start = (currentPage - 1) * pageSize + 1;
        const end = Math.min(currentPage * pageSize, total);
        infoEl.textContent = total > 0 ? `第 ${start}-${end} 条，共 ${total} 条` : '暂无记录';

        let html = '';
        html += `<button ${currentPage <= 1 ? 'disabled' : ''} class="px-3 py-1 text-sm border rounded-md ${currentPage <= 1 ? 'text-gray-300 cursor-not-allowed' : 'hover:bg-gray-50'}">上一页</button>`;

        const maxVisible = 5;
        let startPage = Math.max(1, currentPage - 2);
        let endPage = Math.min(totalPages, startPage + maxVisible - 1);
        if (endPage - startPage < maxVisible - 1) startPage = Math.max(1, endPage - maxVisible + 1);

        for (let i = startPage; i <= endPage; i++) {
            if (i === currentPage) {
                html += `<button class="px-3 py-1 text-sm border rounded-md bg-indigo-600 text-white">${i}</button>`;
            } else {
                html += `<button data-page="${i}" class="px-3 py-1 text-sm border rounded-md hover:bg-gray-50">${i}</button>`;
            }
        }

        html += `<button ${currentPage >= totalPages ? 'disabled' : ''} class="px-3 py-1 text-sm border rounded-md ${currentPage >= totalPages ? 'text-gray-300 cursor-not-allowed' : 'hover:bg-gray-50'}">下一页</button>`;

        buttonsEl.innerHTML = html;

        buttonsEl.querySelectorAll('button:not([disabled])').forEach(btn => {
            btn.addEventListener('click', () => {
                const text = btn.textContent.trim();
                if (text === '上一页') onPageChange(currentPage - 1);
                else if (text === '下一页') onPageChange(currentPage + 1);
                else if (btn.dataset.page) onPageChange(parseInt(btn.dataset.page));
            });
        });
    }

    async function loadDailyReports() {
        const startDate = document.getElementById('dailyStartDate').value || '';
        const endDate = document.getElementById('dailyEndDate').value || '';
        const offset = (dailyPage - 1) * dailyPageSize;
        let url = `/api/reports/daily?offset=${offset}&limit=${dailyPageSize}`;
        if (startDate) url += `&start_date=${startDate}`;
        if (endDate) url += `&end_date=${endDate}`;

        const data = await apiCall(url);
        if (!data) return;

        const tbody = document.getElementById('dailyReportsTable');
        if (data.reports.length === 0) {
            tbody.innerHTML = '<tr><td colspan="7" class="px-6 py-8 text-center text-sm text-gray-500">暂无日报</td></tr>';
        } else {
            tbody.innerHTML = data.reports.map(report => {
                const summary = parseSummary(report);
                const periodStart = report.period_start ? report.period_start.substring(0, 10) : '-';
                return `<tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${periodStart}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${summary.total || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${summary.success_count || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${summary.fail_count || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${summary.success_rate !== undefined ? summary.success_rate + '%' : '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${renderSentStatus(report.sent_status)}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm space-x-2">
                        <button onclick="viewReport(${report.id})" class="text-indigo-600 hover:text-indigo-900">查看详情</button>
                        <button onclick="resendReport(${report.id})" class="text-green-600 hover:text-green-900">重新发送</button>
                    </td>
                </tr>`;
            }).join('');
        }

        renderPagination(
            'daily', document.getElementById('dailyPaginationInfo'),
            document.getElementById('dailyPaginationButtons'),
            dailyPage, dailyPageSize, data.total,
            (page) => { dailyPage = page; loadDailyReports(); }
        );
    }

    async function loadWeeklyReports() {
        const startDate = document.getElementById('weeklyStartDate').value || '';
        const endDate = document.getElementById('weeklyEndDate').value || '';
        const offset = (weeklyPage - 1) * weeklyPageSize;
        let url = `/api/reports/weekly?offset=${offset}&limit=${weeklyPageSize}`;
        if (startDate) url += `&start_date=${startDate}`;
        if (endDate) url += `&end_date=${endDate}`;

        const data = await apiCall(url);
        if (!data) return;

        const tbody = document.getElementById('weeklyReportsTable');
        if (data.reports.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">暂无周报</td></tr>';
        } else {
            tbody.innerHTML = data.reports.map(report => {
                const summary = parseSummary(report);
                const periodStart = report.period_start ? report.period_start.substring(0, 10) : '-';
                const periodEnd = report.period_end ? report.period_end.substring(0, 10) : '-';
                return `<tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${periodStart} ~ ${periodEnd}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${summary.total || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${summary.success_rate !== undefined ? summary.success_rate + '%' : '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${renderSentStatus(report.sent_status)}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm space-x-2">
                        <button onclick="viewReport(${report.id})" class="text-indigo-600 hover:text-indigo-900">查看详情</button>
                        <button onclick="resendReport(${report.id})" class="text-green-600 hover:text-green-900">重新发送</button>
                    </td>
                </tr>`;
            }).join('');
        }

        renderPagination(
            'weekly', document.getElementById('weeklyPaginationInfo'),
            document.getElementById('weeklyPaginationButtons'),
            weeklyPage, weeklyPageSize, data.total,
            (page) => { weeklyPage = page; loadWeeklyReports(); }
        );
    }

    async function generateDailyReport() {
        const result = await apiCall('/api/reports/daily/generate', 'POST');
        if (result) {
            showToast('日报已生成');
            loadDailyReports();
        }
    }

    async function generateWeeklyReport() {
        const today = new Date();
        const dayOfWeek = today.getDay();
        const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
        const monday = new Date(today);
        monday.setDate(today.getDate() + mondayOffset);
        const sunday = new Date(monday);
        sunday.setDate(monday.getDate() + 6);
        const startDate = formatDateLocal(monday);
        const endDate = formatDateLocal(sunday);
        const result = await apiCall(`/api/reports/weekly/generate?start_date=${startDate}&end_date=${endDate}`, 'POST');
        if (result) {
            showToast('周报已生成');
            loadWeeklyReports();
        }
    }

    async function viewReport(reportId) {
        const res = await fetch(`/api/reports/${reportId}`);
        if (!res.ok) return;
        const report = await res.json().catch(() => null);
        if (!report) {
            showToast('无法加载报告', 'error');
            return;
        }
        document.getElementById('reportContent').innerHTML = report.html_content || '<p>无内容</p>';
        document.getElementById('reportModal').classList.remove('hidden');
    }

    async function resendReport(reportId) {
        const result = await apiCall(`/api/reports/${reportId}/resend`, 'POST');
        if (result) {
            showToast(result.resent ? '报告已重发' : '重发失败', result.resent ? 'success' : 'error');
        }
    }

    function closeReportModal() {
        document.getElementById('reportModal').classList.add('hidden');
    }

    // Initial load
    loadDailyReports();
    loadWeeklyReports();
</script>
{% endblock %}