{% extends "base.html" %}

{% block title %}Reports - {{ app_name }}{% endblock %}
{% block page_title %}Reports{% endblock %}

{% block content %}
<div class="reports-grid">
    <!-- Daily Report -->
    <div class="report-card">
        <div class="report-header">
            <i class="fas fa-calendar-day"></i>
            <h3>Daily Report</h3>
        </div>
        <div class="report-body">
            <p class="report-summary">{{ daily.summary }}</p>
            <div class="report-metrics">
                <div class="mini-metric">
                    <span class="label">Tasks</span>
                    <span class="value">{{ daily.metrics.total_tasks }}</span>
                </div>
                <div class="mini-metric">
                    <span class="label">Success</span>
                    <span class="value">{{ daily.metrics.success_rate_percent }}%</span>
                </div>
            </div>
        </div>
        <div class="report-footer">
            <a href="/report/daily" class="btn btn-primary">View Report</a>
        </div>
    </div>

    <!-- Weekly Report -->
    <div class="report-card">
        <div class="report-header">
            <i class="fas fa-calendar-week"></i>
            <h3>Weekly Report</h3>
        </div>
        <div class="report-body">
            <p class="report-summary">{{ weekly.summary }}</p>
            <div class="report-metrics">
                <div class="mini-metric">
                    <span class="label">Tasks</span>
                    <span class="value">{{ weekly.metrics.total_tasks }}</span>
                </div>
                <div class="mini-metric">
                    <span class="label">Trend</span>
                    <span class="value">{{ weekly.metrics.trend }}</span>
                </div>
            </div>
        </div>
        <div class="report-footer">
            <a href="/report/weekly" class="btn btn-primary">View Report</a>
        </div>
    </div>

    <!-- Issues Report -->
    <div class="report-card">
        <div class="report-header">
            <i class="fas fa-exclamation-circle"></i>
            <h3>Issues Report</h3>
        </div>
        <div class="report-body">
            <p class="report-summary">{{ issues.summary }}</p>
            <div class="report-metrics">
                <div class="mini-metric">
                    <span class="label">Open</span>
                    <span class="value">{{ issues.metrics.open }}</span>
                </div>
                <div class="mini-metric">
                    <span class="label">Resolved</span>
                    <span class="value">{{ issues.metrics.resolution_rate_percent }}%</span>
                </div>
            </div>
        </div>
        <div class="report-footer">
            <a href="/report/issues" class="btn btn-primary">View Report</a>
        </div>
    </div>

    <!-- Knowledge Report -->
    <div class="report-card">
        <div class="report-header">
            <i class="fas fa-brain"></i>
            <h3>Knowledge Report</h3>
        </div>
        <div class="report-body">
            <p class="report-summary">{{ knowledge.summary }}</p>
            <div class="report-metrics">
                <div class="mini-metric">
                    <span class="label">Nodes</span>
                    <span class="value">{{ knowledge.metrics.total_nodes }}</span>
                </div>
                <div class="mini-metric">
                    <span class="label">Growth</span>
                    <span class="value">{{ knowledge.metrics.growth_rate }}x</span>
                </div>
            </div>
        </div>
        <div class="report-footer">
            <a href="/report/knowledge" class="btn btn-primary">View Report</a>
        </div>
    </div>

    <!-- Self-Improvement Report -->
    <div class="report-card">
        <div class="report-header">
            <i class="fas fa-chart-line"></i>
            <h3>Self-Improvement</h3>
        </div>
        <div class="report-body">
            <p class="report-summary">Track performance improvements over time</p>
            <div class="report-metrics">
                <div class="mini-metric">
                    <span class="label">Trend</span>
                    <span class="value">Analyze</span>
                </div>
            </div>
        </div>
        <div class="report-footer">
            <a href="/report/improvement" class="btn btn-primary">View Report</a>
        </div>
    </div>
</div>

<!-- Generate All Button -->
<div class="panel actions-panel">
    <h3><i class="fas fa-sync"></i> Generate Reports</h3>
    <p>Generate all reports manually or view existing reports in {{ base_dir }}/.journal/reports/</p>
    <div class="actions">
        <button class="btn btn-primary" onclick="generateAllReports()">
            <i class="fas fa-play"></i> Generate All Reports
        </button>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function generateAllReports() {
    fetch('/api/reports/generate', { method: 'POST' })
        .then(response => response.json())
        .then(data => {
            alert('Reports generated successfully!');
            location.reload();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error generating reports. Check console for details.');
        });
}
</script>
{% endblock %}