{% extends "base.html" %}

{% block title %}Matrice di Harris - {{ site_name }}{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-project-diagram"></i> Matrice di Harris - {{ site_name }}</h2>
        <div>
            <a href="{{ url_for('harris_matrix', site_name=site_name) }}" class="btn btn-secondary">
                <i class="fas fa-chart-bar"></i> Matplotlib
            </a>
            <a href="{{ url_for('sites_list') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Indietro
            </a>
        </div>
    </div>

    <!-- Grouping Options -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-cogs"></i> Opzioni Visualizzazione</h5>
        </div>
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <label class="form-label fw-bold">Raggruppamento:</label>
                    <div class="btn-group" role="group">
                        <a href="{{ url_for('harris_matrix_graphviz', site_name=site_name, grouping='period_area') }}"
                           class="btn btn-sm {{ 'btn-primary' if grouping == 'period_area' else 'btn-outline-primary' }}">
                            <i class="fas fa-th"></i> Periodo + Area
                        </a>
                        <a href="{{ url_for('harris_matrix_graphviz', site_name=site_name, grouping='period') }}"
                           class="btn btn-sm {{ 'btn-primary' if grouping == 'period' else 'btn-outline-primary' }}">
                            <i class="fas fa-calendar"></i> Solo Periodo
                        </a>
                        <a href="{{ url_for('harris_matrix_graphviz', site_name=site_name, grouping='area') }}"
                           class="btn btn-sm {{ 'btn-primary' if grouping == 'area' else 'btn-outline-primary' }}">
                            <i class="fas fa-map"></i> Solo Area
                        </a>
                        <a href="{{ url_for('harris_matrix_graphviz', site_name=site_name, grouping='none') }}"
                           class="btn btn-sm {{ 'btn-primary' if grouping == 'none' else 'btn-outline-primary' }}">
                            <i class="fas fa-ban"></i> Nessuno
                        </a>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <span class="badge bg-success"><i class="fas fa-check-circle"></i> Graphviz (Desktop GUI Style)</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Matrix Statistics -->
    {% if stats %}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="display-6">{{ stats.total_us }}</h5>
                    <p class="text-muted mb-0">Unità Stratigrafiche</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="display-6">{{ stats.total_relationships }}</h5>
                    <p class="text-muted mb-0">Relazioni</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="display-6">{{ stats.levels }}</h5>
                    <p class="text-muted mb-0">Livelli</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card {% if stats.is_valid %}bg-success{% else %}bg-warning{% endif %} text-white">
                <div class="card-body text-center">
                    <h5 class="display-6">
                        {% if stats.is_valid %}
                            <i class="fas fa-check-circle"></i>
                        {% else %}
                            <i class="fas fa-exclamation-triangle"></i>
                        {% endif %}
                    </h5>
                    <p class="mb-0">
                        {% if stats.is_valid %}
                            DAG Valido
                        {% else %}
                            Cicli Rilevati
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Matrix Visualization -->
    <div class="card">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0">
                <i class="fas fa-project-diagram"></i> Visualizzazione Graphviz
                <small class="float-end">
                    <i class="fas fa-info-circle"></i> Layout ortogonale con grouping {{ grouping }}
                </small>
            </h5>
        </div>
        <div class="card-body text-center bg-light">
            {% if matrix_image %}
            <div class="matrix-container" style="overflow: auto; max-height: 800px;">
                <img src="data:image/png;base64,{{ matrix_image }}"
                     class="img-fluid"
                     alt="Matrice di Harris Graphviz"
                     style="max-width: 100%; height: auto;">
            </div>
            <div class="mt-3">
                <a href="data:image/png;base64,{{ matrix_image }}"
                   download="harris_matrix_{{ site_name }}_graphviz.png"
                   class="btn btn-primary">
                    <i class="fas fa-download"></i> Download Immagine PNG
                </a>
            </div>
            {% else %}
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-circle"></i>
                Nessuna matrice disponibile per questo sito.
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Features Information -->
    <div class="card mt-4">
        <div class="card-header bg-info text-white">
            <h5 class="mb-0"><i class="fas fa-info-circle"></i> Funzionalità Graphviz</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6><i class="fas fa-check text-success"></i> Caratteristiche</h6>
                    <ul>
                        <li>Layout ortogonale gerarchico (come desktop GUI)</li>
                        <li>Raggruppamento per periodo/area/fase</li>
                        <li>Visualizzazione relazioni stratigrafiche</li>
                        <li>Distinzione tagli (rosso) e rapporti contemporanei (verde)</li>
                        <li>Legenda automatica</li>
                        <li>Alta risoluzione (300 DPI)</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h6><i class="fas fa-palette text-primary"></i> Stili Nodi</h6>
                    <ul>
                        <li><span class="badge bg-primary">US Normali:</span> Box azzurri</li>
                        <li><span class="badge bg-danger">Tagli:</span> Diamanti rossi</li>
                        <li><span class="badge bg-success">Contemporanee:</span> Ellissi verdi</li>
                        <li><span class="badge bg-secondary">Bordi:</span> Solidi (normali), Tratteggiati (tagli), Punteggiati (contemp.)</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Matrix Levels -->
    {% if levels %}
    <div class="card mt-4">
        <div class="card-header bg-secondary text-white">
            <h5 class="mb-0"><i class="fas fa-layer-group"></i> Sequenza Stratigrafica</h5>
        </div>
        <div class="card-body">
            <ol>
                {% for level_num, us_list in levels.items()|sort %}
                <li><strong>Livello {{ level_num }}:</strong> US {{ us_list|join(', US ') }}</li>
                {% endfor %}
            </ol>
        </div>
    </div>
    {% endif %}

    <!-- Help Section -->
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-question-circle"></i> Aiuto</h5>
        </div>
        <div class="card-body">
            <p><strong>Come leggere la matrice:</strong></p>
            <ul>
                <li>La matrice si legge dall'alto verso il basso (dal più recente al più antico)</li>
                <li>Le frecce indicano i rapporti stratigrafici</li>
                <li>I box colorati raggruppano US dello stesso periodo/area</li>
                <li>I diamanti rossi indicano tagli e interfacce negative</li>
                <li>Le linee tratteggiate indicano tagli, quelle puntinate rapporti contemporanei</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}