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

{% block title %}{{ observation.tracking_code }} - {% trans "Observation Detail" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    .detail-card {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .tracking-code {
        font-family: 'Courier New', monospace;
        font-size: 1.5rem;
        font-weight: 700;
        color: #667eea;
    }
    .status-badge {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
    }
    .status-new { background: #e3f2fd; color: #1976d2; }
    .status-triaged { background: #e0f7fa; color: #00838f; }
    .status-assigned { background: #e0f7fa; color: #00838f; }
    .status-in_progress { background: #fff3e0; color: #f57c00; }
    .status-resolved { background: #e8f5e9; color: #388e3c; }
    .status-closed { background: #f5f5f5; color: #616161; }
    .status-rejected { background: #ffebee; color: #d32f2f; }
    .status-duplicate { background: #f5f5f5; color: #616161; }
    
    .severity-badge {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
    }
    .severity-low { background: #e8f5e9; color: #388e3c; }
    .severity-medium { background: #fff3e0; color: #f57c00; }
    .severity-high { background: #ffebee; color: #d32f2f; }
    .severity-critical { background: #880e4f; color: #fff; }
    
    .anonymous-indicator {
        background: #e9ecef;
        color: #6c757d;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-style: italic;
    }
    
    .timeline {
        position: relative;
        padding-left: 30px;
    }
    .timeline::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #dee2e6;
    }
    .timeline-item {
        position: relative;
        padding-bottom: 20px;
    }
    .timeline-item:last-child {
        padding-bottom: 0;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -24px;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #667eea;
        border: 2px solid white;
    }
    .timeline-item.note::before {
        background: #17a2b8;
    }
    .timeline-item.status::before {
        background: #28a745;
    }
    
    .info-row {
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .info-row:last-child {
        border-bottom: none;
    }
    .info-label {
        color: #6c757d;
        font-size: 0.85rem;
    }
    
    .attachment-item {
        display: flex;
        align-items: center;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 8px;
    }
    .attachment-item i {
        font-size: 1.5rem;
        margin-right: 12px;
        color: #667eea;
    }
    
    .action-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 20px;
    }
    .action-card .btn {
        background: white;
        color: #667eea;
        border: none;
    }
    .action-card .btn:hover {
        background: #f8f9fa;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'observations:observation_list' %}">{% trans "Observations" %}</a></li>
            <li class="breadcrumb-item active">{{ observation.tracking_code }}</li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <div class="d-flex align-items-center gap-3 mb-2">
                <span class="tracking-code">{{ observation.tracking_code }}</span>
                <span class="status-badge status-{{ observation.status }}">
                    {{ observation.get_status_display }}
                </span>
                <span class="severity-badge severity-{{ observation.severity }}">
                    {{ observation.get_severity_display }}
                </span>
                {% if observation.is_anonymous %}
                <span class="anonymous-indicator">
                    <i class="bi bi-incognito me-1"></i>{% trans "Anonymous" %}
                </span>
                {% endif %}
            </div>
            <h4 class="mb-0">
                {% if observation.title %}
                {{ observation.title }}
                {% else %}
                {{ observation.description|truncatewords:10 }}
                {% endif %}
            </h4>
        </div>
        <div class="d-flex gap-2">
            {% if can_convert and not observation.action_id %}
            <a href="{% url 'observations:observation_convert_to_action' observation.id %}" 
               class="btn btn-success">
                <i class="bi bi-arrow-right-circle me-1"></i>{% trans "Convert to Action" %}
            </a>
            {% endif %}
            <a href="{% url 'observations:observation_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>{% trans "Back to List" %}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Description Card -->
            <div class="card detail-card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-card-text me-2"></i>{% trans "Description" %}</h5>
                </div>
                <div class="card-body">
                    <p class="mb-0" style="white-space: pre-wrap;">{{ observation.description }}</p>
                </div>
            </div>

            <!-- Details Card -->
            <div class="card detail-card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>{% trans "Details" %}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-row">
                                <div class="info-label">{% trans "Category" %}</div>
                                <div>{{ observation.category.name_en|default:"Not specified" }}</div>
                            </div>
                            <div class="info-row">
                                <div class="info-label">{% trans "Location" %}</div>
                                <div>{{ observation.location_text|default:"Not specified" }}</div>
                            </div>
                            <div class="info-row">
                                <div class="info-label">{% trans "Incident Date/Time" %}</div>
                                <div>{{ observation.incident_datetime|date:"M d, Y H:i" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-row">
                                <div class="info-label">{% trans "Submitted" %}</div>
                                <div>{{ observation.created_at|date:"M d, Y H:i" }}</div>
                            </div>
                            <div class="info-row">
                                <div class="info-label">{% trans "Last Updated" %}</div>
                                <div>{{ observation.updated_at|date:"M d, Y H:i" }}</div>
                            </div>
                            {% if observation.triaged_at %}
                            <div class="info-row">
                                <div class="info-label">{% trans "Triaged" %}</div>
                                <div>{{ observation.triaged_at|date:"M d, Y H:i" }} 
                                    {% if observation.triaged_by %}by {{ observation.triaged_by.get_full_name }}{% endif %}
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Reporter Information -->
            <div class="card detail-card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-person me-2"></i>{% trans "Reporter Information" %}</h5>
                </div>
                <div class="card-body">
                    {% if observation.is_anonymous %}
                    <div class="text-center py-3">
                        <i class="bi bi-incognito" style="font-size: 2rem; color: #6c757d;"></i>
                        <p class="text-muted mt-2 mb-0">{% trans "This observation was submitted anonymously" %}</p>
                    </div>
                    {% else %}
                    <div class="row">
                        <div class="col-md-6">
                            {% if observation.reporter_staff_id %}
                            <div class="info-row">
                                <div class="info-label">{% trans "Staff ID" %}</div>
                                <div>{{ observation.reporter_staff_id }}</div>
                            </div>
                            {% endif %}
                            {% if observation.reporter_name %}
                            <div class="info-row">
                                <div class="info-label">{% trans "Name" %}</div>
                                <div>{{ observation.reporter_name }}</div>
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            {% if observation.reporter_phone %}
                            <div class="info-row">
                                <div class="info-label">{% trans "Phone" %}</div>
                                <div>{{ observation.reporter_phone }}</div>
                            </div>
                            {% endif %}
                            {% if observation.reporter_email %}
                            <div class="info-row">
                                <div class="info-label">{% trans "Email" %}</div>
                                <div>{{ observation.reporter_email }}</div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Attachments -->
            {% if attachments %}
            <div class="card detail-card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-paperclip me-2"></i>{% trans "Attachments" %} ({{ attachments.count }})</h5>
                </div>
                <div class="card-body">
                    {% for attachment in attachments %}
                    <div class="attachment-item">
                        <i class="bi bi-file-earmark"></i>
                        <div class="flex-grow-1">
                            <div>{{ attachment.filename }}</div>
                            <small class="text-muted">{{ attachment.file_type }} - {{ attachment.file_size|filesizeformat }}</small>
                        </div>
                        <a href="{{ attachment.file.url }}" class="btn btn-sm btn-outline-primary" target="_blank">
                            <i class="bi bi-download"></i>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Timeline -->
            <div class="card detail-card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>{% trans "Timeline" %}</h5>
                </div>
                <div class="card-body">
                    {% if timeline %}
                    <div class="timeline">
                        {% for item in timeline %}
                        <div class="timeline-item {{ item.type }}">
                            <div class="d-flex justify-content-between">
                                <div>
                                    {% if item.type == 'status_change' %}
                                    <strong>{% trans "Status Changed" %}</strong>
                                    <span class="text-muted">
                                        {% if item.item.from_status %}
                                        {{ item.item.from_status }} → 
                                        {% endif %}
                                        {{ item.item.to_status }}
                                    </span>
                                    {% if item.item.changed_by %}
                                    <small class="text-muted d-block">by {{ item.item.changed_by.get_full_name }}</small>
                                    {% endif %}
                                    {% if item.item.comment %}
                                    <p class="mb-0 mt-1 small">{{ item.item.comment }}</p>
                                    {% endif %}
                                    {% elif item.type == 'note' %}
                                    <strong>{% trans "Note Added" %}</strong>
                                    {% if item.item.created_by %}
                                    <small class="text-muted d-block">by {{ item.item.created_by.get_full_name }}</small>
                                    {% endif %}
                                    <p class="mb-0 mt-1">{{ item.item.note }}</p>
                                    {% endif %}
                                </div>
                                <small class="text-muted">{{ item.created_at|date:"M d, H:i" }}</small>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted text-center mb-0">{% trans "No timeline entries yet" %}</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Assignment Card -->
            <div class="card detail-card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-people me-2"></i>{% trans "Assignment" %}</h5>
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <div class="info-label">{% trans "Department" %}</div>
                        <div>{{ observation.assigned_department.name|default:"Not assigned" }}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">{% trans "Assigned To" %}</div>
                        <div>{{ observation.assigned_to.get_full_name|default:"Not assigned" }}</div>
                    </div>
                </div>
            </div>

            <!-- Linked Action -->
            {% if px_action %}
            <div class="action-card mb-4">
                <h6 class="mb-3"><i class="bi bi-link-45deg me-2"></i>{% trans "Linked PX Action" %}</h6>
                <p class="small mb-2">{{ px_action.title|truncatewords:10 }}</p>
                <a href="{% url 'actions:action_detail' px_action.id %}" class="btn btn-sm">
                    <i class="bi bi-arrow-right me-1"></i>{% trans "View Action" %}
                </a>
            </div>
            {% endif %}

            <!-- Triage Form -->
            {% if can_triage %}
            <div class="card detail-card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-sliders me-2"></i>{% trans "Triage" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'observations:observation_triage' observation.id %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label">{% trans "Department" %}</label>
                            {{ triage_form.assigned_department }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{% trans "Assign To" %}</label>
                            {{ triage_form.assigned_to }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{% trans "Status" %}</label>
                            {{ triage_form.status }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{% trans "Note" %}</label>
                            {{ triage_form.note }}
                        </div>
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-check-circle me-1"></i>{% trans "Update" %}
                        </button>
                    </form>
                </div>
            </div>
            {% endif %}

            <!-- Add Note Form -->
            <div class="card detail-card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-chat-left-text me-2"></i>{% trans "Add Note" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'observations:observation_add_note' observation.id %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            {{ note_form.note }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ note_form.is_internal }}
                            <label class="form-check-label" for="id_is_internal">{% trans "Internal note (not visible to public)" %}</label>
                        </div>
                        <button type="submit" class="btn btn-outline-primary w-100">
                            <i class="bi bi-plus-circle me-1"></i>{% trans "Add Note" %}
                        </button>
                    </form>
                </div>
            </div>

            <!-- Quick Status Change -->
            <div class="card detail-card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-arrow-repeat me-2"></i>{% trans "Quick Status Change" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'observations:observation_change_status' observation.id %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            {{ status_form.status }}
                        </div>
                        <div class="mb-3">
                            {{ status_form.comment }}
                        </div>
                        <button type="submit" class="btn btn-outline-secondary w-100">
                            <i class="bi bi-check me-1"></i>{% trans "Change Status" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}