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

{% block title %}Journey {{ journey.encounter_id }} - PX360{% endblock %}

{% block extra_css %}
<style>
    .journey-header {
        background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
        color: white;
        padding: 30px;
        border-radius: 12px;
        margin-bottom: 30px;
    }
    .progress-circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .progress-circle h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0;
    }
    .progress-circle small {
        font-size: 0.85rem;
        opacity: 0.9;
    }
    
    /* Stage Stepper */
    .stage-stepper {
        position: relative;
        padding: 30px 0;
    }
    .stage-step {
        position: relative;
        padding: 20px;
        margin-bottom: 20px;
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        transition: all 0.3s;
    }
    .stage-step.completed {
        border-color: #4caf50;
        background: #f1f8f4;
    }
    .stage-step.in_progress {
        border-color: #ff9800;
        background: #fff8e1;
    }
    .stage-step.pending {
        border-color: #e0e0e0;
        background: #fafafa;
    }
    .stage-step.skipped {
        border-color: #9e9e9e;
        background: #f5f5f5;
        opacity: 0.7;
    }
    
    .stage-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 15px;
    }
    .stage-step.completed .stage-icon {
        background: #4caf50;
        color: white;
    }
    .stage-step.in_progress .stage-icon {
        background: #ff9800;
        color: white;
    }
    .stage-step.pending .stage-icon {
        background: #e0e0e0;
        color: #666;
    }
    .stage-step.skipped .stage-icon {
        background: #9e9e9e;
        color: white;
    }
    
    .stage-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .stage-meta {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #e0e0e0;
    }
    
    .stage-meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .stage-meta-item i {
        color: #666;
    }
    
    .survey-badge {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 500;
    }
    .survey-completed { background: #e8f5e9; color: #388e3c; }
    .survey-sent { background: #fff3e0; color: #f57c00; }
    .survey-pending { background: #e0e0e0; color: #666; }
    
    .info-label {
        font-weight: 600;
        color: #6c757d;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .info-value {
        font-size: 1rem;
        color: #212529;
        margin-top: 4px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Back Button -->
    <div class="mb-3">
        <a href="{% url 'journeys:instance_list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i> Back to Journeys
        </a>
    </div>

    <!-- Journey Header -->
    <div class="journey-header">
        <div class="row align-items-center">
            <div class="col-md-9">
                <h3 class="mb-2">{{ journey.journey_template.name }}</h3>
                <p class="mb-2">
                    <i class="bi bi-hash me-1"></i>
                    <strong>Encounter ID:</strong> {{ journey.encounter_id }}
                    <span class="mx-2">|</span>
                    <i class="bi bi-person-fill me-1"></i>
                    <strong>Patient:</strong> {{ journey.patient.get_full_name }} (MRN: {{ journey.patient.mrn }})
                </p>
                <p class="mb-0">
                    <i class="bi bi-hospital me-1"></i>
                    <strong>Hospital:</strong> {{ journey.hospital.name_en }}
                    {% if journey.department %}
                    <span class="mx-2">|</span>
                    <i class="bi bi-building me-1"></i>
                    <strong>Department:</strong> {{ journey.department.name_en }}
                    {% endif %}
                </p>
            </div>
            <div class="col-md-3 text-center">
                <div class="progress-circle">
                    <h2>{{ completion_percentage }}%</h2>
                    <small>Complete</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Stage Progress -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-list-check me-2"></i>Stage Progress
                    </h5>
                </div>
                <div class="card-body">
                    <div class="stage-stepper">
                        {% for stage in stages %}
                        <div class="stage-step {{ stage.status }}">
                            <div class="d-flex align-items-start">
                                <div class="stage-icon">
                                    {% if stage.status == 'completed' %}
                                    <i class="bi bi-check-lg"></i>
                                    {% elif stage.status == 'in_progress' %}
                                    <i class="bi bi-hourglass-split"></i>
                                    {% elif stage.status == 'skipped' %}
                                    <i class="bi bi-skip-forward"></i>
                                    {% else %}
                                    {{ forloop.counter }}
                                    {% endif %}
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <div class="stage-title">
                                        {{ stage.stage_template.name }}
                                        <span class="badge bg-secondary ms-2">{{ stage.get_status_display }}</span>
                                    </div>
                                    
                                    {% if stage.stage_template.description %}
                                    <p class="text-muted mb-2">{{ stage.stage_template.description }}</p>
                                    {% endif %}
                                    
                                    <div class="stage-meta">
                                        {% if stage.completed_at %}
                                        <div class="stage-meta-item">
                                            <i class="bi bi-clock"></i>
                                            <small>{{ stage.completed_at|date:"M d, Y H:i" }}</small>
                                        </div>
                                        {% endif %}
                                        
                                        {% if stage.physician %}
                                        <div class="stage-meta-item">
                                            <i class="bi bi-person-badge"></i>
                                            <small>Dr. {{ stage.physician.first_name }} {{ stage.physician.last_name }}</small>
                                        </div>
                                        {% endif %}
                                        
                                        {% if stage.department %}
                                        <div class="stage-meta-item">
                                            <i class="bi bi-building"></i>
                                            <small>{{ stage.department.name_en }}</small>
                                        </div>
                                        {% endif %}
                                        
                                        {% if stage.survey_instance %}
                                        <div class="stage-meta-item">
                                            <i class="bi bi-clipboard-check"></i>
                                            <span class="survey-badge survey-{{ stage.survey_instance.status }}">
                                                Survey: {{ stage.survey_instance.get_status_display }}
                                                {% if stage.survey_instance.total_score %}
                                                ({{ stage.survey_instance.total_score }}/5.0)
                                                {% endif %}
                                            </span>
                                        </div>
                                        {% elif stage.stage_template.survey_template %}
                                        <div class="stage-meta-item">
                                            <i class="bi bi-clipboard"></i>
                                            <span class="survey-badge survey-pending">
                                                Survey: Pending
                                            </span>
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-center py-5">
                            <i class="bi bi-diagram-3" style="font-size: 3rem; color: #ccc;"></i>
                            <p class="text-muted mt-3">No stages defined</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Info -->
        <div class="col-lg-4">
            <!-- Journey Info -->
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>{% trans "Journey Information" %}</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="info-label">Journey Type</div>
                        <div class="info-value">
                            <span class="badge bg-primary">{{ journey.journey_template.get_journey_type_display }}</span>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="info-label">Template</div>
                        <div class="info-value">{{ journey.journey_template.name }}</div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="info-label">Status</div>
                        <div class="info-value">
                            <span class="status-badge status-{{ journey.status }}">
                                {{ journey.get_status_display }}
                            </span>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="info-label">Started</div>
                        <div class="info-value">{{ journey.started_at|date:"M d, Y H:i" }}</div>
                    </div>
                    
                    {% if journey.completed_at %}
                    <div class="mb-0">
                        <div class="info-label">Completed</div>
                        <div class="info-value">{{ journey.completed_at|date:"M d, Y H:i" }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Patient Info -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-person me-2"></i>{% trans "Patient Information" %}</h6>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <strong>Name:</strong><br>
                        {{ journey.patient.get_full_name }}
                    </div>
                    <div class="mb-2">
                        <strong>MRN:</strong><br>
                        {{ journey.patient.mrn }}
                    </div>
                    {% if journey.patient.phone %}
                    <div class="mb-2">
                        <strong>Phone:</strong><br>
                        {{ journey.patient.phone }}
                    </div>
                    {% endif %}
                    {% if journey.patient.email %}
                    <div class="mb-0">
                        <strong>Email:</strong><br>
                        {{ journey.patient.email }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}