{% extends 'base_app.html' %}

{% block content %}

<h2 class="mb-4 fw-bold">📊 Dashboard</h2>

<!-- Top Cards -->
<div class="row mb-4">

    <!-- User -->
    <div class="col-md-4">
        <div class="card shadow-sm border-0 p-4">
            <h6 class="text-muted">User</h6>
            <h4><i class="bi bi-person-circle"></i> {{ user.username }}</h4>
        </div>
    </div>

    <!-- Latest BP -->
    <div class="col-md-4">
        <div class="card shadow-sm border-0 p-4">
            <h6 class="text-muted">Latest BP</h6>
            {% if latest_vitals %}
                <h4>{{ latest_vitals.systolic_bp }}/{{ latest_vitals.diastolic_bp }}</h4>
                <small class="text-muted">mmHg</small>
            {% else %}
                <p>No data</p>
            {% endif %}
        </div>
    </div>

    <!-- Risk Level -->
    <div class="col-md-4">
        <div class="card shadow-sm border-0 p-4">
            <h6 class="text-muted">Risk Level</h6>

            {% if latest_risk %}
                <h4 class="
                    {% if latest_risk.risk_level == 'Low' %}
                        text-success
                    {% elif latest_risk.risk_level == 'Moderate' %}
                        text-warning
                    {% else %}
                        text-danger
                    {% endif %}
                ">
                    {{ latest_risk.risk_level }}
                </h4>
                <small>Score: {{ latest_risk.risk_score }}</small>
            {% else %}
                <p>No data</p>
            {% endif %}
        </div>
    </div>

</div>

<!-- Action Buttons -->
<div class="d-flex flex-wrap gap-2 mb-4">

    <a href="{% url 'health_profile' %}" class="btn btn-outline-danger">
        <i class="bi bi-pencil-square"></i> Profile
    </a>

    <a href="{% url 'add_vitals' %}" class="btn btn-outline-warning">
        <i class="bi bi-heart-pulse"></i> Add Vitals
    </a>

    <a href="{% url 'vitals_history' %}" class="btn btn-outline-info">
        <i class="bi bi-clock-history"></i> History
    </a>

    <a href="{% url 'upload_report' %}" class="btn btn-outline-primary">
        <i class="bi bi-upload"></i> Upload Report
    </a>

    <a href="{% url 'reports_list' %}" class="btn btn-outline-secondary">
        <i class="bi bi-folder"></i> Reports
    </a>

</div>

<!-- Charts Section -->
<div class="card shadow-sm border-0 p-4 mb-4">
    <h5 class="mb-3">📈 Blood Pressure Trends</h5>
    <canvas id="bpChart" height="100"></canvas>
</div>

<div class="card shadow-sm border-0 p-4">
    <h5 class="mb-3">❤️ Heart Rate Trends</h5>
    <canvas id="hrChart" height="100"></canvas>
</div>

<!-- Chart Script -->
<script>
document.addEventListener("DOMContentLoaded", function () {

    const dates = {{ dates|safe }};
    const systolic = {{ systolic|safe }};
    const diastolic = {{ diastolic|safe }};
    const heartRates = {{ heart_rates|safe }};

    // BP Chart
    const bpCtx = document.getElementById('bpChart').getContext('2d');
    new Chart(bpCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [
                {
                    label: 'Systolic BP',
                    data: systolic,
                    borderColor: '#dc3545',
                    backgroundColor: 'transparent',
                    tension: 0.4
                },
                {
                    label: 'Diastolic BP',
                    data: diastolic,
                    borderColor: '#0d6efd',
                    backgroundColor: 'transparent',
                    tension: 0.4
                }
            ]
        }
    });

    // Heart Rate Chart
    const hrCtx = document.getElementById('hrChart').getContext('2d');
    new Chart(hrCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [
                {
                    label: 'Heart Rate',
                    data: heartRates,
                    borderColor: '#198754',
                    backgroundColor: 'transparent',
                    tension: 0.4
                }
            ]
        }
    });

});
</script>

{% endblock %}