{% extends "base.html" %}

{% block title %}Detail Riwayat Deteksi{% endblock %}

{% block content %}
<div class="container-lg mt-5 mb-5">
    {% if prediction %}
    <div class="row">
        <div class="col-lg-8 offset-lg-2">
            <!-- Header -->
            <div class="card border-success mb-4">
                <div class="card-header bg-success text-white">
                    <h4 class="mb-0"><i class="fas fa-search"></i> Detail Riwayat Deteksi</h4>
                </div>
                <div class="card-body">
                    <!-- Basic Info -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">Nama File Asli</h6>
                            <p class="fw-bold">{{ prediction.original_filename or 'N/A' }}</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">Waktu Deteksi</h6>
                            <p class="fw-bold">
                                {% if prediction.timestamp %}
                                    {{ prediction.timestamp[:19] | replace('T', ' ') }}
                                {% else %}
                                    N/A
                                {% endif %}
                            </p>
                        </div>
                    </div>

                    <!-- Image Display -->
                    {% if prediction.image_path %}
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-image"></i> Foto yang Dianalisis</h5>
                        </div>
                        <div class="card-body text-center">
                            {% set image_url = '/uploads/' + prediction.filename %}
                            <img src="{{ image_url }}" alt="Uploaded Image" class="img-fluid rounded" style="max-height: 400px;">
                            <p class="text-muted mt-3 small">Gambar yang digunakan untuk analisis</p>
                        </div>
                    </div>
                    {% endif %}

                    <!-- Prediction Result -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-stethoscope"></i> Hasil Prediksi</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="text-center p-4">
                                        {% if prediction.prediction.lower() == 'sehat' %}
                                            <div class="badge bg-success p-3 mb-3" style="font-size: 1.2rem;">
                                                <i class="fas fa-check-circle"></i> SEHAT
                                            </div>
                                            <h5 class="text-success fw-bold">Kesimpulan: Organ Sehat</h5>
                                        {% else %}
                                            <div class="badge bg-danger p-3 mb-3" style="font-size: 1.2rem;">
                                                <i class="fas fa-exclamation-circle"></i> SAKIT
                                            </div>
                                            <h5 class="text-danger fw-bold">Kesimpulan: PMK Terdeteksi</h5>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="alert alert-info">
                                        <h6 class="text-muted mb-2">Confidence Score</h6>
                                        <div class="progress mb-2" style="height: 25px;">
                                            <div 
                                                class="progress-bar {% if prediction.prediction.lower() == 'sehat' %}bg-success{% else %}bg-danger{% endif %}" 
                                                role="progressbar" 
                                                data-width="{{ prediction.confidence or 0 }}"
                                                aria-valuenow="{{ prediction.confidence or 0 }}" 
                                                aria-valuemin="0" 
                                                aria-valuemax="100">
                                                <strong>{{ prediction.confidence or 0 }}%</strong>
                                            </div>
                                        </div>
                                        <small class="text-muted">Tingkat kepercayaan model terhadap hasil prediksi</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Diagnosis Result (if exists) -->
                    {% if diagnosis %}
                    <div class="card mb-4 border-primary">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0"><i class="fas fa-stethoscope"></i> Hasil Diagnosis Sistem Pakar</h5>
                        </div>
                        <div class="card-body">
                            <!-- Diagnosis Name and Severity -->
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <h6 class="text-muted mb-2">Diagnosis</h6>
                                    <h5 class="fw-bold">
                                        {% set diag_name = diagnosis.diagnosis.nama or 'Tidak diketahui' %}
                                        {{ diag_name }}
                                    </h5>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-muted mb-2">Tingkat Keparahan</h6>
                                    {% if diagnosis.severity == 'ringan' %}
                                    <span class="badge bg-success p-2" style="font-size: 1rem;">{{ diagnosis.severity|upper }}</span>
                                    {% elif diagnosis.severity == 'sedang' %}
                                    <span class="badge bg-warning text-dark p-2" style="font-size: 1rem;">{{ diagnosis.severity|upper }}</span>
                                    {% else %}
                                    <span class="badge bg-danger p-2" style="font-size: 1rem;">{{ diagnosis.severity|upper }}</span>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- Description -->
                            {% if diagnosis.diagnosis.deskripsi %}
                            <div class="mb-4">
                                <h6 class="text-muted mb-2">Deskripsi</h6>
                                <p class="card-text">{{ diagnosis.diagnosis.deskripsi }}</p>
                            </div>
                            {% endif %}

                            <!-- Observed Symptoms -->
                            {% if diagnosis.diagnosis.gejala_teramati %}
                            <div class="mb-4">
                                <h6 class="text-muted mb-3">Gejala yang Teramati</h6>
                                <div class="row">
                                    {% for symptom_code in diagnosis.diagnosis.gejala_teramati %}
                                    <div class="col-md-12 mb-2">
                                        <div class="card bg-light">
                                            <div class="card-body py-2 px-3">
                                                <div class="row align-items-center">
                                                    <div class="col-auto">
                                                        <span class="badge bg-info">{{ symptom_code }}</span>
                                                    </div>
                                                    <div class="col">
                                                        <p class="mb-0">{{ symptom_code|get_symptom_desc }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% endif %}

                            <!-- Recommended Solutions -->
                            {% if diagnosis.diagnosis.solusi %}
                            <div class="mb-4">
                                <h6 class="text-muted mb-2">Solusi dan Rekomendasi</h6>
                                <ul class="list-group list-group-flush">
                                    {% for solution in diagnosis.diagnosis.solusi %}
                                    <li class="list-group-item">
                                        <i class="fas fa-check-circle text-success me-2"></i>{{ solution }}
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% endif %}

                            <!-- Confidence and All Diagnoses -->
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-muted mb-2">Tingkat Keyakinan Diagnosis</h6>
                                    <div class="progress mb-2" style="height: 25px;">
                                        <div class="progress-bar bg-primary" role="progressbar" 
                                             data-width="{{ (diagnosis.confidence or 0) * 100 }}"
                                             aria-valuenow="{{ (diagnosis.confidence or 0) * 100 }}" 
                                             aria-valuemin="0" aria-valuemax="100">
                                            <strong>{{ "%.1f"|format((diagnosis.confidence or 0) * 100) }}%</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-muted mb-2">Waktu Diagnosis</h6>
                                    <p class="fw-bold">
                                        {% if diagnosis.timestamp %}
                                            {{ diagnosis.timestamp[:19] | replace('T', ' ') }}
                                        {% else %}
                                            N/A
                                        {% endif %}
                                    </p>
                                </div>
                            </div>

                            <!-- All Possible Diagnoses (Same Severity Only) -->
                            {% if diagnosis.diagnosis.semua_diagnosis %}
                            {% set same_severity_diagnoses = [] %}
                            {% for alt_diag in diagnosis.diagnosis.semua_diagnosis %}
                                {% if alt_diag.severity == diagnosis.severity %}
                                    {% set _ = same_severity_diagnoses.append(alt_diag) %}
                                {% endif %}
                            {% endfor %}
                            {% if same_severity_diagnoses|length > 0 %}
                            <div class="mt-4">
                                <h6 class="text-muted mb-3">Kemungkinan Diagnosis Lainnya (Tingkat Keparahan: {{ diagnosis.severity|upper }})</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Diagnosis</th>
                                                <th>Skor Cocok</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for alt_diag in same_severity_diagnoses %}
                                            <tr>
                                                <td>{{ alt_diag.nama }}</td>
                                                <td>
                                                    <div class="progress" style="height: 20px;">
                                                        <div class="progress-bar" role="progressbar"
                                                             data-width="{{ (alt_diag.score or 0) * 100 }}"
                                                             aria-valuenow="{{ (alt_diag.score or 0) * 100 }}" 
                                                             aria-valuemin="0" aria-valuemax="100">
                                                            {{ "%.1f"|format((alt_diag.score or 0) * 100) }}%
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {% endif %}
                            {% endif %}
                        </div>
                    </div>
                    {% else %}
                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Belum Ada Diagnosis.</strong> Prediction ini belum didiagnosis oleh sistem pakar.
                        <a href="{{ url_for('expert_system_page') }}" class="alert-link">Lakukan diagnosis sekarang.</a>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    {% endif %}

                    <!-- Actions -->
                    <div class="d-grid gap-2 d-sm-flex justify-content-sm-between mt-4">
                        <a href="{{ url_for('riwayat_deteksi') }}" class="btn btn-secondary btn-lg">
                            <i class="fas fa-arrow-left"></i> Kembali ke Riwayat
                        </a>
                        <a href="{{ url_for('index') }}" class="btn btn-success btn-lg">
                            <i class="fas fa-home"></i> Ke Halaman Beranda
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="alert alert-danger" role="alert">
        <h5 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Data Tidak Ditemukan</h5>
        <p>Maaf, riwayat deteksi dengan ID yang diminta tidak dapat ditemukan.</p>
        <hr>
        <a href="{{ url_for('riwayat_deteksi') }}" class="btn btn-primary">Kembali ke Riwayat Deteksi</a>
    </div>
    {% endif %}
</div>

<style>
    .table-hover tbody tr:hover {
        background-color: rgba(40, 167, 69, 0.1);
    }
    
    code {
        background-color: #f8f9fa;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 0.9rem;
    }
    
    .badge {
        display: inline-block;
    }
</style>
{% endblock %}