{% extends "cadhub/base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{% url 'cadhub:project-list' %}">Projekte</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{% url 'cadhub:model-detail' model.pk %}">{{ model.name }}</a>
                    </li>
                    <li class="breadcrumb-item active">Brandschutz</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <h5 class="card-title">Brandabschnitte</h5>
                    <p class="display-6">{{ stats.compliant_compartments }}/{{ stats.compartments }}</p>
                    <small>konform</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white {% if stats.compliant_elements == stats.rated_elements %}bg-success{% else %}bg-warning{% endif %}">
                <div class="card-body">
                    <h5 class="card-title">Brandschutz-Elemente</h5>
                    <p class="display-6">{{ stats.compliant_elements }}/{{ stats.rated_elements }}</p>
                    <small>konform</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white {% if stats.compliant_routes == stats.escape_routes %}bg-success{% else %}bg-danger{% endif %}">
                <div class="card-body">
                    <h5 class="card-title">Fluchtwege</h5>
                    <p class="display-6">{{ stats.compliant_routes }}/{{ stats.escape_routes }}</p>
                    <small>konform</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card {% if violations %}text-white bg-danger{% else %}text-white bg-success{% endif %}">
                <div class="card-body">
                    <h5 class="card-title">Verstöße</h5>
                    <p class="display-6">{{ violations|length }}</p>
                    <small>{% if violations %}Handlungsbedarf{% else %}Alles OK{% endif %}</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-shield-exclamation"></i> Verstöße & Warnungen</span>
                    <span class="badge bg-danger">{{ violations|length }}</span>
                </div>
                <div class="card-body">
                    {% if violations %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Typ</th>
                                    <th>Element</th>
                                    <th>Problem</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for v in violations %}
                                <tr>
                                    <td>
                                        {% if v.type == "element" %}
                                        <span class="badge bg-warning">Element</span>
                                        {% else %}
                                        <span class="badge bg-danger">Fluchtweg</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ v.name }}</td>
                                    <td>{{ v.issue }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="alert alert-success mb-0">
                        <i class="bi bi-check-circle"></i>
                        Keine Verstöße gefunden. Alle Brandschutzanforderungen sind erfüllt.
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" data-bs-toggle="tab" 
                                    data-bs-target="#compartments" type="button">
                                Brandabschnitte
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" 
                                    data-bs-target="#elements" type="button">
                                Elemente
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" 
                                    data-bs-target="#routes" type="button">
                                Fluchtwege
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="compartments">
                            <div hx-get="{% url 'cadhub:fire-compartment-list' model.pk %}"
                                 hx-trigger="load"
                                 hx-swap="innerHTML">
                                <div class="text-center p-3">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Lädt...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="elements">
                            <div hx-get="{% url 'cadhub:fire-element-list' model.pk %}"
                                 hx-trigger="revealed"
                                 hx-swap="innerHTML">
                                <div class="text-center p-3">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Lädt...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="routes">
                            <div hx-get="{% url 'cadhub:escape-route-list' model.pk %}"
                                 hx-trigger="revealed"
                                 hx-swap="innerHTML">
                                <div class="text-center p-3">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Lädt...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-layers"></i> Etagen
                </div>
                <div class="list-group list-group-flush">
                    {% for floor in floors %}
                    <a href="{% url 'cadhub:floorplan-viewer' model.pk %}?floor={{ floor.pk }}"
                       class="list-group-item list-group-item-action">
                        {{ floor.name|default:floor.code }}
                        {% if floor.elevation_m %}
                        <small class="text-muted">({{ floor.elevation_m }}m)</small>
                        {% endif %}
                    </a>
                    {% empty %}
                    <div class="list-group-item text-muted">Keine Etagen</div>
                    {% endfor %}
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <i class="bi bi-download"></i> Export
                </div>
                <div class="card-body">
                    <a href="#" class="btn btn-outline-primary btn-sm w-100 mb-2 disabled"
                       title="PDF-Report (in Entwicklung)">
                        <i class="bi bi-file-pdf"></i> Brandschutz-Report (PDF)
                    </a>
                    <a href="{% url 'cadhub:fire-safety-api' model.pk %}"
                       class="btn btn-outline-secondary btn-sm w-100"
                       title="JSON-Daten herunterladen">
                        <i class="bi bi-filetype-json"></i> JSON-Export
                    </a>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <i class="bi bi-info-circle"></i> Legende
                </div>
                <div class="card-body small">
                    <p><strong>Brandabschnitt:</strong> Bereich mit max. 1600m² (ohne Sprinkler)</p>
                    <p><strong>F30/F60/F90:</strong> Feuerwiderstand in Minuten (DIN 4102)</p>
                    <p><strong>REI:</strong> Tragfähigkeit/Raumabschluss/Dämmung (EN 13501)</p>
                    <p class="mb-0"><strong>Fluchtweg:</strong> Max. 35m bis zum Ausgang (Standard)</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}