{% extends "layouts/base.html" %}
{% load i18n static %}

{% block title %}{% trans "HIS Log" %} #{{ log.request_id }} - PX360{% endblock %}

{% block extra_css %}
<style>
.channel-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
}

.channel-email { background: #e3f2fd; color: #1976d2; }
.channel-sms { background: #fff3e0; color: #f57c00; }
.channel-his_event { background: #e8f5e9; color: #388e3c; }

.status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
}

.status-success, .status-sent { background: #d4edda; color: #155724; }
.status-failed { background: #f8d7da; color: #721c24; }
.status-partial { background: #fff3cd; color: #856404; }

.info-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.json-display {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    max-height: 400px;
}

.related-object {
    background: #e7f3ff;
    border-left: 4px solid #2196f3;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 4px;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h2>
                <i class="fas fa-robot"></i> {% trans "HIS Log" %} #{{ log.request_id }}
            </h2>
            <p class="text-muted">{% trans "Request and response details" %}</p>
        </div>
        <div class="col-auto">
            <a href="{% url 'simulator:logs_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {% trans "Back to Logs" %}
            </a>
        </div>
    </div>

    <!-- Basic Information -->
    <div class="info-card">
        <div class="row">
            <div class="col-md-3">
                <strong>{% trans "Channel" %}:</strong>
                <br>
                <span class="channel-badge channel-{{ log.channel }} mt-2">
                    {% if log.channel == 'email' %}📧 {% trans "Email" %}
                    {% elif log.channel == 'sms' %}📱 {% trans "SMS" %}
                    {% else %}🏥 {% trans "HIS Event" %}{% endif %}
                </span>
            </div>
            <div class="col-md-3">
                <strong>{% trans "Status" %}:</strong>
                <br>
                <span class="status-badge status-{{ log.status }} mt-2">
                    {{ log.get_status_display_with_icon }}
                </span>
            </div>
            <div class="col-md-3">
                <strong>{% trans "Timestamp" %}:</strong>
                <br>
                <span class="mt-2 d-block">{{ log.timestamp|date:"Y-m-d H:i:s" }}</span>
            </div>
            <div class="col-md-3">
                <strong>{% trans "Processing Time" %}:</strong>
                <br>
                <span class="mt-2 d-block">
                    {% if log.processing_time_ms %}
                        {{ log.processing_time_ms }}ms
                    {% else %}
                        -
                    {% endif %}
                </span>
            </div>
        </div>

        {% if log.ip_address or log.user_agent %}
        <hr>
        <div class="row">
            {% if log.ip_address %}
            <div class="col-md-6">
                <strong>{% trans "IP Address" %}:</strong>
                <br>
                <code>{{ log.ip_address }}</code>
            </div>
            {% endif %}
            {% if log.user_agent %}
            <div class="col-md-6">
                <strong>{% trans "User Agent" %}:</strong>
                <br>
                <small>{{ log.user_agent|truncatechars:100 }}</small>
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- Related Objects -->
    {% if related_objects %}
    <div class="info-card">
        <h5 class="mb-3"><i class="fas fa-link"></i> {% trans "Related Objects" %}</h5>
        
        {% if related_objects.patient %}
        <div class="related-object">
            <strong><i class="fas fa-user"></i> {% trans "Patient" %}</strong>
            <div class="mt-2">
                <strong>{{ related_objects.patient.name }}</strong><br>
                <small class="text-muted">MRN: {{ related_objects.patient.mrn }}</small><br>
                <small class="text-muted">
                    <i class="fas fa-phone"></i> {{ related_objects.patient.phone }} |
                    <i class="fas fa-envelope"></i> {{ related_objects.patient.email }}
                </small>
            </div>
        </div>
        {% endif %}

        {% if related_objects.journey %}
        <div class="related-object">
            <strong><i class="fas fa-route"></i> {% trans "Journey" %}</strong>
            <div class="mt-2">
                <strong>{{ related_objects.journey.encounter_id }}</strong><br>
                <small class="text-muted">
                    {% trans "Type" %}: {{ related_objects.journey.journey_type }} |
                    {% trans "Status" %}: {{ related_objects.journey.status }}
                </small><br>
                <small class="text-muted">
                    <i class="fas fa-user"></i> {{ related_objects.journey.patient_name }}
                </small>
            </div>
        </div>
        {% endif %}

        {% if related_objects.survey %}
        <div class="related-object">
            <strong><i class="fas fa-clipboard-list"></i> {% trans "Survey" %}</strong>
            <div class="mt-2">
                <strong>ID: {{ related_objects.survey.id }}</strong><br>
                <small class="text-muted">
                    {% trans "Type" %}: {{ related_objects.survey.survey_type }} |
                    {% trans "Status" %}: {{ related_objects.survey.status }}
                </small>
                {% if related_objects.survey.total_score %}
                <br>
                <small class="text-muted">
                    <i class="fas fa-star"></i> {% trans "Score" %}: {{ related_objects.survey.total_score }}
                </small>
                {% endif %}
                <br>
                <small class="text-muted">
                    <i class="fas fa-user"></i> {{ related_objects.survey.patient_name }}
                </small>
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Channel-Specific Details -->
    <div class="info-card">
        <h5 class="mb-3"><i class="fas fa-info-circle"></i> {% trans "Request Details" %}</h5>
        
        {% if log.recipient %}
        <div class="row mb-3">
            <div class="col-md-4">
                <strong>{% trans "Recipient" %}:</strong>
                <br>
                <code>{{ log.recipient }}</code>
            </div>
        </div>
        {% endif %}

        {% if log.subject %}
        <div class="row mb-3">
            <div class="col-md-12">
                <strong>{% trans "Subject" %}:</strong>
                <br>
                {{ log.subject }}
            </div>
        </div>
        {% endif %}

        {% if log.event_type %}
        <div class="row mb-3">
            <div class="col-md-4">
                <strong>{% trans "Event Type" %}:</strong>
                <br>
                <code>{{ log.event_type }}</code>
            </div>
            {% if log.visit_type %}
            <div class="col-md-4">
                <strong>{% trans "Visit Type" %}:</strong>
                <br>
                <span class="badge badge-secondary">{{ log.visit_type|upper }}</span>
            </div>
            {% endif %}
            {% if log.department %}
            <div class="col-md-4">
                <strong>{% trans "Department" %}:</strong>
                <br>
                {{ log.department }}
            </div>
            {% endif %}
        </div>
        {% endif %}

        {% if log.hospital_code %}
        <div class="row mb-3">
            <div class="col-md-4">
                <strong>{% trans "Hospital" %}:</strong>
                <br>
                <span class="badge badge-info">{{ log.hospital_code }}</span>
            </div>
            {% if log.patient_id %}
            <div class="col-md-4">
                <strong>{% trans "Patient MRN" %}:</strong>
                <br>
                <code>{{ log.patient_id }}</code>
            </div>
            {% endif %}
            {% if log.journey_id %}
            <div class="col-md-4">
                <strong>{% trans "Journey ID" %}:</strong>
                <br>
                <code>{{ log.journey_id }}</code>
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- Request Payload -->
    <div class="info-card">
        <h5 class="mb-3">
            <i class="fas fa-file-code"></i> {% trans "Request Payload" %}
            <button class="btn btn-sm btn-outline-secondary float-end" onclick="copyToClipboard('payload-content')">
                <i class="fas fa-copy"></i> {% trans "Copy" %}
            </button>
        </h5>
        <div class="json-display" id="payload-content">{{ payload_formatted }}</div>
    </div>

    <!-- Response Data -->
    {% if response_formatted %}
    <div class="info-card">
        <h5 class="mb-3">
            <i class="fas fa-reply"></i> {% trans "Response Data" %}
            <button class="btn btn-sm btn-outline-secondary float-end" onclick="copyToClipboard('response-content')">
                <i class="fas fa-copy"></i> {% trans "Copy" %}
            </button>
        </h5>
        <div class="json-display" id="response-content">{{ response_formatted }}</div>
    </div>
    {% endif %}

    <!-- Error Message -->
    {% if log.error_message %}
    <div class="info-card" style="border-left: 4px solid #f44336;">
        <h5 class="mb-3 text-danger">
            <i class="fas fa-exclamation-triangle"></i> {% trans "Error Details" %}
        </h5>
        <pre class="text-danger">{{ log.error_message }}</pre>
    </div>
    {% endif %}

    <!-- Message Preview -->
    {% if log.message_preview %}
    <div class="info-card">
        <h5 class="mb-3">
            <i class="fas fa-envelope"></i> {% trans "Message Preview" %}
        </h5>
        <div class="alert alert-info">
            {{ log.message_preview }}
        </div>
    </div>
    {% endif %}
</div>

<script>
function copyToClipboard(elementId) {
    const text = document.getElementById(elementId).textContent;
    navigator.clipboard.writeText(text).then(function() {
        alert('Copied to clipboard!');
    }, function(err) {
        console.error('Failed to copy: ', err);
    });
}
</script>
{% endblock %}