{% extends "base.html" %}

{% block title %}Report Preview - Report Generator{% endblock %}

{% block content %}
<div class="px-4 py-6 sm:px-0">
    {% if not session.get('report_path') %}
    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
        <p class="text-yellow-800">No report found. Please <a href="/" class="underline">upload files</a> first.</p>
    </div>
    {% else %}
    
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-900">Generated Report Preview</h2>
                <div class="flex space-x-3">
                    <a href="/edit" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Edit Metrics
                    </a>
                    <a href="/download-report/{{ session.report_path.split('/')[-1] }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                        Download PDF
                    </a>
                </div>
            </div>

            <!-- Patient Information -->
            <div class="border-b border-gray-200 pb-6 mb-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Patient Information</h3>
                <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
                    <div>
                        <p class="text-sm text-gray-500">Name</p>
                        <p class="text-base font-medium text-gray-900">{{ session.patient_info['patient_name'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Age</p>
                        <p class="text-base font-medium text-gray-900">{{ session.patient_info['age'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Height</p>
                        <p class="text-base font-medium text-gray-900">{{ session.patient_info['height'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Weight</p>
                        <p class="text-base font-medium text-gray-900">{{ session.patient_info['weight'] }}</p>
                    </div>
                </div>
            </div>

            <!-- Calculated Metrics -->
            {% if session.metrics %}
            <div class="space-y-6">
                <!-- Pnoe Metrics -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Pnoe Metrics</h3>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        {% if session.metrics.pnoe.get('vo2_max') %}
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">VO2 Max</p>
                            <p class="text-2xl font-bold text-gray-900">{{ "%.2f"|format(session.metrics.pnoe['vo2_max']) }} ml/min</p>
                        </div>
                        {% endif %}
                        {% if session.metrics.pnoe.get('vo2_max_per_kg') %}
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">VO2 Max per kg</p>
                            <p class="text-2xl font-bold text-gray-900">{{ "%.2f"|format(session.metrics.pnoe['vo2_max_per_kg']) }} ml/min/kg</p>
                        </div>
                        {% endif %}
                        {% if session.metrics.pnoe.get('peak_vt') %}
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">Peak VT</p>
                            <p class="text-2xl font-bold text-gray-900">{{ "%.2f"|format(session.metrics.pnoe['peak_vt']) }} L</p>
                            <p class="text-sm text-gray-500 mt-1">HR: {{ "%.0f"|format(session.metrics.pnoe['peak_vt_hr']) }} bpm</p>
                        </div>
                        {% endif %}
                        {% if session.metrics.pnoe.get('fat_max_value') %}
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">Fat Max Value</p>
                            <p class="text-2xl font-bold text-gray-900">{{ "%.2f"|format(session.metrics.pnoe['fat_max_value']) }} kcal/min</p>
                            <p class="text-sm text-gray-500 mt-1">HR: {{ "%.0f"|format(session.metrics.pnoe['fat_max_hr']) }} bpm</p>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- VT1 and VT2 -->
                {% if session.metrics.pnoe.get('vt1') or session.metrics.pnoe.get('vt2') %}
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Ventilatory Thresholds</h3>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        {% if session.metrics.pnoe.get('vt1') %}
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm font-medium text-blue-900 mb-2">VT1</p>
                            <p class="text-sm text-blue-700">Heart Rate: {{ "%.0f"|format(session.metrics.pnoe['vt1']['HeartRate']) }} bpm</p>
                            <p class="text-sm text-blue-700">Speed: {{ "%.2f"|format(session.metrics.pnoe['vt1']['Speed']) }} mph</p>
                            <p class="text-sm text-blue-700">Time: {{ "%.0f"|format(session.metrics.pnoe['vt1']['Time']) }} sec</p>
                        </div>
                        {% endif %}
                        {% if session.metrics.pnoe.get('vt2') %}
                        <div class="bg-green-50 p-4 rounded-lg">
                            <p class="text-sm font-medium text-green-900 mb-2">VT2</p>
                            <p class="text-sm text-green-700">Heart Rate: {{ "%.0f"|format(session.metrics.pnoe['vt2']['HeartRate']) }} bpm</p>
                            <p class="text-sm text-green-700">Speed: {{ "%.2f"|format(session.metrics.pnoe['vt2']['Speed']) }} mph</p>
                            <p class="text-sm text-green-700">Time: {{ "%.0f"|format(session.metrics.pnoe['vt2']['Time']) }} sec</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Heart Rate Zones -->
                {% if session.metrics.pnoe.get('zone1_bpm') %}
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Heart Rate Zones</h3>
                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-5">
                        {% for i in range(1, 6) %}
                        {% set zone_key = "zone" + i|string + "_bpm" %}
                        {% if session.metrics.pnoe.get(zone_key) %}
                        <div class="bg-gray-50 p-3 rounded-lg text-center">
                            <p class="text-xs text-gray-500">Zone {{ i }}</p>
                            <p class="text-sm font-medium text-gray-900">{{ session.metrics.pnoe[zone_key] }}</p>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Spirometry Metrics -->
                {% if session.metrics.spirometry %}
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Spirometry Metrics</h3>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                        {% if session.metrics.spirometry.get('fvc_best') %}
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">FVC Best</p>
                            <p class="text-2xl font-bold text-gray-900">{{ "%.2f"|format(session.metrics.spirometry['fvc_best']) }} L</p>
                            <p class="text-sm text-gray-500 mt-1">{{ "%.1f"|format(session.metrics.spirometry['fvc_pred']) }}% predicted</p>
                        </div>
                        {% endif %}
                        {% if session.metrics.spirometry.get('fev1_best') %}
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">FEV1 Best</p>
                            <p class="text-2xl font-bold text-gray-900">{{ "%.2f"|format(session.metrics.spirometry['fev1_best']) }} L</p>
                            <p class="text-sm text-gray-500 mt-1">{{ "%.1f"|format(session.metrics.spirometry['fev1_pred']) }}% predicted</p>
                        </div>
                        {% endif %}
                        {% if session.metrics.spirometry.get('fev1_fvc_pct_best') %}
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">FEV1/FVC%</p>
                            <p class="text-2xl font-bold text-gray-900">{{ "%.2f"|format(session.metrics.spirometry['fev1_fvc_pct_best']) }}%</p>
                            <p class="text-sm text-gray-500 mt-1">{{ "%.1f"|format(session.metrics.spirometry['fev1_fvc_pct_pred']) }}% predicted</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Graphs Section -->
            {% if session.graphs_generated %}
            <div class="mt-8">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Generated Graphs</h3>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    {% for graph in session.graphs_generated %}
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <p class="text-sm font-medium text-gray-700 mb-2">{{ graph.name|replace('_', ' ')|title }}</p>
                        <img src="/graphs/{{ graph.path.split('/')[-1] }}" alt="{{ graph.name }}" class="w-full h-auto rounded">
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}