{% extends 'base.html.twig' %}

{% block title %}Visualiseur 2D - Jantes Showroom{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/visualizer-poc.css') }}">
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('scripts/visualizer-poc.js') }}"></script>
{% endblock %}

{% block body %}
<div class="page-shell" data-config="{{ configuration|json_encode|e('html_attr') }}">
    <header class="topbar">
        <div class="brand">
            <img src="{{ asset('images/spg-logo.png') }}" alt="Logo SPG">
            <div>
                <span class="brand-title">Jantes Showroom</span>
                <span class="brand-sub">Visualiseur 2D · Démonstration DEV</span>
            </div>
        </div>
        <div class="poc-badge" role="status">
            <span class="poc-badge-dot"></span>
            Environnement DEV · visualiseur dynamique
        </div>
    </header>

    <main class="visualizer-grid">
        <section class="stage-card" aria-label="Zone de visualisation 2D">
            <div class="stage-header">
                <div>
                    <h1 class="stage-title">{{ vehicule.marque }} {{ vehicule.modele }} — {{ jante.reference }}</h1>
                    <p class="stage-subtitle">Positionnement visuel des deux roues sur le véhicule de profil</p>
                </div>
            </div>

            <div class="status-row">
                <span class="status-badge status-badge--info">{{ compatibilite.statut.libelle() }}</span>
                <span class="status-badge status-badge--success">Données persistantes</span>
                <span class="status-badge status-badge--warning">Environnement DEV</span>
            </div>

            <div class="stage-viewport" id="stageViewport">
                <img
                    src="{{ configuration.vehicle.imageUrl }}"
                    alt="{{ configuration.vehicle.label }} de profil"
                    class="vehicle-image"
                    onerror="this.style.display='none'; this.parentElement.classList.add('image-error'); this.parentElement.querySelector('.image-error-message').style.display='block';"
                >
                <div class="image-error-message">Image du véhicule indisponible depuis Supabase.</div>

                <div class="wheel-layer" id="frontWheel">
                    <img
                        src="{{ configuration.wheel.imageUrl }}"
                        alt="Roue {{ configuration.wheel.reference }} avant"
                        class="wheel-image"
                        onerror="this.style.display='none'; this.parentElement.parentElement.classList.add('image-error'); this.parentElement.parentElement.querySelector('.image-error-message').style.display='block';"
                    >
                    <div class="guide-overlay">
                        <div class="guide-circle"></div>
                        <div class="guide-center"></div>
                        <span class="guide-label">Avant</span>
                    </div>
                </div>

                <div class="wheel-layer" id="rearWheel">
                    <img
                        src="{{ configuration.wheel.imageUrl }}"
                        alt="Roue {{ configuration.wheel.reference }} arrière"
                        class="wheel-image"
                        onerror="this.style.display='none'; this.parentElement.parentElement.classList.add('image-error'); this.parentElement.parentElement.querySelector('.image-error-message').style.display='block';"
                    >
                    <div class="guide-overlay">
                        <div class="guide-circle"></div>
                        <div class="guide-center"></div>
                        <span class="guide-label">Arrière</span>
                    </div>
                </div>
            </div>

            <div class="tech-note">
                <strong>Véhicule :</strong> {{ configuration.vehicle.label }} · <strong>Angle :</strong> {{ configuration.vehicle.angle }} · <strong>Dimensions :</strong> {{ configuration.vehicle.width }} × {{ configuration.vehicle.height }} px · <strong>Roue :</strong> {{ configuration.wheel.reference }} · {{ configuration.wheel.width }} × {{ configuration.wheel.height }} px
            </div>

            <details class="tech-panel">
                <summary>Informations techniques</summary>
                <div class="tech-panel__body">
                    <dl>
                        <div><dt>Vehicle ID</dt><dd>{{ configuration.vehicle.id }}</dd></div>
                        <div><dt>Wheel ID</dt><dd>{{ configuration.wheel.id }}</dd></div>
                        <div><dt>Angle</dt><dd>{{ configuration.vehicle.angle }}</dd></div>
                        <div><dt>Dimensions véhicule</dt><dd>{{ configuration.vehicle.width }} × {{ configuration.vehicle.height }}</dd></div>
                        <div><dt>Dimensions roue</dt><dd>{{ configuration.wheel.width }} × {{ configuration.wheel.height }}</dd></div>
                    </dl>
                </div>
            </details>
        </section>

        <section class="panel-card" aria-label="Panneau de réglages et calibration">
            <h2 class="panel-title">Calibration des roues</h2>

            <div class="toolbar">
                <button type="button" class="btn btn-toggle active" id="toggleRimsBtn" title="Afficher ou masquer les nouvelles jantes">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>
                    Jantes
                </button>
                <button type="button" class="btn btn-toggle active" id="toggleGuidesBtn" title="Afficher ou masquer les repères de calibration">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18"/></svg>
                    Guides
                </button>
                <button type="button" class="btn btn-toggle" id="toggleMultiplyBtn" title="Activer / Désactiver mix-blend-mode: multiply">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/></svg>
                    Multiply
                </button>
            </div>

            <div class="wheel-group">
                <div class="wheel-group-header">
                    <h3 class="wheel-group-title"><span class="wheel-indicator"></span>Roue avant</h3>
                </div>
                <div class="control-row">
                    <div class="control-header"><label for="front_x_range">Position X (centre %)</label><span class="control-value" id="front_x_val">19.0%</span></div>
                    <div class="control-inputs"><input type="range" id="front_x_range" class="range-slider" min="0" max="100" step="0.1" value="19"><input type="number" id="front_x_num" class="number-input" min="0" max="100" step="0.1" value="19"></div>
                </div>
                <div class="control-row">
                    <div class="control-header"><label for="front_y_range">Position Y (centre %)</label><span class="control-value" id="front_y_val">70.0%</span></div>
                    <div class="control-inputs"><input type="range" id="front_y_range" class="range-slider" min="0" max="100" step="0.1" value="70"><input type="number" id="front_y_num" class="number-input" min="0" max="100" step="0.1" value="70"></div>
                </div>
                <div class="control-row">
                    <div class="control-header"><label for="front_size_range">Taille (diamètre % image)</label><span class="control-value" id="front_size_val">16.0%</span></div>
                    <div class="control-inputs"><input type="range" id="front_size_range" class="range-slider" min="5" max="35" step="0.1" value="16"><input type="number" id="front_size_num" class="number-input" min="5" max="35" step="0.1" value="16"></div>
                </div>
                <div class="control-row">
                    <div class="control-header"><label for="front_rotation_range">Rotation (degrés)</label><span class="control-value" id="front_rotation_val">0.0°</span></div>
                    <div class="control-inputs"><input type="range" id="front_rotation_range" class="range-slider" min="-30" max="30" step="0.5" value="0"><input type="number" id="front_rotation_num" class="number-input" min="-30" max="30" step="0.5" value="0"></div>
                </div>
            </div>

            <div class="wheel-group">
                <div class="wheel-group-header">
                    <h3 class="wheel-group-title"><span class="wheel-indicator"></span>Roue arrière</h3>
                </div>
                <div class="control-row">
                    <div class="control-header"><label for="rear_x_range">Position X (centre %)</label><span class="control-value" id="rear_x_val">81.0%</span></div>
                    <div class="control-inputs"><input type="range" id="rear_x_range" class="range-slider" min="0" max="100" step="0.1" value="81"><input type="number" id="rear_x_num" class="number-input" min="0" max="100" step="0.1" value="81"></div>
                </div>
                <div class="control-row">
                    <div class="control-header"><label for="rear_y_range">Position Y (centre %)</label><span class="control-value" id="rear_y_val">70.0%</span></div>
                    <div class="control-inputs"><input type="range" id="rear_y_range" class="range-slider" min="0" max="100" step="0.1" value="70"><input type="number" id="rear_y_num" class="number-input" min="0" max="100" step="0.1" value="70"></div>
                </div>
                <div class="control-row">
                    <div class="control-header"><label for="rear_size_range">Taille (diamètre % image)</label><span class="control-value" id="rear_size_val">16.0%</span></div>
                    <div class="control-inputs"><input type="range" id="rear_size_range" class="range-slider" min="5" max="35" step="0.1" value="16"><input type="number" id="rear_size_num" class="number-input" min="5" max="35" step="0.1" value="16"></div>
                </div>
                <div class="control-row">
                    <div class="control-header"><label for="rear_rotation_range">Rotation (degrés)</label><span class="control-value" id="rear_rotation_val">0.0°</span></div>
                    <div class="control-inputs"><input type="range" id="rear_rotation_range" class="range-slider" min="-30" max="30" step="0.5" value="0"><input type="number" id="rear_rotation_num" class="number-input" min="-30" max="30" step="0.5" value="0"></div>
                </div>
            </div>

            <div class="action-bar">
                <button type="button" class="btn btn-primary" id="copyJsonBtn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                    Copier la configuration JSON
                </button>
                <button type="button" class="btn" id="resetBtn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                    Revenir à la calibration enregistrée
                </button>
            </div>
        </section>
    </main>
</div>

<div class="toast" id="toast" role="alert" aria-live="polite">Configuration copiée</div>
{% endblock %}