{% 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">
        <h3 class="text-lg font-medium text-gray-900">日报历史</h3>
    </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">
                {% for report in daily_reports %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ report.period_start[:10] }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ report.summary_data.total | default('-') }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ report.summary_data.success_count | default('-') }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ report.summary_data.fail_count | default('-') }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{% if report.summary_data.success_rate is defined %}{{ report.summary_data.success_rate }}%{% else %}-{% endif %}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        {% if report.sent_status == 'success' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已发送</span>
                        {% elif report.sent_status == 'failed' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">发送失败</span>
                        {% else %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">未发送</span>
                        {% endif %}
                    </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>
                {% endfor %}
                {% if not daily_reports %}
                <tr>
                    <td colspan="7" class="px-6 py-8 text-center text-sm text-gray-500">暂无日报</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Weekly Reports -->
<div class="bg-white shadow rounded-lg">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">周报历史</h3>
    </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">
                {% for report in weekly_reports %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ report.period_start[:10] }} ~ {{ report.period_end[:10] }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ report.summary_data.total | default('-') }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{% if report.summary_data.success_rate is defined %}{{ report.summary_data.success_rate }}%{% else %}-{% endif %}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        {% if report.sent_status == 'success' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已发送</span>
                        {% elif report.sent_status == 'failed' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">发送失败</span>
                        {% else %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">未发送</span>
                        {% endif %}
                    </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>
                {% endfor %}
                {% if not weekly_reports %}
                <tr>
                    <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">暂无周报</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </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>
    async function generateDailyReport() {
        const result = await apiCall('/api/reports/daily/generate', 'POST');
        if (result) {
            showToast('日报已生成');
            setTimeout(() => location.reload(), 1000);
        }
    }

    async function generateWeeklyReport() {
        const result = await apiCall('/api/reports/weekly/generate', 'POST');
        if (result) {
            showToast('周报已生成');
            setTimeout(() => location.reload(), 1000);
        }
    }

    async function viewReport(reportId) {
        const res = await fetch(`/api/reports/${reportId}`);
        if (!res.ok) return;
        // We need to get the report from the list API since there's no single report endpoint
        // Let's fetch from the page data
        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');
    }
</script>
{% endblock %}