{% 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">
        <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>
                        </tr>
                    </thead>
                    <tbody>
                        {% for reading in yesterday_reading %}
                        <tr>
                            <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">{{ insight.content }}</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>
                </tr>
            </thead>
            <tbody>
                {% for plan in today_plan %}
                <tr>
                    <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>
{% endblock %}