{% extends "base.html" %}

{% block title %}{{ _('Export Harris Matrix to GraphML (yEd)') }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2><i class="fas fa-project-diagram"></i> {{ _('Export Harris Matrix to GraphML (yEd)') }}</h2>

    <div class="alert alert-info">
        <i class="fas fa-info-circle"></i>
        <strong>{{ _('GraphML Export') }}</strong><br>
        {{ _('Export the Harris Matrix in GraphML format compatible with yEd Graph Editor. This format preserves the structure of archaeological periods and allows advanced diagram editing.') }}
    </div>

    <!-- Site Selection and Export Form -->
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-download"></i> {{ _('Export Parameters') }}</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('export_harris_graphml') }}">
                {{ form.hidden_tag() }}

                <!-- Site Selection -->
                <div class="mb-3">
                    <label for="site" class="form-label"><strong>{{ _('Archaeological Site') }}</strong></label>
                    {{ form.site(class="form-select", id="site", required=true) }}
                    <div class="form-text">{{ _('Select the archaeological site to generate the Harris Matrix') }}</div>
                </div>

                <!-- Title -->
                <div class="mb-3">
                    <label for="title" class="form-label"><strong>{{ _('Diagram Title') }}</strong></label>
                    {{ form.title(class="form-control", id="title", placeholder=_('Example: Pompeii - Regio VI')) }}
                    <div class="form-text">{{ _('Optional header to display in the diagram') }}</div>
                </div>

                <!-- Grouping Mode -->
                <div class="mb-3">
                    <label for="grouping" class="form-label"><strong>{{ _('Grouping') }}</strong></label>
                    {{ form.grouping(class="form-select", id="grouping") }}
                    <div class="form-text">{{ _('How to group stratigraphic units in the diagram') }}</div>
                </div>

                <!-- Reverse Epochs -->
                <div class="mb-3 form-check">
                    {{ form.reverse_epochs(class="form-check-input", id="reverse_epochs") }}
                    <label class="form-check-label" for="reverse_epochs">
                        <strong>{{ _('Reverse period order') }}</strong>
                    </label>
                    <div class="form-text">{{ _('If selected, Period 1 will correspond to the last excavated epoch (reverse order)') }}</div>
                </div>

                <!-- Export Button -->
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="fas fa-file-export"></i> {{ _('Export to GraphML') }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- s3Dgraphy Export Section -->
    <div class="card shadow-sm mt-4">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="fas fa-cube"></i> {{ _('Export s3Dgraphy (Extended Matrix)') }}</h5>
        </div>
        <div class="card-body">
            <div class="alert alert-success mb-3">
                <i class="fas fa-lightbulb"></i>
                <strong>{{ _('Advanced Export with s3Dgraphy') }}</strong><br>
                {{ _('Export the stratigraphy in s3Dgraphy format compatible with Extended Matrix Framework. Includes complete metadata, 3D model support, and advanced analysis.') }}
            </div>

            <!-- Site Selection for s3Dgraphy -->
            <div class="mb-3">
                <label for="s3d_site" class="form-label"><strong>{{ _('Select Site for s3Dgraphy Export') }}</strong></label>
                <select class="form-select" id="s3d_site" required>
                    <option value="">{{ _('-- Select a site --') }}</option>
                    {% for site in form.site.choices %}
                        {% if site[0] %}
                        <option value="{{ site[0] }}">{{ site[1] }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>

            <!-- Export Buttons -->
            <div class="row g-2">
                <div class="col-md-4">
                    <button type="button" class="btn btn-success w-100" onclick="exportS3DGraphML()">
                        <i class="fas fa-file-export"></i> {{ _('Export GraphML') }}
                    </button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-outline-success w-100" onclick="exportS3DJSON()">
                        <i class="fas fa-code"></i> {{ _('Export JSON') }}
                    </button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-primary w-100" onclick="viewInteractive()">
                        <i class="fas fa-eye"></i> {{ _('Interactive Viewer') }}
                    </button>
                </div>
            </div>

            <!-- Features -->
            <div class="mt-3">
                <h6><strong>{{ _('s3Dgraphy Export Features:') }}</strong></h6>
                <ul class="small">
                    <li><i class="fas fa-check text-success"></i> {{ _('Complete metadata for each SU') }}</li>
                    <li><i class="fas fa-check text-success"></i> {{ _('3D model support (GLB/GLTF)') }}</li>
                    <li><i class="fas fa-check text-success"></i> {{ _('Extended Matrix Framework compliant') }}</li>
                    <li><i class="fas fa-check text-success"></i> {{ _('Analysis with NetworkX, Gephi, yEd') }}</li>
                    <li><i class="fas fa-check text-success"></i> {{ _('JSON export for programmatic analysis') }}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Help Section -->
    <div class="card shadow-sm mt-4">
        <div class="card-header bg-info text-white">
            <h5 class="mb-0"><i class="fas fa-question-circle"></i> {{ _('How to Use the GraphML File') }}</h5>
        </div>
        <div class="card-body">
            <h6><strong>{{ _('1. Download yEd Graph Editor') }}</strong></h6>
            <p>
                {{ _('Download yEd for free from:') }}
                <a href="https://www.yworks.com/products/yed" target="_blank" rel="noopener noreferrer">
                    https://www.yworks.com/products/yed
                </a>
            </p>

            <h6 class="mt-3"><strong>{{ _('2. Open the GraphML File') }}</strong></h6>
            <p>
                {{ _('Once the .graphml file is exported, open it with yEd Graph Editor. The diagram will appear with all nodes (SU) and stratigraphic relationships.') }}
            </p>

            <h6 class="mt-3"><strong>{{ _('3. Edit and Layout') }}</strong></h6>
            <ul>
                <li><strong>{{ _('Automatic layout:') }}</strong> {{ _('Layout menu → Hierarchical/Organic to reorganize nodes') }}</li>
                <li><strong>{{ _('Node style:') }}</strong> {{ _('Customize colors, shapes and sizes of SU') }}</li>
                <li><strong>{{ _('Labels:') }}</strong> {{ _('Edit texts and add annotations') }}</li>
                <li><strong>{{ _('Periods:') }}</strong> {{ _('Archaeological periods are grouped in colored tables') }}</li>
            </ul>

            <h6 class="mt-3"><strong>{{ _('4. Export from yEd') }}</strong></h6>
            <p>
                {{ _('Export the final diagram in various formats:') }}
                <span class="badge bg-secondary">PDF</span>
                <span class="badge bg-secondary">PNG</span>
                <span class="badge bg-secondary">SVG</span>
                <span class="badge bg-secondary">JPG</span>
            </p>
        </div>
    </div>

    <!-- Back Button -->
    <div class="mt-4">
        <a href="{{ url_for('sites_list') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> {{ _('Back to Sites List') }}
        </a>
    </div>
</div>

<script>
function exportS3DGraphML() {
    const site = document.getElementById('s3d_site').value;
    if (!site) {
        alert('{{ _("Select a site for export") }}');
        return;
    }
    window.location.href = `/3d/export/graphml/${site}`;
}

function exportS3DJSON() {
    const site = document.getElementById('s3d_site').value;
    if (!site) {
        alert('{{ _("Select a site for export") }}');
        return;
    }
    window.location.href = `/3d/export/json/${site}`;
}

function viewInteractive() {
    const site = document.getElementById('s3d_site').value;
    if (!site) {
        alert('{{ _("Select a site to view") }}');
        return;
    }
    window.location.href = `/3d/viewer/${site}`;
}
</script>
{% endblock %}