{% extends "base.html" %}
{% load static %}

{% block title %}Radiology Report - {{ report.report_id }}{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb float-sm-right">
    <li class="breadcrumb-item"><a href="{% url 'radiology:dashboard' %}">Radiology</a></li>
    <li class="breadcrumb-item"><a href="{% url 'radiology:radiology_report_list' %}">Reports</a></li>
    <li class="breadcrumb-item active">{{ report.report_id }}</li>
</ol>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Report Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-file-medical me-2"></i>
                        Radiology Report
                    </h3>
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-cog"></i> Actions
                        </button>
                        <ul class="dropdown-menu">
                            {% if report.status == 'DRAFT' and perms.radiology.change_radiologyreport %}
                            <li><a class="dropdown-item" href="{% url 'radiology:sign_report' report.pk %}">
                                <i class="fas fa-signature"></i> Sign Report
                            </a></li>
                            {% endif %}
                            <li><a class="dropdown-item" href="#" onclick="window.print()">
                                <i class="fas fa-print"></i> Print Report
                            </a></li>
                            <li><a class="dropdown-item" href="#" onclick="exportReport()">
                                <i class="fas fa-download"></i> Export PDF
                            </a></li>
                            <li><a class="dropdown-item" href="#" onclick="shareReport()">
                                <i class="fas fa-share"></i> Share Report
                            </a></li>
                            {% if report.has_critical_findings %}
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#" onclick="notifyCritical()">
                                <i class="fas fa-exclamation-triangle"></i> Notify Critical Finding
                            </a></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h4>{{ report.study.study_description }}</h4>
                            <p class="text-muted mb-2">
                                <strong>Accession Number:</strong> {{ report.study.accession_number }} | 
                                <strong>Study Date:</strong> {{ report.study.study_datetime|date:"M d, Y g:i A" }}
                            </p>
                            <p class="text-muted">
                                <strong>Patient:</strong> {{ report.study.patient.get_full_name }} ({{ report.study.patient.patient_id }})
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="mb-2">
                                <span class="badge fs-6 {% if report.status == 'SIGNED' %}bg-success{% elif report.status == 'DRAFT' %}bg-warning{% else %}bg-secondary{% endif %}">
                                    {{ report.get_status_display }}
                                </span>
                            </div>
                            {% if report.has_critical_findings %}
                            <div>
                                <span class="badge bg-danger fs-6">
                                    <i class="fas fa-exclamation-triangle"></i> Critical Findings
                                </span>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Report Content -->
        <div class="col-lg-8 mb-4">
            <!-- Clinical History -->
            {% if report.clinical_history %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-history me-2"></i>Clinical History
                    </h5>
                </div>
                <div class="card-body">
                    <p class="mb-0">{{ report.clinical_history|linebreaks }}</p>
                </div>
            </div>
            {% endif %}

            <!-- Technique -->
            {% if report.technique %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-cogs me-2"></i>Technique
                    </h5>
                </div>
                <div class="card-body">
                    <p class="mb-0">{{ report.technique|linebreaks }}</p>
                </div>
            </div>
            {% endif %}

            <!-- Findings -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-search me-2"></i>Findings
                    </h5>
                </div>
                <div class="card-body">
                    {% if report.findings %}
                    <div class="findings-content">
                        {{ report.findings|linebreaks }}
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">No findings documented.</p>
                    {% endif %}
                </div>
            </div>

            <!-- Impression -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-lightbulb me-2"></i>Impression
                    </h5>
                </div>
                <div class="card-body">
                    {% if report.impression %}
                    <div class="impression-content">
                        {{ report.impression|linebreaks }}
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">No impression documented.</p>
                    {% endif %}
                </div>
            </div>

            <!-- Recommendations -->
            {% if report.recommendations %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-clipboard-list me-2"></i>Recommendations
                    </h5>
                </div>
                <div class="card-body">
                    <p class="mb-0">{{ report.recommendations|linebreaks }}</p>
                </div>
            </div>
            {% endif %}

            <!-- Critical Findings -->
            {% if report.critical_findings %}
            <div class="card border-danger mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>Critical Findings
                    </h5>
                </div>
                <div class="card-body">
                    <p class="mb-0">{{ report.critical_findings|linebreaks }}</p>
                    {% if report.critical_notification_sent %}
                    <div class="mt-3">
                        <small class="text-success">
                            <i class="fas fa-check-circle"></i> Critical finding notification sent at {{ report.critical_notification_datetime|date:"M d, Y g:i A" }}
                        </small>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Report Metadata -->
        <div class="col-lg-4">
            <!-- Report Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Report Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-12">
                            <small class="text-muted d-block">Report ID</small>
                            <code class="small">{{ report.report_id }}</code>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Status</small>
                            <span class="badge {% if report.status == 'SIGNED' %}bg-success{% elif report.status == 'DRAFT' %}bg-warning{% else %}bg-secondary{% endif %}">
                                {{ report.get_status_display }}
                            </span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Priority</small>
                            <span class="badge {% if report.study.is_stat %}bg-danger{% else %}bg-primary{% endif %}">
                                {{ report.study.get_priority_display }}
                            </span>
                        </div>
                        <div class="col-12">
                            <small class="text-muted d-block">Created</small>
                            <span>{{ report.created_datetime|date:"M d, Y g:i A" }}</span>
                        </div>
                        {% if report.dictated_datetime %}
                        <div class="col-12">
                            <small class="text-muted d-block">Dictated</small>
                            <span>{{ report.dictated_datetime|date:"M d, Y g:i A" }}</span>
                        </div>
                        {% endif %}
                        {% if report.signed_datetime %}
                        <div class="col-12">
                            <small class="text-muted d-block">Signed</small>
                            <span>{{ report.signed_datetime|date:"M d, Y g:i A" }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Radiologist Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-user-md me-2"></i>Radiologist
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar-circle bg-primary text-white me-3">
                            {{ report.radiologist.first_name.0 }}{{ report.radiologist.last_name.0 }}
                        </div>
                        <div>
                            <h6 class="mb-0">{{ report.radiologist.get_full_name }}</h6>
                            <small class="text-muted">Interpreting Radiologist</small>
                        </div>
                    </div>
                    {% if report.dictated_by and report.dictated_by != report.radiologist %}
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar-circle bg-secondary text-white me-3" style="width: 32px; height: 32px; font-size: 12px;">
                            {{ report.dictated_by.first_name.0 }}{{ report.dictated_by.last_name.0 }}
                        </div>
                        <div>
                            <h6 class="mb-0">{{ report.dictated_by.get_full_name }}</h6>
                            <small class="text-muted">Dictated By</small>
                        </div>
                    </div>
                    {% endif %}
                    {% if report.transcribed_by %}
                    <div class="d-flex align-items-center">
                        <div class="avatar-circle bg-info text-white me-3" style="width: 32px; height: 32px; font-size: 12px;">
                            {{ report.transcribed_by.first_name.0 }}{{ report.transcribed_by.last_name.0 }}
                        </div>
                        <div>
                            <h6 class="mb-0">{{ report.transcribed_by.get_full_name }}</h6>
                            <small class="text-muted">Transcribed By</small>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Study Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-x-ray me-2"></i>Study Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-12">
                            <small class="text-muted d-block">Modality</small>
                            <span>{{ report.study.get_modality_display }}</span>
                        </div>
                        <div class="col-12">
                            <small class="text-muted d-block">Body Part</small>
                            <span>{{ report.study.get_body_part_display }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Series</small>
                            <span>{{ report.study.number_of_series }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Images</small>
                            <span>{{ report.study.number_of_instances }}</span>
                        </div>
                        <div class="col-12">
                            <small class="text-muted d-block">Study Size</small>
                            <span>{{ report.study.study_size|filesizeformat }}</span>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="{% url 'radiology:imaging_study_detail' report.study.pk %}" class="btn btn-outline-primary btn-sm w-100">
                            <i class="fas fa-external-link-alt"></i> View Study Details
                        </a>
                    </div>
                </div>
            </div>

            <!-- Patient Information -->
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-user me-2"></i>Patient Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar-circle bg-secondary text-white me-3">
                            {{ report.study.patient.first_name.0 }}{{ report.study.patient.last_name.0 }}
                        </div>
                        <div>
                            <h6 class="mb-0">{{ report.study.patient.get_full_name }}</h6>
                            <small class="text-muted">{{ report.study.patient.patient_id }}</small>
                        </div>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <small class="text-muted d-block">DOB</small>
                            <span>{{ report.study.patient.date_of_birth|date:"M d, Y" }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Age</small>
                            <span>{{ report.study.patient.age }} years</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Gender</small>
                            <span>{{ report.study.patient.get_gender_display }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">MRN</small>
                            <span>{{ report.study.patient.medical_record_number }}</span>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="{% url 'patients:patient_detail' report.study.patient.pk %}" class="btn btn-outline-secondary btn-sm w-100">
                            <i class="fas fa-external-link-alt"></i> View Patient Profile
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function exportReport() {
    // Implement PDF export functionality
    window.open(`/radiology/reports/{{ report.pk }}/export/pdf/`, '_blank');
}

function shareReport() {
    // Implement report sharing functionality
    alert('Report sharing functionality would be implemented here');
}

function notifyCritical() {
    if (confirm('Send critical finding notification to referring physician?')) {
        fetch(`/radiology/reports/{{ report.pk }}/notify-critical/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Critical finding notification sent successfully');
                location.reload();
            } else {
                alert('Error sending notification: ' + data.error);
            }
        });
    }
}

// Print styles
window.addEventListener('beforeprint', function() {
    document.body.classList.add('printing');
});

window.addEventListener('afterprint', function() {
    document.body.classList.remove('printing');
});
</script>

<style>
@media print {
    .btn, .dropdown, .breadcrumb, .card-header .btn-group {
        display: none !important;
    }
    
    .card {
        border: none !important;
        box-shadow: none !important;
    }
    
    .findings-content, .impression-content {
        font-size: 12pt;
        line-height: 1.4;
    }
}
</style>
{% endblock %}