{% extends "base.html" %}

{% block title %}3D Builder - PyArchInit-Mini{% endblock %}

{% block extra_head %}
<!-- Socket.IO Client for Real-Time Blender Streaming -->
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js" crossorigin="anonymous"></script>

<!-- Three.js Library (local files for reliability) -->
<script type="text/javascript" src="{{ url_for('static', filename='js/three.min.js') }}?v=1.8.1" defer></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/OrbitControls.js') }}?v=1.8.1" defer></script>

<!-- 3D Viewer CSS -->
<style>
    #viewerContainer {
        width: 100%;
        height: 500px;
        border: 2px solid #dee2e6;
        border-radius: 8px;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        position: relative;
        overflow: hidden;
    }

    #viewerContainer canvas {
        display: block;
    }

    .viewer-overlay {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px;
        border-radius: 5px;
        color: white;
        font-size: 12px;
        z-index: 10;
    }

    .viewer-controls {
        position: absolute;
        bottom: 10px;
        left: 10px;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px;
        border-radius: 5px;
        z-index: 10;
    }

    .viewer-controls button {
        margin: 2px;
    }

    /* Chat Interface Styles */
    #chatContainer {
        display: flex;
        flex-direction: column;
        height: 400px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        background: white;
    }

    #chatMessages {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
        background: #f8f9fa;
    }

    .chat-message {
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 8px;
        max-width: 85%;
        word-wrap: break-word;
    }

    .chat-message.user {
        background: #007bff;
        color: white;
        margin-left: auto;
        text-align: right;
    }

    .chat-message.assistant {
        background: white;
        border: 1px solid #dee2e6;
        margin-right: auto;
    }

    .chat-message.error {
        background: #f8d7da;
        border: 1px solid #f5c2c7;
        color: #842029;
    }

    .chat-message.system {
        background: #d1ecf1;
        border: 1px solid #bee5eb;
        color: #0c5460;
        margin-right: auto;
        font-size: 0.85rem;
        font-style: italic;
    }

    .chat-message-header {
        font-size: 0.75rem;
        opacity: 0.7;
        margin-bottom: 5px;
    }

    .chat-message-content {
        font-size: 0.9rem;
    }

    #chatInput {
        border: none;
        border-top: 1px solid #dee2e6;
        border-radius: 0 0 8px 8px;
        padding: 10px;
        display: flex;
        gap: 8px;
    }

    #chatInput input {
        flex: 1;
    }

    .chat-loading {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px;
        background: #e9ecef;
        border-radius: 8px;
        font-size: 0.9rem;
    }

    .chat-examples {
        font-size: 0.85rem;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .chat-example {
        cursor: pointer;
        color: #007bff;
        text-decoration: none;
        display: block;
        padding: 4px 0;
    }

    .chat-example:hover {
        text-decoration: underline;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-md-8">
            <h1 class="h2">
                <i class="fas fa-cube"></i> 3D Stratigraphic Builder
            </h1>
            <p class="text-muted">
                Crea modelli 3D stratigrafici interattivi con Blender e Claude AI
            </p>
        </div>
        <div class="col-md-4">
            <!-- Site Selection -->
            <label for="siteSelect" class="form-label"><i class="fas fa-map-marked-alt"></i> Seleziona Sito</label>
            <select class="form-select" id="siteSelect" name="site_id">
                <option value="">-- Tutti i Siti --</option>
                {% if sites %}
                    {% for site in sites %}
                    <option value="{{ site.id_sito }}">{{ site.sito }}</option>
                    {% endfor %}
                {% endif %}
            </select>
            <div id="usInfo" class="form-text">Seleziona un sito per vedere le US disponibili</div>
        </div>
    </div>

    <!-- Status Alert -->
    <div id="statusAlert" class="alert alert-info d-none" role="alert">
        <div class="d-flex align-items-center">
            <div class="spinner-border spinner-border-sm me-2" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div id="statusMessage">Processing...</div>
        </div>
    </div>

    <!-- Main Chat Interface -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-comments"></i> Chat 3D Builder
                    </h5>
                </div>
                <div class="card-body p-0">
                    <!-- Chat Container -->
                    <div id="chatContainer">
                        <div id="chatMessages">
                            <div class="chat-message assistant">
                                <div class="chat-message-header">Assistente 3D Builder</div>
                                <div class="chat-message-content">
                                    <strong>Benvenuto!</strong> Usa comandi in linguaggio naturale per creare modelli 3D:
                                    <ul class="mb-0 mt-2" style="font-size: 0.9rem;">
                                        <li><code>Crea US 1,2,3</code> - Crea geometria 3D per US specifiche</li>
                                        <li><code>Costruisci tutto</code> - Crea tutte le US del sito</li>
                                        <li><code>Mostra solo periodo Romano</code> - Filtra per periodo</li>
                                        <li><code>Nascondi US 5,6</code> - Nascondi US specifiche</li>
                                    </ul>
                                    <div class="mt-2 p-2 bg-light border-start border-primary border-3">
                                        <small><strong>Nota:</strong> Assicurati che Blender sia avviato con l'addon MCP attivo (porta 9876)</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="chatInput">
                            <input type="text"
                                   id="chatMessageInput"
                                   class="form-control"
                                   placeholder="Scrivi un comando... (es: Crea US 1,2,3)"
                                   autocomplete="off">
                            <button type="button" class="btn btn-primary" id="chatSendBtn">
                                <i class="fas fa-paper-plane"></i> Invia
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Examples -->
            <div class="card mt-3">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2">Esempi di comandi:</h6>
                    <div class="d-flex flex-wrap gap-2">
                        <button class="btn btn-sm btn-outline-secondary chat-example" data-command="Crea US 1,2,3">
                            Crea US 1,2,3
                        </button>
                        <button class="btn btn-sm btn-outline-secondary chat-example" data-command="Costruisci tutto">
                            Costruisci tutto
                        </button>
                        <button class="btn btn-sm btn-outline-secondary chat-example" data-command="Mostra solo periodo Romano">
                            Mostra periodo Romano
                        </button>
                        <button class="btn btn-sm btn-outline-secondary chat-example" data-command="Nascondi US 5,6">
                            Nascondi US 5,6
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar: Status & Info -->
        <div class="col-lg-4">
            <!-- Blender Status -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-plug"></i> Connessione Blender
                    </h6>
                </div>
                <div class="card-body">
                    <div id="blenderStatus" class="mb-2">
                        <i class="fas fa-circle text-secondary"></i> Non Connesso
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="testBlenderBtn">
                        <i class="fas fa-sync"></i> Test Connessione
                    </button>
                </div>
            </div>

            <!-- Statistics -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-chart-bar"></i> Statistiche
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>US Totali:</span>
                        <strong id="statTotalUS">{{ total_us }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>File GraphML:</span>
                        <strong id="statGraphML">{{ graphml_files|length if graphml_files else 0 }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Sessioni Attive:</span>
                        <strong id="statSessions">0</strong>
                    </div>
                </div>
            </div>

            <!-- Current Session Info -->
            <div class="card mb-3 d-none" id="sessionInfoCard">
                <div class="card-header bg-success text-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-cube"></i> Sessione Corrente
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>ID Sessione:</span>
                        <small id="currentSessionId" class="font-monospace">-</small>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Proxy Creati:</span>
                        <strong id="currentProxiesCount">0</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Session Results -->
    <div id="sessionResults" class="row d-none">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-check-circle"></i> Generation Complete
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Session ID:</strong> <code id="sessionId"></code>
                        </div>
                        <div class="col-md-3">
                            <strong>Proxies Generated:</strong> <span id="proxiesCount" class="badge bg-primary"></span>
                        </div>
                        <div class="col-md-3 text-end">
                            <button type="button" class="btn btn-sm btn-outline-danger" id="deleteSessionBtn">
                                <i class="fas fa-trash"></i> Delete Session
                            </button>
                        </div>
                    </div>

                    <!-- 3D Viewer -->
                    <div class="card mb-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="fas fa-cube"></i> 3D Stratigraphic Viewer
                            </h6>
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-secondary" id="toggleGridBtn" title="Toggle Grid">
                                    <i class="fas fa-th"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" id="toggleAxesBtn" title="Toggle Axes">
                                    <i class="fas fa-arrows-alt"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" id="toggleLabelsBtn" title="Toggle Labels">
                                    <i class="fas fa-tag"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" id="centerCameraBtn" title="Center Camera">
                                    <i class="fas fa-compress"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div id="viewerContainer">
                                <!-- Three.js will render here -->
                                <div class="viewer-overlay" id="viewerInfo">
                                    <div><strong>Proxies:</strong> <span id="proxyCount">0</span></div>
                                    <div><strong>Selected:</strong> <span id="selectedProxy">None</span></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Filter Controls -->
                    <div class="row">
                        <div class="col-12">
                            <h6 class="mb-3">
                                <i class="fas fa-filter"></i> Filter Controls
                            </h6>
                        </div>

                        <!-- Period Filter -->
                        <div class="col-md-4 mb-3">
                            <label for="periodFilter" class="form-label">Period</label>
                            <select class="form-select" id="periodFilter" multiple size="5">
                                <option value="Bronze Age">Bronze Age</option>
                                <option value="Iron Age">Iron Age</option>
                                <option value="Roman">Roman</option>
                                <option value="Medieval">Medieval</option>
                                <option value="Unknown">Unknown</option>
                            </select>
                        </div>

                        <!-- Date Range Filter - Enhanced -->
                        <div class="col-md-8 mb-3">
                            <label class="form-label d-flex justify-content-between align-items-center">
                                <span>Date Range (BCE/CE)</span>
                                <small class="text-muted" id="dateRangeDisplay">All dates</small>
                            </label>

                            <!-- Quick Presets -->
                            <div class="btn-group btn-group-sm mb-2 w-100" role="group">
                                <button type="button" class="btn btn-outline-secondary date-preset" data-start="-3300" data-end="-1200">
                                    <small>Bronze Age</small>
                                </button>
                                <button type="button" class="btn btn-outline-secondary date-preset" data-start="-1200" data-end="-500">
                                    <small>Iron Age</small>
                                </button>
                                <button type="button" class="btn btn-outline-secondary date-preset" data-start="-500" data-end="500">
                                    <small>Roman</small>
                                </button>
                                <button type="button" class="btn btn-outline-secondary date-preset" data-start="500" data-end="1500">
                                    <small>Medieval</small>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" id="clearDateRange">
                                    <small><i class="fas fa-times"></i></small>
                                </button>
                            </div>

                            <div class="row">
                                <!-- Start Date -->
                                <div class="col-6">
                                    <div class="input-group input-group-sm mb-1">
                                        <span class="input-group-text">From</span>
                                        <input type="number" class="form-control" id="dateStart" placeholder="-1200" step="10">
                                        <span class="input-group-text text-muted" style="font-size: 0.75rem;">BCE/CE</span>
                                    </div>
                                    <input type="range" class="form-range form-range-sm" id="dateStartSlider"
                                           min="-5000" max="2000" value="-1200" step="10">
                                </div>

                                <!-- End Date -->
                                <div class="col-6">
                                    <div class="input-group input-group-sm mb-1">
                                        <span class="input-group-text">To</span>
                                        <input type="number" class="form-control" id="dateEnd" placeholder="-800" step="10">
                                        <span class="input-group-text text-muted" style="font-size: 0.75rem;">BCE/CE</span>
                                    </div>
                                    <input type="range" class="form-range form-range-sm" id="dateEndSlider"
                                           min="-5000" max="2000" value="-800" step="10">
                                </div>
                            </div>

                            <div class="form-text mt-1">
                                <i class="fas fa-info-circle"></i> Negative = BCE, Positive = CE
                            </div>
                        </div>

                        <!-- Transparency Slider -->
                        <div class="col-md-4 mb-3">
                            <label for="transparencySlider" class="form-label">
                                Transparency: <span id="transparencyValue">100%</span>
                            </label>
                            <input type="range"
                                   class="form-range"
                                   id="transparencySlider"
                                   min="0"
                                   max="100"
                                   value="100">
                        </div>

                        <!-- Filter Actions -->
                        <div class="col-12">
                            <button type="button" class="btn btn-primary btn-sm me-2" id="applyFiltersBtn">
                                <i class="fas fa-filter"></i> Apply Filters
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="resetFiltersBtn">
                                <i class="fas fa-undo"></i> Reset
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Proxy Info Panel -->
    <div class="row mt-4 d-none" id="proxyInfoPanel">
        <div class="col-12">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle"></i> Stratigraphic Unit Details
                    </h5>
                    <button type="button" class="btn btn-sm btn-outline-light" id="closeProxyInfoBtn">
                        <i class="fas fa-times"></i> Close
                    </button>
                </div>
                <div class="card-body">
                    <!-- Basic Info Header -->
                    <div class="row mb-3">
                        <div class="col-md-8">
                            <h4 class="mb-1">
                                <span class="badge bg-secondary" id="proxyUsLabel">US -</span>
                                <span id="proxyUsTitle" class="text-muted">-</span>
                            </h4>
                            <p class="text-muted mb-0">
                                <i class="fas fa-map-marker-alt"></i> <span id="proxySite">-</span> /
                                <span id="proxyArea">-</span>
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="mb-2">
                                <small class="text-muted d-block">Visibility</small>
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-success" id="showProxyBtn">
                                        <i class="fas fa-eye"></i> Show
                                    </button>
                                    <button type="button" class="btn btn-outline-danger" id="hideProxyBtn">
                                        <i class="fas fa-eye-slash"></i> Hide
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tabbed Content -->
                    <ul class="nav nav-tabs mb-3" id="proxyInfoTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-basic" data-bs-toggle="tab"
                                    data-bs-target="#panel-basic" type="button" role="tab">
                                <i class="fas fa-info"></i> Basic
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-stratigraphy" data-bs-toggle="tab"
                                    data-bs-target="#panel-stratigraphy" type="button" role="tab">
                                <i class="fas fa-layer-group"></i> Stratigraphy
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-chronology" data-bs-toggle="tab"
                                    data-bs-target="#panel-chronology" type="button" role="tab">
                                <i class="fas fa-clock"></i> Chronology
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-relationships" data-bs-toggle="tab"
                                    data-bs-target="#panel-relationships" type="button" role="tab">
                                <i class="fas fa-project-diagram"></i> Relationships
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content" id="proxyInfoTabContent">
                        <!-- Basic Info Tab -->
                        <div class="tab-pane fade show active" id="panel-basic" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <th width="40%">Unit Type:</th>
                                                <td id="proxyUnitType">-</td>
                                            </tr>
                                            <tr>
                                                <th>Definition:</th>
                                                <td id="proxyDefinition">-</td>
                                            </tr>
                                            <tr>
                                                <th>Formation:</th>
                                                <td id="proxyFormation">-</td>
                                            </tr>
                                            <tr>
                                                <th>Interpretation:</th>
                                                <td id="proxyInterpretation">-</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <th width="40%">Sector:</th>
                                                <td id="proxySector">-</td>
                                            </tr>
                                            <tr>
                                                <th>Min Quota:</th>
                                                <td id="proxyQuotaMin">-</td>
                                            </tr>
                                            <tr>
                                                <th>Max Quota:</th>
                                                <td id="proxyQuotaMax">-</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-12">
                                    <h6>Description:</h6>
                                    <p id="proxyDescription" class="text-muted">-</p>
                                </div>
                            </div>
                        </div>

                        <!-- Stratigraphy Tab -->
                        <div class="tab-pane fade" id="panel-stratigraphy" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Physical Characteristics:</h6>
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <th width="40%">Consistency:</th>
                                                <td id="proxyConsistency">-</td>
                                            </tr>
                                            <tr>
                                                <th>Color:</th>
                                                <td id="proxyColor">-</td>
                                            </tr>
                                            <tr>
                                                <th>Inclusions:</th>
                                                <td id="proxyInclusions">-</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <h6>Dimensions:</h6>
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <th width="40%">Max Length:</th>
                                                <td id="proxyLengthMax">-</td>
                                            </tr>
                                            <tr>
                                                <th>Max Height:</th>
                                                <td id="proxyHeightMax">-</td>
                                            </tr>
                                            <tr>
                                                <th>Max Depth:</th>
                                                <td id="proxyDepthMax">-</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Chronology Tab -->
                        <div class="tab-pane fade" id="panel-chronology" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Period:</h6>
                                    <div class="mb-3">
                                        <span class="badge bg-info fs-6" id="proxyPeriod">Unknown</span>
                                    </div>
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <th width="40%">Phase:</th>
                                                <td id="proxyPhase">-</td>
                                            </tr>
                                            <tr>
                                                <th>Initial Chronology:</th>
                                                <td id="proxyCronInitial">-</td>
                                            </tr>
                                            <tr>
                                                <th>Final Chronology:</th>
                                                <td id="proxyCronFinal">-</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <h6>Dating Range:</h6>
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <th width="40%">Start:</th>
                                                <td id="proxyDatingStart">-</td>
                                            </tr>
                                            <tr>
                                                <th>End:</th>
                                                <td id="proxyDatingEnd">-</td>
                                            </tr>
                                            <tr>
                                                <th>Reliability:</th>
                                                <td id="proxyReliability">-</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Relationships Tab -->
                        <div class="tab-pane fade" id="panel-relationships" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6><i class="fas fa-arrow-up text-success"></i> Overlying (Above):</h6>
                                    <div class="mb-3">
                                        <div id="proxyCoveredBy" class="small text-muted">-</div>
                                    </div>
                                    <h6><i class="fas fa-arrow-down text-danger"></i> Underlying (Below):</h6>
                                    <div class="mb-3">
                                        <div id="proxyCovers" class="small text-muted">-</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6><i class="fas fa-fill text-primary"></i> Fills:</h6>
                                    <div class="mb-3">
                                        <div id="proxyFills" class="small text-muted">-</div>
                                    </div>
                                    <h6><i class="fas fa-fill-drip text-warning"></i> Filled By:</h6>
                                    <div class="mb-3">
                                        <div id="proxyFilledBy" class="small text-muted">-</div>
                                    </div>
                                    <h6><i class="fas fa-cut text-info"></i> Cuts / Cut By:</h6>
                                    <div class="mb-3">
                                        <div id="proxyCuts" class="small text-muted">-</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Active Sessions List -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list"></i> Active Sessions
                    </h5>
                </div>
                <div class="card-body">
                    <div id="sessionsListContainer">
                        <div class="text-muted text-center py-4">
                            <i class="fas fa-info-circle"></i> No active sessions
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 3D Viewer Module -->
<script src="{{ url_for('static', filename='js/three-d-viewer.js') }}"></script>

<!-- JavaScript -->
<script>
// Wait for all scripts to load, including Three.js
window.addEventListener('load', function() {
    let currentSessionId = null;
    let viewer3D = null;
    let currentProxies = [];

    // ============================================================================
    // Chat Interface Functions
    // ============================================================================

    // Progress polling state
    let progressPollingTimer = null;
    let lastProgressCount = 0;

    function startProgressPolling() {
        if (progressPollingTimer) return; // Already polling

        console.log('Starting progress polling...');
        lastProgressCount = 0;

        progressPollingTimer = setInterval(async () => {
            try {
                const response = await fetch('/api/3d-builder/progress');
                const data = await response.json();

                if (data.success && data.messages && data.messages.length > lastProgressCount) {
                    // New progress messages available
                    const newMessages = data.messages.slice(lastProgressCount);
                    console.log(`Received ${newMessages.length} new progress messages`);

                    newMessages.forEach(msg => {
                        displayProgressMessage(msg);
                    });

                    lastProgressCount = data.messages.length;
                }
            } catch (error) {
                console.error('Progress polling error:', error);
            }
        }, 500); // Poll every 500ms
    }

    function stopProgressPolling() {
        if (progressPollingTimer) {
            clearInterval(progressPollingTimer);
            progressPollingTimer = null;
            console.log('Stopped progress polling');
        }
    }

    function displayProgressMessage(msg) {
        // Format and display progress message in chat
        let progressText = '';

        switch(msg.action) {
            case 'creating_geometry':
                progressText = `Creating geometry for US ${msg.us_id} (${msg.unita_tipo || 'US'})...`;
                break;
            case 'applying_material':
                progressText = `Applying material to US ${msg.us_id}...`;
                break;
            case 'created_us':
                progressText = `✓ Completed US ${msg.us_id} (${msg.progress || 0}% overall)`;
                break;
            case 'batch_started':
                progressText = `Starting batch: ${msg.count} objects to create`;
                break;
            case 'batch_complete':
                progressText = `✓ Batch complete: ${msg.created_count} objects created successfully`;
                break;
            case 'progress':
                progressText = msg.message || `Progress: ${msg.progress || 0}%`;
                break;
            default:
                progressText = msg.message || msg.action;
        }

        // Add to chat as system message
        addChatMessage(progressText, false, false, true); // Add 4th parameter for system message
    }

    function addChatMessage(content, isUser = false, isError = false, isSystem = false) {
        const chatMessages = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');

        // Determine message class
        let messageClass = 'chat-message ';
        if (isError) {
            messageClass += 'error';
        } else if (isUser) {
            messageClass += 'user';
        } else if (isSystem) {
            messageClass += 'system';
        } else {
            messageClass += 'assistant';
        }
        messageDiv.className = messageClass;

        const header = document.createElement('div');
        header.className = 'chat-message-header';
        header.textContent = isUser ? 'You' : (isSystem ? 'System' : 'Assistant');

        const contentDiv = document.createElement('div');
        contentDiv.className = 'chat-message-content';

        if (typeof content === 'string') {
            contentDiv.textContent = content;
        } else {
            contentDiv.innerHTML = content;
        }

        messageDiv.appendChild(header);
        messageDiv.appendChild(contentDiv);
        chatMessages.appendChild(messageDiv);

        // Auto-scroll to bottom
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function addChatLoading() {
        const chatMessages = document.getElementById('chatMessages');
        const loadingDiv = document.createElement('div');
        loadingDiv.className = 'chat-loading';
        loadingDiv.id = 'chatLoading';
        loadingDiv.innerHTML = `
            <div class="spinner-border spinner-border-sm" role="status"></div>
            <span>Processing...</span>
        `;
        chatMessages.appendChild(loadingDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function removeChatLoading() {
        const loading = document.getElementById('chatLoading');
        if (loading) {
            loading.remove();
        }
    }

    async function sendChatMessage(message) {
        if (!message.trim()) return;

        // Add user message to chat
        addChatMessage(message, true);

        // Show loading indicator
        addChatLoading();

        // Get current site_id from form
        const siteId = document.getElementById('siteSelect')?.value;

        // Start progress polling for build commands
        const isBuildCommand = message.toLowerCase().includes('crea') ||
                               message.toLowerCase().includes('create') ||
                               message.toLowerCase().includes('costruisci') ||
                               message.toLowerCase().includes('build');

        if (isBuildCommand) {
            console.log('Build command detected, starting progress polling');
            startProgressPolling();
        }

        try {
            const response = await fetch('/api/3d-builder/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: message,
                    session_id: currentSessionId,
                    site_id: siteId ? parseInt(siteId) : null
                })
            });

            const data = await response.json();

            removeChatLoading();

            // Stop polling after response is received
            if (isBuildCommand) {
                // Wait a bit to catch final progress messages
                setTimeout(() => {
                    stopProgressPolling();
                    console.log('Stopped progress polling after build complete');
                }, 2000);
            }

            if (data.success) {
                console.log('Chat response data:', data);

                // Show assistant response
                let responseText = data.message;

                // Add details about tool calls
                if (data.tool_calls && data.tool_calls.length > 0) {
                    const toolSummary = data.tool_calls.map(tc => {
                        console.log(`Tool call ${tc.tool}:`, tc);
                        if (tc.success && tc.result && tc.result.proxies_count) {
                            return `<br><small>✓ ${tc.tool}: Generated ${tc.result.proxies_count} proxies</small>`;
                        } else if (tc.success) {
                            return `<br><small>✓ ${tc.tool}: Success</small>`;
                        } else {
                            return `<br><small>✗ ${tc.tool}: ${tc.error}</small>`;
                        }
                    }).join('');

                    responseText += toolSummary;
                }

                addChatMessage(responseText, false);

                // Process tool results
                for (const toolCall of data.tool_calls) {
                    console.log('Processing tool call:', toolCall.tool, toolCall.result);

                    if (toolCall.success && toolCall.tool === 'build_3d') {
                        // Update session info card
                        const sessionInfoCard = document.getElementById('sessionInfoCard');
                        const currentSessionIdEl = document.getElementById('currentSessionId');
                        const currentProxiesCountEl = document.getElementById('currentProxiesCount');

                        if (toolCall.result.session_id) {
                            currentSessionId = toolCall.result.session_id;
                            currentSessionIdEl.textContent = currentSessionId;
                        }

                        if (toolCall.result.proxies_count) {
                            currentProxiesCountEl.textContent = toolCall.result.proxies_count;
                            sessionInfoCard.classList.remove('d-none');
                        }

                        // DEBUG: Log complete result structure
                        console.log('=== DEBUG: Tool Call Result ===');
                        console.log('Full result:', toolCall.result);
                        console.log('Proxies in result:', toolCall.result.proxies);
                        console.log('Proxies type:', typeof toolCall.result.proxies);
                        console.log('Proxies is array:', Array.isArray(toolCall.result.proxies));
                        console.log('Proxies length:', toolCall.result.proxies ? toolCall.result.proxies.length : 'N/A');
                        console.log('viewer3D exists:', typeof viewer3D !== 'undefined' && viewer3D !== null);
                        console.log('THREE loaded:', typeof THREE !== 'undefined');
                        console.log('viewerContainer exists:', document.getElementById('viewerContainer') !== null);
                        console.log('==============================');

                        // Check if proxies data exists
                        if (toolCall.result.proxies && toolCall.result.proxies.length > 0) {
                            console.log(`Loading ${toolCall.result.proxies.length} proxies into viewer`);

                            // Load and display proxies in 3D viewer
                            currentProxies = toolCall.result.proxies;
                            if (viewer3D) {
                                viewer3D.loadProxies(currentProxies);
                                showSessionResults({
                                    session_id: currentSessionId,
                                    proxies_count: currentProxies.length
                                });
                            } else {
                                console.warn('viewer3D not initialized, initializing now...');
                                // Initialize viewer if not already done
                                if (typeof THREE !== 'undefined') {
                                    const container = document.getElementById('viewerContainer');
                                    if (container) {
                                        viewer3D = new StratigraphicViewer3D(container);
                                        viewer3D.loadProxies(currentProxies);
                                        showSessionResults({
                                            session_id: currentSessionId,
                                            proxies_count: currentProxies.length
                                        });
                                    } else {
                                        console.error('viewerContainer not found');
                                    }
                                } else {
                                    console.error('THREE.js not loaded');
                                }
                            }
                        } else {
                            console.warn('No proxies in result, attempting to fetch from session');
                            // Try to fetch proxies from session
                            if (currentSessionId) {
                                loadSessionProxies(currentSessionId);
                            }
                        }
                    }
                }

            } else {
                // Show error
                addChatMessage('Error: ' + data.error + (data.message ? '\n' + data.message : ''), false, true);

                // Show help if available
                if (data.help) {
                    addChatMessage('<pre style="font-size: 0.8rem; white-space: pre-wrap;">' + data.help + '</pre>', false);
                }
            }

        } catch (error) {
            removeChatLoading();
            addChatMessage('Error: ' + error.message, false, true);
        }
    }

    // Chat input handlers
    document.getElementById('chatSendBtn')?.addEventListener('click', function() {
        const input = document.getElementById('chatMessageInput');
        const message = input.value.trim();
        if (message) {
            sendChatMessage(message);
            input.value = '';
        }
    });

    document.getElementById('chatMessageInput')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            const message = this.value.trim();
            if (message) {
                sendChatMessage(message);
                this.value = '';
            }
        }
    });

    // Chat example click handlers (for buttons)
    document.querySelectorAll('.chat-example').forEach(example => {
        example.addEventListener('click', function(e) {
            e.preventDefault();
            const command = this.dataset.command || this.textContent;
            document.getElementById('chatMessageInput').value = command;
            document.getElementById('chatSendBtn').click();
        });
    });

    // ============================================================================
    // End Chat Interface
    // ============================================================================

    // Site selection handler - show US count
    document.getElementById('siteSelect')?.addEventListener('change', async function(e) {
        const siteId = this.value;
        const usInfo = document.getElementById('usInfo');

        if (!siteId) {
            usInfo.textContent = 'Seleziona un sito per vedere le US disponibili';
            return;
        }

        try {
            usInfo.textContent = 'Caricamento...';

            const response = await fetch(`/api/3d-builder/sites/${siteId}/us`);
            const data = await response.json();

            if (data.success && data.us && data.us.length > 0) {
                const usIds = data.us.map(u => u.id_us).join(', ');
                usInfo.innerHTML = `<strong>${data.us.length} US disponibili</strong>: ${usIds.length > 50 ? usIds.substring(0, 50) + '...' : usIds}`;
                console.log(`Site ${siteId} has ${data.us.length} US:`, usIds);
            } else {
                usInfo.innerHTML = `<span class="text-warning">Nessuna US trovata per questo sito</span>`;
            }
        } catch (error) {
            console.error('Error loading site US:', error);
            usInfo.innerHTML = `<span class="text-danger">Errore caricamento US</span>`;
        }
    });


    // Apply filters
    document.getElementById('applyFiltersBtn')?.addEventListener('click', function() {
        if (!viewer3D || currentProxies.length === 0) {
            showAlert('No 3D model loaded', 'warning');
            return;
        }

        applyFiltersToViewer();
    });

    // Reset filters
    document.getElementById('resetFiltersBtn')?.addEventListener('click', function() {
        if (!viewer3D) return;

        // Reset form values
        document.getElementById('periodFilter').selectedIndex = -1;
        document.getElementById('dateStart').value = '';
        document.getElementById('dateEnd').value = '';
        document.getElementById('dateStartSlider').value = '-1200';
        document.getElementById('dateEndSlider').value = '-800';
        document.getElementById('transparencySlider').value = 100;
        document.getElementById('transparencyValue').textContent = '100%';
        updateDateRangeDisplay();

        // Reset viewer
        currentProxies.forEach(proxy => {
            viewer3D.updateProxyVisibility(proxy.us_id, true);
            viewer3D.updateProxyTransparency(proxy.us_id, 1.0);
        });

        showAlert('Filters reset', 'success');
    });

    // Date range spinbox/slider synchronization
    const dateStartInput = document.getElementById('dateStart');
    const dateStartSlider = document.getElementById('dateStartSlider');
    const dateEndInput = document.getElementById('dateEnd');
    const dateEndSlider = document.getElementById('dateEndSlider');

    // Sync start date input -> slider
    dateStartInput?.addEventListener('input', function() {
        if (this.value !== '') {
            dateStartSlider.value = this.value;
        }
        updateDateRangeDisplay();
    });

    // Sync start date slider -> input
    dateStartSlider?.addEventListener('input', function() {
        dateStartInput.value = this.value;
        updateDateRangeDisplay();
    });

    // Sync end date input -> slider
    dateEndInput?.addEventListener('input', function() {
        if (this.value !== '') {
            dateEndSlider.value = this.value;
        }
        updateDateRangeDisplay();
    });

    // Sync end date slider -> input
    dateEndSlider?.addEventListener('input', function() {
        dateEndInput.value = this.value;
        updateDateRangeDisplay();
    });

    // Period preset buttons
    document.querySelectorAll('.date-preset').forEach(btn => {
        btn.addEventListener('click', function() {
            const start = this.dataset.start;
            const end = this.dataset.end;

            dateStartInput.value = start;
            dateStartSlider.value = start;
            dateEndInput.value = end;
            dateEndSlider.value = end;

            updateDateRangeDisplay();

            // Highlight selected preset
            document.querySelectorAll('.date-preset').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
        });
    });

    // Clear date range button
    document.getElementById('clearDateRange')?.addEventListener('click', function() {
        dateStartInput.value = '';
        dateEndInput.value = '';
        dateStartSlider.value = '-1200';
        dateEndSlider.value = '-800';
        updateDateRangeDisplay();

        // Remove active state from presets
        document.querySelectorAll('.date-preset').forEach(b => b.classList.remove('active'));
    });

    // Update date range display text
    function updateDateRangeDisplay() {
        const display = document.getElementById('dateRangeDisplay');
        if (!display) return;

        const start = dateStartInput.value;
        const end = dateEndInput.value;

        if (start === '' && end === '') {
            display.textContent = 'All dates';
        } else if (start !== '' && end !== '') {
            const startLabel = parseInt(start) < 0 ? `${Math.abs(start)} BCE` : `${start} CE`;
            const endLabel = parseInt(end) < 0 ? `${Math.abs(end)} BCE` : `${end} CE`;
            display.textContent = `${startLabel} to ${endLabel}`;
        } else if (start !== '') {
            const startLabel = parseInt(start) < 0 ? `${Math.abs(start)} BCE` : `${start} CE`;
            display.textContent = `From ${startLabel}`;
        } else {
            const endLabel = parseInt(end) < 0 ? `${Math.abs(end)} BCE` : `${end} CE`;
            display.textContent = `Until ${endLabel}`;
        }
    }

    // Initialize display on load
    updateDateRangeDisplay();

    // Real-time transparency update
    document.getElementById('transparencySlider')?.addEventListener('input', function() {
        const opacity = parseFloat(this.value) / 100.0;
        document.getElementById('transparencyValue').textContent = this.value + '%';

        if (viewer3D && currentProxies.length > 0) {
            viewer3D.updateAllTransparency(opacity);
        }
    });

    // Test Blender connection
    document.getElementById('testBlenderBtn').addEventListener('click', async function() {
        const btn = this;
        btn.disabled = true;

        try {
            const response = await fetch('/api/3d-builder/blender/test-connection');
            const data = await response.json();

            const statusDiv = document.getElementById('blenderStatus');
            if (data.success) {
                statusDiv.innerHTML = '<i class="fas fa-circle text-success"></i> Connected';
                showAlert('Blender connected: ' + data.scene_name, 'success');
            } else {
                statusDiv.innerHTML = '<i class="fas fa-circle text-danger"></i> Disconnected';
                showAlert('Blender connection failed', 'warning');
            }
        } catch (error) {
            document.getElementById('blenderStatus').innerHTML = '<i class="fas fa-circle text-danger"></i> Error';
            showAlert('Error testing connection: ' + error.message, 'danger');
        } finally {
            btn.disabled = false;
        }
    });

    /**
     * Apply all filters to viewer
     */
    function applyFiltersToViewer() {
        if (!viewer3D || currentProxies.length === 0) return;

        // Get filter values
        const periodSelect = document.getElementById('periodFilter');
        const selectedPeriods = Array.from(periodSelect.selectedOptions).map(opt => opt.value);

        const dateStart = parseInt(document.getElementById('dateStart').value);
        const dateEnd = parseInt(document.getElementById('dateEnd').value);

        let visibleCount = 0;
        let hiddenCount = 0;

        currentProxies.forEach(proxy => {
            let isVisible = true;

            // Period filter
            if (selectedPeriods.length > 0) {
                const proxyPeriod = proxy.chronology?.period_name || 'Unknown';
                if (!selectedPeriods.includes(proxyPeriod)) {
                    isVisible = false;
                }
            }

            // Date range filter
            if (!isNaN(dateStart) || !isNaN(dateEnd)) {
                const datingStart = proxy.chronology?.dating_start;
                const datingEnd = proxy.chronology?.dating_end;

                if (datingStart !== null && datingStart !== undefined &&
                    datingEnd !== null && datingEnd !== undefined) {

                    // Check if proxy date range overlaps with filter range
                    const filterStart = isNaN(dateStart) ? -Infinity : dateStart;
                    const filterEnd = isNaN(dateEnd) ? Infinity : dateEnd;

                    // No overlap if proxy ends before filter starts OR proxy starts after filter ends
                    if (datingEnd < filterStart || datingStart > filterEnd) {
                        isVisible = false;
                    }
                } else {
                    // No dating info - hide if date filter is active
                    if (!isNaN(dateStart) || !isNaN(dateEnd)) {
                        isVisible = false;
                    }
                }
            }

            // Apply visibility
            viewer3D.updateProxyVisibility(proxy.us_id, isVisible);

            if (isVisible) {
                visibleCount++;
            } else {
                hiddenCount++;
            }
        });

        showAlert(`Filters applied: ${visibleCount} visible, ${hiddenCount} hidden`, 'success');
    }

    /**
     * Populate period filter with unique periods from loaded proxies
     */
    function populatePeriodFilter() {
        const periodSelect = document.getElementById('periodFilter');
        if (!periodSelect || currentProxies.length === 0) return;

        // Clear existing options
        periodSelect.innerHTML = '';

        // Extract unique periods
        const periodsSet = new Set();
        currentProxies.forEach(proxy => {
            const period = proxy.chronology?.period_name || 'Unknown';
            periodsSet.add(period);
        });

        // Sort periods
        const periods = Array.from(periodsSet).sort();

        // Add options
        periods.forEach(period => {
            const option = document.createElement('option');
            option.value = period;
            option.textContent = period;
            periodSelect.appendChild(option);
        });

        console.log(`Populated period filter with ${periods.length} periods`);
    }

    // Viewer control buttons
    document.getElementById('toggleGridBtn')?.addEventListener('click', function() {
        if (viewer3D) {
            const currentState = viewer3D.settings.showGrid;
            viewer3D.toggleGrid(!currentState);
            this.classList.toggle('active');
        }
    });

    document.getElementById('toggleAxesBtn')?.addEventListener('click', function() {
        if (viewer3D) {
            const currentState = viewer3D.settings.showAxes;
            viewer3D.toggleAxes(!currentState);
            this.classList.toggle('active');
        }
    });

    document.getElementById('toggleLabelsBtn')?.addEventListener('click', function() {
        if (viewer3D) {
            const currentState = viewer3D.settings.showLabels;
            viewer3D.toggleLabels(!currentState);
            this.classList.toggle('active');
        }
    });

    document.getElementById('centerCameraBtn')?.addEventListener('click', function() {
        if (viewer3D) {
            viewer3D.centerCameraOnProxies();
        }
    });

    // Helper functions
    async function loadSessionProxies(sessionId) {
        try {
            const response = await fetch(`/api/3d-builder/session/${sessionId}`);
            const data = await response.json();

            if (!data.success) {
                throw new Error(data.error);
            }

            // Get full proxy data (session endpoint returns summary, we need individual proxies)
            const proxiesResponse = await fetch(`/api/3d-builder/session/${sessionId}/proxies`);
            if (proxiesResponse.ok) {
                const proxiesData = await proxiesResponse.json();
                currentProxies = proxiesData.proxies || [];
            } else {
                // Fallback: load proxies individually
                currentProxies = [];
                for (const usId of data.session.us_ids || []) {
                    const proxyResp = await fetch(`/api/3d-builder/proxy/${usId}?session_id=${sessionId}`);
                    if (proxyResp.ok) {
                        const proxyData = await proxyResp.json();
                        if (proxyData.success) {
                            currentProxies.push(proxyData.proxy);
                        }
                    }
                }
            }

            // Initialize viewer if not already done
            if (!viewer3D) {
                // Check if THREE is loaded
                if (typeof THREE === 'undefined') {
                    console.error('THREE.js library not loaded yet');
                    showAlert('3D Library still loading, please wait...', 'warning');
                    return;
                }

                const container = document.getElementById('viewerContainer');
                viewer3D = new StratigraphicViewer3D(container);

                // Setup callbacks
                viewer3D.onProxySelect = function(proxy) {
                    if (proxy) {
                        document.getElementById('selectedProxy').textContent = `US ${proxy.us_id}`;
                        showProxyInfoPanel(proxy);
                    } else {
                        document.getElementById('selectedProxy').textContent = 'None';
                        hideProxyInfoPanel();
                    }
                };

                viewer3D.onProxyHover = function(proxy) {
                    // Optional: Show tooltip on hover
                };
            }

            // Load proxies into viewer
            if (currentProxies.length > 0) {
                viewer3D.loadProxies(currentProxies);
                document.getElementById('proxyCount').textContent = currentProxies.length;

                // Populate period filter with available periods
                populatePeriodFilter();
            }

        } catch (error) {
            console.error('Error loading session proxies:', error);
            showAlert('Error loading 3D viewer: ' + error.message, 'danger');
        }
    }

    function showSessionResults(data) {
        document.getElementById('sessionId').textContent = data.session_id;
        document.getElementById('proxiesCount').textContent = data.proxies_count;
        document.getElementById('sessionResults').classList.remove('d-none');
    }

    function showAlert(message, type = 'info', loading = false) {
        const alertDiv = document.getElementById('statusAlert');
        const messageDiv = document.getElementById('statusMessage');

        alertDiv.className = `alert alert-${type}`;
        messageDiv.textContent = message;
        alertDiv.classList.remove('d-none');

        if (!loading) {
            setTimeout(() => alertDiv.classList.add('d-none'), 5000);
        }
    }

    // ========================================================================
    // Proxy Info Panel Functions
    // ========================================================================

    let currentSelectedProxy = null;

    function showProxyInfoPanel(proxy) {
        currentSelectedProxy = proxy;

        // Show panel
        const panel = document.getElementById('proxyInfoPanel');
        panel.classList.remove('d-none');

        // Scroll to panel
        panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

        // Populate basic header
        const stratig = proxy.stratigraphic_data || {};
        const chronology = proxy.chronology || {};
        const relationships = proxy.relationships || {};

        document.getElementById('proxyUsLabel').textContent = `US ${proxy.us_id}`;
        document.getElementById('proxyUsTitle').textContent = stratig.interpretazione || '-';
        document.getElementById('proxySite').textContent = stratig.sito || '-';
        document.getElementById('proxyArea').textContent = stratig.area || '-';

        // Populate Basic tab
        document.getElementById('proxyUnitType').textContent = stratig.unita_tipo || '-';
        document.getElementById('proxyDefinition').textContent = stratig.definizione_stratigrafica || '-';
        document.getElementById('proxyFormation').textContent = stratig.formazione || '-';
        document.getElementById('proxyInterpretation').textContent = stratig.interpretazione || '-';
        document.getElementById('proxySector').textContent = stratig.settore || '-';
        document.getElementById('proxyQuotaMin').textContent =
            stratig.quota_min != null ? stratig.quota_min.toFixed(2) + ' m' : '-';
        document.getElementById('proxyQuotaMax').textContent =
            stratig.quota_max != null ? stratig.quota_max.toFixed(2) + ' m' : '-';
        document.getElementById('proxyDescription').textContent = stratig.descrizione || '-';

        // Populate Stratigraphy tab
        document.getElementById('proxyConsistency').textContent = stratig.consistenza || '-';
        document.getElementById('proxyColor').textContent = stratig.colore || '-';
        document.getElementById('proxyInclusions').textContent = stratig.inclusi || '-';
        document.getElementById('proxyLengthMax').textContent =
            stratig.lunghezza_max != null ? stratig.lunghezza_max.toFixed(2) + ' m' : '-';
        document.getElementById('proxyHeightMax').textContent =
            stratig.altezza_max != null ? stratig.altezza_max.toFixed(2) + ' m' : '-';
        document.getElementById('proxyDepthMax').textContent =
            stratig.profondita_max != null ? stratig.profondita_max.toFixed(2) + ' m' : '-';

        // Populate Chronology tab
        document.getElementById('proxyPeriod').textContent = chronology.period_name || 'Unknown';
        document.getElementById('proxyPhase').textContent = chronology.fase || '-';
        document.getElementById('proxyCronInitial').textContent = chronology.cron_iniziale || '-';
        document.getElementById('proxyCronFinal').textContent = chronology.cron_finale || '-';

        // Format dating range
        if (chronology.dating_start != null) {
            const startLabel = chronology.dating_start < 0 ?
                `${Math.abs(chronology.dating_start)} BCE` : `${chronology.dating_start} CE`;
            document.getElementById('proxyDatingStart').textContent = startLabel;
        } else {
            document.getElementById('proxyDatingStart').textContent = '-';
        }

        if (chronology.dating_end != null) {
            const endLabel = chronology.dating_end < 0 ?
                `${Math.abs(chronology.dating_end)} BCE` : `${chronology.dating_end} CE`;
            document.getElementById('proxyDatingEnd').textContent = endLabel;
        } else {
            document.getElementById('proxyDatingEnd').textContent = '-';
        }

        document.getElementById('proxyReliability').textContent = chronology.affidabilita || '-';

        // Populate Relationships tab
        const formatRelList = (usList) => {
            if (!usList || usList.length === 0) return '<em class="text-muted">None</em>';
            return usList.map(us => `<span class="badge bg-secondary me-1">US ${us}</span>`).join(' ');
        };

        document.getElementById('proxyCovers').innerHTML = formatRelList(relationships.covers);
        document.getElementById('proxyCoveredBy').innerHTML = formatRelList(relationships.covered_by);
        document.getElementById('proxyFills').innerHTML = formatRelList(relationships.fills);
        document.getElementById('proxyFilledBy').innerHTML = formatRelList(relationships.filled_by);

        const cuts = relationships.cuts || [];
        const cutBy = relationships.cut_by || [];
        const allCuts = [...cuts, ...cutBy];
        document.getElementById('proxyCuts').innerHTML = formatRelList(allCuts);
    }

    function hideProxyInfoPanel() {
        currentSelectedProxy = null;
        document.getElementById('proxyInfoPanel').classList.add('d-none');
    }

    // Close proxy info panel button
    document.getElementById('closeProxyInfoBtn')?.addEventListener('click', function() {
        hideProxyInfoPanel();

        // Deselect in viewer
        if (viewer3D) {
            viewer3D.deselectProxy();
        }
    });

    // Show/Hide proxy visibility buttons
    document.getElementById('showProxyBtn')?.addEventListener('click', function() {
        if (currentSelectedProxy && viewer3D) {
            viewer3D.updateProxyVisibility(currentSelectedProxy.us_id, true);
            showAlert(`US ${currentSelectedProxy.us_id} is now visible`, 'success');
        }
    });

    document.getElementById('hideProxyBtn')?.addEventListener('click', function() {
        if (currentSelectedProxy && viewer3D) {
            viewer3D.updateProxyVisibility(currentSelectedProxy.us_id, false);
            showAlert(`US ${currentSelectedProxy.us_id} is now hidden`, 'info');
        }
    });

    async function loadActiveSessions() {
        try {
            const response = await fetch('/api/3d-builder/sessions');
            const data = await response.json();

            if (data.success && data.sessions.length > 0) {
                document.getElementById('statSessions').textContent = data.count;
                // TODO: Render sessions list
            }
        } catch (error) {
            console.error('Error loading sessions:', error);
        }
    }

    // ========================================================================
    // Real-time Event Stream (SSE)
    // ========================================================================

    let eventSource = null;
    let reconnectTimeout = null;

    function connectEventStream(sessionId) {
        // Connect to SSE event stream for real-time updates from Blender
        // sessionId: Session ID to filter events (optional)

        // Disconnect existing connection
        disconnectEventStream();

        currentSessionId = sessionId;

        // Build URL with optional session filter
        let url = '/api/3d-builder/events';
        if (sessionId) {
            url += `?session_id=${sessionId}`;
        }

        console.log(`Connecting to event stream: ${url}`);

        try {
            eventSource = new EventSource(url);

            // Connection opened
            eventSource.addEventListener('connected', function(e) {
                console.log('SSE connected:', e.data);
            });

            // Proxy created event
            eventSource.addEventListener('proxy_created', function(e) {
                const data = JSON.parse(e.data);
                console.log('Proxy created:', data);

                // Add proxy to current proxies list
                if (data.data.proxy_data && viewer3D) {
                    currentProxies.push(data.data.proxy_data);
                    viewer3D.loadProxies([data.data.proxy_data]);
                    showAlert(`Proxy US ${data.data.proxy_data.us_id} created`, 'success');
                }
            });

            // Proxy updated event
            eventSource.addEventListener('proxy_updated', function(e) {
                const data = JSON.parse(e.data);
                console.log('Proxy updated:', data);

                const proxyId = data.data.proxy_id;
                const updates = data.data.updates;

                // Update proxy in current list
                const proxy = currentProxies.find(p => p.us_id === proxyId);
                if (proxy && updates) {
                    Object.assign(proxy, updates);
                    // Refresh viewer if needed
                }
            });

            // Visibility changed event
            eventSource.addEventListener('visibility_changed', function(e) {
                const data = JSON.parse(e.data);
                console.log('Visibility changed:', data);

                if (viewer3D) {
                    viewer3D.updateProxyVisibility(data.data.proxy_id, data.data.visible);
                }
            });

            // Transparency changed event
            eventSource.addEventListener('transparency_changed', function(e) {
                const data = JSON.parse(e.data);
                console.log('Transparency changed:', data);

                if (viewer3D) {
                    viewer3D.updateProxyTransparency(data.data.proxy_id, data.data.alpha);
                }
            });

            // Material applied event
            eventSource.addEventListener('material_applied', function(e) {
                const data = JSON.parse(e.data);
                console.log('Material applied:', data);
                // Update material in viewer if needed
            });

            // Scene cleared event
            eventSource.addEventListener('scene_cleared', function(e) {
                const data = JSON.parse(e.data);
                console.log('Scene cleared:', data);

                if (viewer3D) {
                    currentProxies = [];
                    viewer3D.clearScene();
                    showAlert('Scene cleared', 'info');
                }
            });

            // Export complete event
            eventSource.addEventListener('export_complete', function(e) {
                const data = JSON.parse(e.data);
                console.log('Export complete:', data);
                showAlert('3D export completed', 'success');
            });

            // Batch complete event
            eventSource.addEventListener('batch_complete', function(e) {
                const data = JSON.parse(e.data);
                console.log('Batch complete:', data);
                showAlert(`Batch operation complete: ${data.data.created_count} proxies`, 'success');
            });

            // Error event
            eventSource.addEventListener('error_event', function(e) {
                const data = JSON.parse(e.data);
                console.error('Blender error:', data);
                showAlert(`Error: ${data.data.message}`, 'danger');
            });

            // Connection error
            eventSource.onerror = function(error) {
                console.error('SSE connection error:', error);

                // Attempt reconnection after 5 seconds
                if (eventSource.readyState === EventSource.CLOSED) {
                    console.log('SSE connection closed, attempting reconnect...');
                    disconnectEventStream();

                    reconnectTimeout = setTimeout(() => {
                        if (currentSessionId) {
                            connectEventStream(currentSessionId);
                        }
                    }, 5000);
                }
            };

        } catch (error) {
            console.error('Error creating EventSource:', error);
        }
    }

    function disconnectEventStream() {
        // Disconnect from SSE event stream
        if (reconnectTimeout) {
            clearTimeout(reconnectTimeout);
            reconnectTimeout = null;
        }

        if (eventSource) {
            eventSource.close();
            eventSource = null;
            console.log('SSE disconnected');
        }
    }

    // Disconnect on page unload
    window.addEventListener('beforeunload', function() {
        disconnectEventStream();
    });

    // Load initial data
    loadActiveSessions();

    // ============================================================================
    // REAL-TIME BLENDER STREAMING (Socket.IO)
    // ============================================================================

    let blenderSocket = null;
    let blenderConnected = false;

    function initBlenderSocket() {
        if (blenderSocket) return; // Already initialized

        console.log('[Blender Socket] Initializing Socket.IO connection...');
        blenderSocket = io();

        // Connection events
        blenderSocket.on('connect', () => {
            console.log('[Blender Socket] Connected to server');
        });

        blenderSocket.on('disconnect', () => {
            console.log('[Blender Socket] Disconnected from server');
            blenderConnected = false;
            updateBlenderStatus(false);
        });

        // Blender connection status
        blenderSocket.on('blender_connected', (data) => {
            blenderConnected = true;
            console.log('[Blender] Connected:', data.blender_version);
            updateBlenderStatus(true, data.blender_version);
            showAlert(`Blender ${data.blender_version} connected!`, 'success');
        });

        blenderSocket.on('blender_disconnected', () => {
            blenderConnected = false;
            console.log('[Blender] Disconnected');
            updateBlenderStatus(false);
            showAlert('Blender disconnected', 'warning');
        });

        // Scene updates
        blenderSocket.on('blender_scene_update', (data) => {
            console.log('[Blender] Scene update received:', data);
            updateSceneFromBlender(data);
        });

        blenderSocket.on('blender_object_created', (data) => {
            console.log('[Blender] Object created:', data.object_name);
            createProxyFromBlender(data);
        });

        blenderSocket.on('blender_object_updated', (data) => {
            console.log('[Blender] Object updated:', data.object_name);
            updateProxyFromBlender(data);
        });

        blenderSocket.on('blender_object_deleted', (data) => {
            console.log('[Blender] Object deleted:', data.object_name);
            deleteProxyFromBlender(data);
        });

        blenderSocket.on('blender_material_updated', (data) => {
            console.log('[Blender] Material updated:', data.material_name);
            updateMaterialFromBlender(data);
        });

        blenderSocket.on('blender_build_progress', (data) => {
            console.log(`[Blender Build] ${data.message} (${data.percentage}%)`);
            updateBuildProgress(data);
        });

        console.log('[Blender Socket] Event listeners registered');
    }

    // Update Blender connection status in UI
    function updateBlenderStatus(connected, version) {
        const statusDiv = document.getElementById('blenderStatus');
        if (connected) {
            const versionText = version ? ` (${version})` : '';
            statusDiv.innerHTML = `<i class="fas fa-circle text-success"></i> Connected${versionText}`;
        } else {
            statusDiv.innerHTML = '<i class="fas fa-circle text-secondary"></i> Not Connected';
        }
    }

    // Update complete scene from Blender
    function updateSceneFromBlender(sceneData) {
        if (!viewer3D) {
            console.warn('[Blender] Viewer not initialized, initializing now...');
            const container = document.getElementById('viewerContainer');
            if (container && typeof THREE !== 'undefined') {
                viewer3D = new StratigraphicViewer3D(container);
                setupViewerCallbacks();
            } else {
                console.error('[Blender] Cannot initialize viewer');
                return;
            }
        }

        // Clear current proxies
        currentProxies = [];
        viewer3D.clearScene();

        // Rebuild from Blender data
        if (sceneData.objects && Array.isArray(sceneData.objects)) {
            sceneData.objects.forEach(obj => {
                createProxyFromBlender(obj);
            });
            console.log(`[Blender] Loaded ${sceneData.objects.length} objects from scene update`);
        }
    }

    // Create proxy from Blender object data
    function createProxyFromBlender(objData) {
        if (!viewer3D) return;

        // Convert Blender object to proxy format
        const proxyData = {
            us_id: objData.proxy_id || objData.object_name,
            stratigraphic_data: {
                sito: 'Blender Stream',
                us: objData.object_name,
                d_interpretativa: objData.object_type
            },
            geometry: {
                dimensions: {
                    x: objData.scale ? objData.scale[0] : 1.0,
                    y: objData.scale ? objData.scale[2] : 1.0,
                    z: objData.scale ? objData.scale[1] : 1.0
                },
                position: {
                    x: objData.location ? objData.location[0] : 0,
                    y: objData.location ? objData.location[2] : 0,
                    z: objData.location ? -objData.location[1] : 0
                },
                rotation: {
                    x: objData.rotation ? objData.rotation[0] : 0,
                    y: objData.rotation ? objData.rotation[2] : 0,
                    z: objData.rotation ? objData.rotation[1] : 0
                }
            },
            material: {
                color: '#808080',
                roughness: 0.7,
                metalness: 0
            }
        };

        // Apply material if available
        if (objData.material) {
            const baseColor = objData.material.base_color;
            if (baseColor && baseColor.length >= 3) {
                const r = Math.round(baseColor[0] * 255);
                const g = Math.round(baseColor[1] * 255);
                const b = Math.round(baseColor[2] * 255);
                proxyData.material.color = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
            }
            if (objData.material.roughness !== undefined) {
                proxyData.material.roughness = objData.material.roughness;
            }
            if (objData.material.metallic !== undefined) {
                proxyData.material.metalness = objData.material.metallic;
            }
        }

        // Add to current proxies and load into viewer
        currentProxies.push(proxyData);
        viewer3D.loadProxies([proxyData]);

        // Update proxy count
        document.getElementById('proxyCount').textContent = currentProxies.length;

        showAlert(`Proxy created: ${objData.object_name}`, 'info');
    }

    // Update proxy from Blender
    function updateProxyFromBlender(updateData) {
        if (!viewer3D) return;

        const proxyId = updateData.object_name;

        // Find proxy in current list
        const proxy = currentProxies.find(p => p.us_id === proxyId || p.stratigraphic_data.us === proxyId);
        if (!proxy) {
            console.warn(`[Blender] Proxy not found: ${proxyId}`);
            return;
        }

        // Update proxy data
        if (updateData.new_values) {
            if (updateData.new_values.location) {
                proxy.geometry.position = {
                    x: updateData.new_values.location[0],
                    y: updateData.new_values.location[2],
                    z: -updateData.new_values.location[1]
                };
            }
            if (updateData.new_values.rotation) {
                proxy.geometry.rotation = {
                    x: updateData.new_values.rotation[0],
                    y: updateData.new_values.rotation[2],
                    z: updateData.new_values.rotation[1]
                };
            }
            if (updateData.new_values.scale) {
                proxy.geometry.dimensions = {
                    x: updateData.new_values.scale[0],
                    y: updateData.new_values.scale[2],
                    z: updateData.new_values.scale[1]
                };
            }

            // Reload proxy in viewer
            viewer3D.loadProxies([proxy]);
        }
    }

    // Delete proxy from viewer
    function deleteProxyFromBlender(data) {
        if (!viewer3D) return;

        const proxyId = data.object_name;

        // Remove from current proxies
        const index = currentProxies.findIndex(p => p.us_id === proxyId || p.stratigraphic_data.us === proxyId);
        if (index !== -1) {
            currentProxies.splice(index, 1);
            // Reload all proxies (viewer clears and rebuilds)
            viewer3D.clearScene();
            viewer3D.loadProxies(currentProxies);
            document.getElementById('proxyCount').textContent = currentProxies.length;
            showAlert(`Proxy deleted: ${proxyId}`, 'info');
        }
    }

    // Update material from Blender
    function updateMaterialFromBlender(data) {
        if (!viewer3D) return;

        const proxyId = data.object_name;
        const proxy = currentProxies.find(p => p.us_id === proxyId || p.stratigraphic_data.us === proxyId);

        if (proxy && data.base_color) {
            const r = Math.round(data.base_color[0] * 255);
            const g = Math.round(data.base_color[1] * 255);
            const b = Math.round(data.base_color[2] * 255);
            proxy.material.color = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
            proxy.material.roughness = data.roughness || 0.7;
            proxy.material.metalness = data.metallic || 0;

            // Reload proxy
            viewer3D.loadProxies([proxy]);
        }
    }

    // Update build progress bar
    function updateBuildProgress(data) {
        // Show progress in chat as system message
        const progressMsg = `${data.agent || 'Building'}: ${data.message} (${Math.round(data.percentage)}%)`;
        addChatMessage(progressMsg, false, false, true);

        // Update session info card
        if (data.total_objects && data.built_objects) {
            const currentProxiesCountEl = document.getElementById('currentProxiesCount');
            if (currentProxiesCountEl) {
                currentProxiesCountEl.textContent = `${data.built_objects}/${data.total_objects}`;
            }
        }
    }

    // Setup viewer callbacks
    function setupViewerCallbacks() {
        if (!viewer3D) return;

        viewer3D.onProxySelect = function(proxy) {
            if (proxy) {
                document.getElementById('selectedProxy').textContent = `US ${proxy.us_id}`;
                showProxyInfoPanel(proxy);
            } else {
                document.getElementById('selectedProxy').textContent = 'None';
                hideProxyInfoPanel();
            }
        };
    }

    // Initialize Blender Socket.IO connection
    initBlenderSocket();

    console.log('[3D Builder] Page fully initialized with Blender real-time streaming');
});
</script>
{% endblock %}