{% extends 'core/base.html' %}

{% block content %}
<h2>家庭日报报告</h2>

<div class="mb-4">
        <a href="{% url 'generate_pdf_report' today|date:'Y-m-d' %}" class="btn btn-primary" target="_blank">
            <i class="bi bi-file-pdf"></i> 导出PDF报告
        </a>
        <a href="{% url 'send_email' %}" class="btn btn-success">
            <i class="bi bi-envelope"></i> 发送邮件
        </a>
    </div>

<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="card-title mb-0">报告概览</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h6>报告日期：{{ today }}</h6>
                <h6>昨日日期：{{ yesterday }}</h6>
            </div>
            <div class="col-md-6">
                <div class="chart-container" style="height: 200px;">
                    <canvas id="familyTaskChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- 昨日阅读记录 -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="card-title mb-0">昨日阅读记录</h5>
            </div>
            <div class="card-body">
                {% if yesterday_reading %}
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>发言人</th>
                            <th>类型</th>
                            <th>标题</th>
                            <th>来源</th>
                            <th>进度</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for reading in yesterday_reading %}
                        <tr>
                            <td><span class="badge bg-secondary">{{ reading.speaker.name }}</span></td>
                            <td>{{ reading.get_type_display }}</td>
                            <td>{{ reading.title }}</td>
                            <td>{{ reading.source|default:"-" }}</td>
                            <td>{{ reading.progress|default:"-" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p class="text-muted">昨日没有阅读记录</p>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- 昨日感悟记录 -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="card-title mb-0">昨日感悟记录</h5>
            </div>
            <div class="card-body">
                {% if yesterday_insight %}
                <ul class="list-group">
                    {% for insight in yesterday_insight %}
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold text-primary mb-1">{{ insight.speaker.name }}</div>
                            {{ insight.content }}
                        </div>
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p class="text-muted">昨日没有感悟记录</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header bg-warning text-dark">
        <h5 class="card-title mb-0">今日计划</h5>
    </div>
    <div class="card-body">
        {% if today_plan %}
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>发言人</th>
                    <th>类型</th>
                    <th>内容</th>
                    <th>优先级</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                {% for plan in today_plan %}
                <tr>
                    <td><span class="badge bg-secondary">{{ plan.speaker.name }}</span></td>
                    <td>{{ plan.get_type_display }}</td>
                    <td>{{ plan.content }}</td>
                    <td>
                        <span class="badge {% if plan.priority == 'high' %}bg-danger{% elif plan.priority == 'medium' %}bg-warning{% else %}bg-info{% endif %}">
                            {{ plan.get_priority_display }}
                        </span>
                    </td>
                    <td>
                        <span class="badge {% if plan.status == 'completed' %}bg-success{% else %}bg-warning{% endif %}">
                            {{ plan.get_status_display }}
                        </span>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="text-muted">今天还没有计划</p>
        {% endif %}
    </div>
</div>

<script>
    // 家庭事项统计图表
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('familyTaskChart').getContext('2d');
        const familyTaskStats = {% if family_task_stats %}{{ family_task_stats|safe }}{% else %}[]{% endif %};
        
        const labels = familyTaskStats.map(stat => {
            return stat.type === 'purchase' ? '采购' : '家务';
        });
        const data = familyTaskStats.map(stat => stat.count);
        
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: [
                        '#0d6efd',
                        '#198754'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: '家庭事项统计'
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    });
</script>

<div class="card mt-4">
    <div class="card-header bg-info text-white">
        <h5 class="card-title mb-0">历史PDF报告</h5>
    </div>
    <div class="card-body">
        <div class="row">
            {% for date in historical_dates %}
            <div class="col-md-3 mb-2">
                <a href="{% url 'generate_pdf_report' date|date:'Y-m-d' %}" class="btn btn-outline-primary btn-sm btn-block">
                    {{ date }} PDF
                </a>
            </div>
            {% endfor %}
            {% if has_earlier_pdfs %}
            <div class="col-md-3 mb-2">
                <a href="{% url 'pdf_list' %}" class="btn btn-outline-secondary btn-sm btn-block">
                    更早的
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 昨日汇总记录 -->
<div class="card">
    <div class="card-header bg-info text-white">
        <h5 class="card-title mb-0">昨日汇总记录</h5>
    </div>
    <div class="card-body">
        {% if yesterday_summary %}
        <div class="row">
            {% for summary in yesterday_summary %}
            <div class="col-md-6 mb-3">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><span class="badge bg-primary">{{ summary.category.name }}</span></span>
                        <small class="text-muted">{{ summary.speaker.name }}</small>
                    </div>
                    <div class="card-body">
                        <p class="card-text">{{ summary.content }}</p>
                        {% if summary.source %}
                        <small class="text-muted">来源：{{ summary.source }}</small>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-muted">昨日没有汇总记录</p>
        {% endif %}
    </div>
</div>

{% endblock %}