{% extends "base.html" %}

{% block title %}{{ _('3D Model Viewer') }}{% endblock %}

{% block extra_css %}
<style>
    #viewer-container {
        width: 100%;
        height: 600px;
        background: #f0f0f0;
        border: 1px solid #ddd;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
    }

    model-viewer {
        width: 100%;
        height: 100%;
    }

    .viewer-controls {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 100;
        background: rgba(255, 255, 255, 0.9);
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .model-info {
        margin-top: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .model-info h5 {
        margin-bottom: 15px;
        color: #333;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    .info-item {
        padding: 10px;
        background: white;
        border-left: 3px solid #007bff;
        border-radius: 4px;
    }

    .info-label {
        font-size: 0.85rem;
        color: #666;
        margin-bottom: 5px;
    }

    .info-value {
        font-size: 1rem;
        font-weight: 500;
        color: #333;
    }

    .back-button {
        margin-bottom: 20px;
    }
</style>

<!-- model-viewer web component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="back-button">
        <a href="{{ url_for('site_detail', site_id=site_id) if site_id else url_for('index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> {{ _('Back to Site') }}
        </a>
    </div>

    <div class="row">
        <div class="col-12">
            <h2>
                <i class="bi bi-box"></i> {{ _('3D Model Viewer') }}
            </h2>
            <p class="text-muted">{{ _('Interactive 3D visualization of archaeological context') }}</p>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-12">
            <div id="viewer-container">
                <model-viewer
                    id="model-viewer"
                    src="{{ model_url }}"
                    alt="{{ _('3D model of') }} {{ us_name if us_name else site_name }}"
                    auto-rotate
                    camera-controls
                    ar
                    environment-image="neutral"
                    shadow-intensity="1"
                    exposure="1"
                    loading="eager">

                    <div class="progress-bar hide" slot="progress-bar">
                        <div class="update-bar"></div>
                    </div>

                    <div id="lazy-load-poster" slot="poster"></div>
                    <div id="button-load" slot="poster">{{ _('Click to load 3D model') }}</div>
                </model-viewer>

                <div class="viewer-controls">
                    <div class="btn-group-vertical btn-group-sm">
                        <button class="btn btn-outline-primary" onclick="resetCamera()" title="{{ _('Reset Camera') }}">
                            <i class="bi bi-arrow-counterclockwise"></i>
                        </button>
                        <button class="btn btn-outline-primary" onclick="toggleAutoRotate()" title="{{ _('Toggle Rotation') }}">
                            <i class="bi bi-arrow-repeat"></i>
                        </button>
                        <button class="btn btn-outline-primary" onclick="toggleWireframe()" title="{{ _('Toggle Wireframe') }}">
                            <i class="bi bi-grid-3x3"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="model-info">
                <h5>{{ _('Model Information') }}</h5>
                <div class="info-grid">
                    {% if site_name %}
                    <div class="info-item">
                        <div class="info-label">{{ _('Site') }}</div>
                        <div class="info-value">{{ site_name }}</div>
                    </div>
                    {% endif %}

                    {% if us_name %}
                    <div class="info-item">
                        <div class="info-label">{{ _('Stratigraphic Unit') }}</div>
                        <div class="info-value">US {{ us_name }}</div>
                    </div>
                    {% endif %}

                    {% if model_format %}
                    <div class="info-item">
                        <div class="info-label">{{ _('Format') }}</div>
                        <div class="info-value">{{ model_format|upper }}</div>
                    </div>
                    {% endif %}

                    {% if model_size %}
                    <div class="info-item">
                        <div class="info-label">{{ _('File Size') }}</div>
                        <div class="info-value">{{ (model_size / 1024 / 1024)|round(2) }} MB</div>
                    </div>
                    {% endif %}

                    {% if filename %}
                    <div class="info-item">
                        <div class="info-label">{{ _('Filename') }}</div>
                        <div class="info-value">{{ filename }}</div>
                    </div>
                    {% endif %}
                </div>

                {% if description %}
                <div class="mt-3">
                    <h6>{{ _('Description') }}</h6>
                    <p>{{ description }}</p>
                </div>
                {% endif %}

                <div class="mt-3">
                    <a href="{{ download_url }}" class="btn btn-primary" download>
                        <i class="bi bi-download"></i> {{ _('Download Model') }}
                    </a>
                    <button class="btn btn-outline-secondary" onclick="shareModel()">
                        <i class="bi bi-share"></i> {{ _('Share') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const modelViewer = document.querySelector('#model-viewer');

    // Reset camera to initial position
    function resetCamera() {
        modelViewer.resetTurntableRotation();
        modelViewer.cameraOrbit = '0deg 75deg 105%';
        modelViewer.fieldOfView = '45deg';
    }

    // Toggle auto-rotate
    function toggleAutoRotate() {
        modelViewer.autoRotate = !modelViewer.autoRotate;
    }

    // Toggle wireframe (not directly supported by model-viewer, using custom attribute)
    let wireframeMode = false;
    function toggleWireframe() {
        wireframeMode = !wireframeMode;
        if (wireframeMode) {
            modelViewer.style.filter = 'invert(0.1)';
        } else {
            modelViewer.style.filter = 'none';
        }
    }

    // Share model URL
    function shareModel() {
        const url = window.location.href;
        if (navigator.share) {
            navigator.share({
                title: '{{ _("3D Model") }} - {{ site_name }}',
                text: '{{ _("View 3D archaeological model") }}',
                url: url
            });
        } else {
            // Fallback: copy to clipboard
            navigator.clipboard.writeText(url).then(() => {
                alert('{{ _("Link copied to clipboard") }}');
            });
        }
    }

    // Loading progress
    modelViewer.addEventListener('progress', (event) => {
        const progressBar = event.target.querySelector('.progress-bar');
        const updater = event.target.querySelector('.update-bar');
        updater.style.width = `${event.detail.totalProgress * 100}%`;
        if (event.detail.totalProgress === 1) {
            progressBar.classList.add('hide');
        } else {
            progressBar.classList.remove('hide');
        }
    });

    // Model loaded
    modelViewer.addEventListener('load', () => {
        console.log('3D model loaded successfully');
    });

    // Error handling
    modelViewer.addEventListener('error', (event) => {
        console.error('Error loading 3D model:', event);
        alert('{{ _("Error loading 3D model") }}');
    });
</script>
{% endblock %}