{% extends "admin/base_site.html" %}
{% load static %}

{% block title %}Assistant Ajout d'Œuvre - MCN Museum{% endblock %}

{% block extrastyle %}
{{ block.super }}
<style>
    .wizard-container {
        max-width: 1200px;
        margin: 20px auto;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .wizard-steps {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 2px solid #e0e0e0;
        background: linear-gradient(to right, #00853F, #FDEF42, #E31B23);
        border-radius: 10px 10px 0 0;
    }

    .wizard-step {
        flex: 1;
        text-align: center;
        padding: 10px;
        position: relative;
        color: white;
        opacity: 0.6;
    }

    .wizard-step.active {
        opacity: 1;
        font-weight: bold;
        transform: scale(1.1);
    }

    .wizard-step.completed {
        opacity: 1;
    }

    .wizard-content {
        padding: 30px;
    }

    .form-section {
        display: none;
    }

    .form-section.active {
        display: block;
        animation: fadeIn 0.3s;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .preview-image {
        max-width: 150px;
        max-height: 150px;
        margin: 5px;
        border-radius: 5px;
        border: 2px solid #ddd;
    }

    .language-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }

    .language-tab {
        padding: 10px 20px;
        border: 2px solid #e0e0e0;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s;
        background: white;
    }

    .language-tab.active {
        background: #FF5801;
        color: white;
        border-color: #FF5801;
    }

    .btn-mcn {
        background: #FF5801;
        color: white;
        padding: 12px 30px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        transition: all 0.3s;
    }

    .btn-mcn:hover {
        background: #e04d01;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 88, 1, 0.3);
    }

    .qr-preview {
        text-align: center;
        padding: 40px 20px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 10px;
    }

    .field-group {
        margin-bottom: 25px;
    }

    .field-group label {
        display: block;
        font-weight: bold;
        margin-bottom: 8px;
        color: #333;
    }

    .field-group input[type="text"],
    .field-group input[type="date"],
    .field-group input[type="number"],
    .field-group select,
    .field-group textarea {
        width: 100%;
        padding: 10px;
        border: 2px solid #e0e0e0;
        border-radius: 5px;
        font-size: 14px;
        transition: border-color 0.3s;
    }

    .field-group input:focus,
    .field-group select:focus,
    .field-group textarea:focus {
        border-color: #FF5801;
        outline: none;
    }

    .help-text {
        font-size: 12px;
        color: #666;
        margin-top: 5px;
    }

    .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
    }

    .info-box {
        padding: 15px;
        background: #e8f5e9;
        border-left: 4px solid #00853F;
        border-radius: 5px;
        margin: 20px 0;
    }

    .warning-box {
        padding: 15px;
        background: #fff3e0;
        border-left: 4px solid #FDEF42;
        border-radius: 5px;
        margin: 20px 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="wizard-container">
    <div class="wizard-steps">
        <div class="wizard-step active" data-step="1">
            <i class="fas fa-info-circle fa-2x"></i><br>
            <span>Informations</span>
        </div>
        <div class="wizard-step" data-step="2">
            <i class="fas fa-language fa-2x"></i><br>
            <span>Traductions</span>
        </div>
        <div class="wizard-step" data-step="3">
            <i class="fas fa-images fa-2x"></i><br>
            <span>Médias</span>
        </div>
        <div class="wizard-step" data-step="4">
            <i class="fas fa-vr-cardboard fa-2x"></i><br>
            <span>Vue 3D</span>
        </div>
        <div class="wizard-step" data-step="5">
            <i class="fas fa-qrcode fa-2x"></i><br>
            <span>QR Code</span>
        </div>
    </div>

    <form id="artwork-form" method="POST" enctype="multipart/form-data" action="{% url 'artwork_creation_wizard' %}">
        {% csrf_token %}

        <div class="wizard-content">
            <!-- ÉTAPE 1: Informations de base -->
            <div class="form-section active" data-section="1">
                <h2>📋 Informations de base</h2>

                <div class="field-group">
                    <label>Code de référence *</label>
                    <input type="text" name="reference_code" required placeholder="Ex: MCN-2024-001">
                    <div class="help-text">Code unique pour identifier l'œuvre</div>
                </div>

                <div class="grid-2">
                    <div class="field-group">
                        <label>Catégorie *</label>
                        <select name="category" required>
                            <option value="">Sélectionnez...</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}">{{ category.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="field-group">
                        <label>Date d'acquisition</label>
                        <input type="date" name="acquisition_date">
                    </div>
                </div>

                <div class="grid-2">
                    <div class="field-group">
                        <label>Origine</label>
                        <input type="text" name="origin" placeholder="Ex: Sénégal, Dakar">
                    </div>

                    <div class="field-group">
                        <label>Période</label>
                        <input type="text" name="period" placeholder="Ex: XIXe siècle">
                    </div>
                </div>

                <div class="field-group">
                    <label>
                        <input type="checkbox" name="is_published"> Publier immédiatement
                    </label>
                    <label style="margin-left: 20px;">
                        <input type="checkbox" name="is_featured"> Mettre en avant
                    </label>
                </div>
            </div>

            <!-- ÉTAPE 2: Traductions -->
            <div class="form-section" data-section="2">
                <h2>🌍 Traductions multilingues</h2>

                <div class="language-tabs">
                    <div class="language-tab active" data-lang="fr">🇫🇷 Français</div>
                    <div class="language-tab" data-lang="en">🇬🇧 English</div>
                    <div class="language-tab" data-lang="wo">🇸🇳 Wolof</div>
                </div>

                <!-- Français -->
                <div class="translation-content" data-trans="fr">
                    <div class="field-group">
                        <label>Titre (FR) *</label>
                        <input type="text" name="title_fr" required>
                    </div>

                    <div class="field-group">
                        <label>Artiste (FR)</label>
                        <input type="text" name="artist_fr">
                    </div>

                    <div class="field-group">
                        <label>Description (FR) *</label>
                        <textarea name="description_fr" required rows="5"></textarea>
                    </div>

                    <div class="field-group">
                        <label>Contexte historique (FR)</label>
                        <textarea name="historical_context_fr" rows="4"></textarea>
                    </div>

                    <div class="field-group">
                        <label>Signification culturelle (FR)</label>
                        <textarea name="cultural_significance_fr" rows="4"></textarea>
                    </div>
                </div>

                <!-- Anglais -->
                <div class="translation-content" data-trans="en" style="display: none;">
                    <div class="field-group">
                        <label>Title (EN)</label>
                        <input type="text" name="title_en">
                    </div>

                    <div class="field-group">
                        <label>Artist (EN)</label>
                        <input type="text" name="artist_en">
                    </div>

                    <div class="field-group">
                        <label>Description (EN)</label>
                        <textarea name="description_en" rows="5"></textarea>
                    </div>
                </div>

                <!-- Wolof -->
                <div class="translation-content" data-trans="wo" style="display: none;">
                    <div class="field-group">
                        <label>Titre (WO)</label>
                        <input type="text" name="title_wo">
                    </div>

                    <div class="field-group">
                        <label>Description (WO)</label>
                        <textarea name="description_wo" rows="5"></textarea>
                    </div>
                </div>

                <div class="info-box">
                    <label>
                        <input type="checkbox" name="auto_generate_audio" checked>
                        <strong>Générer automatiquement les audioguides</strong>
                    </label>
                    <div class="help-text">Les audioguides seront créés à partir des descriptions</div>
                </div>
            </div>

            <!-- ÉTAPE 3: Médias -->
            <div class="form-section" data-section="3">
                <h2>🖼️ Images et Vidéos</h2>

                <div class="field-group">
                    <label>Images principales *</label>
                    <input type="file" name="images" multiple accept="image/*" id="image-upload" required>
                    <div class="help-text">Format JPG/PNG, résolution min 1920x1080px</div>
                    <div id="image-preview" style="display: flex; flex-wrap: wrap; margin-top: 10px;"></div>
                </div>

                <div class="field-group">
                    <label>Vidéo de présentation (optionnel)</label>
                    <input type="file" name="video" accept="video/*" id="video-upload">
                    <div class="help-text">Format MP4, max 50MB</div>
                </div>
            </div>

            <!-- ÉTAPE 4: Vue 3D -->
            <div class="form-section" data-section="4">
                <h2>🌐 Vue 3D Interactive (optionnel)</h2>

                <div class="field-group">
                    <label>
                        <input type="checkbox" name="enable_3d" id="enable-3d">
                        <strong>Activer la vue 3D pour cette œuvre</strong>
                    </label>
                </div>

                <div id="3d-options" style="display: none;">
                    <div class="field-group">
                        <label>Image panoramique 360° *</label>
                        <input type="file" name="panorama_image" accept="image/*" id="panorama-upload">
                        <div class="help-text">Format équirectangulaire (ratio 2:1), min 4096x2048px</div>
                        <div id="panorama-preview" style="margin-top: 10px;"></div>
                    </div>

                    <div class="grid-3">
                        <div class="field-group">
                            <label>Yaw initial (0-360°)</label>
                            <input type="number" name="initial_yaw" value="0" min="0" max="360">
                        </div>
                        <div class="field-group">
                            <label>Pitch initial (-90 à 90°)</label>
                            <input type="number" name="initial_pitch" value="0" min="-90" max="90">
                        </div>
                        <div class="field-group">
                            <label>FOV initial (30-120°)</label>
                            <input type="number" name="initial_fov" value="75" min="30" max="120">
                        </div>
                    </div>

                    <div class="field-group">
                        <label>
                            <input type="checkbox" name="auto_rotate"> Rotation automatique
                        </label>
                        <input type="number" name="auto_rotate_speed" value="2" step="0.5"
                               placeholder="Vitesse" style="width: 100px; margin-left: 10px;">
                    </div>

                    <div class="field-group">
                        <label>Audio d'ambiance (optionnel)</label>
                        <input type="file" name="ambient_audio" accept="audio/*">
                        <div class="help-text">Format MP3, max 5MB</div>
                    </div>
                </div>
            </div>

            <!-- ÉTAPE 5: QR Code -->
            <div class="form-section" data-section="5">
                <h2>📱 Génération du QR Code</h2>

                <div class="qr-preview">
                    <i class="fas fa-qrcode" style="font-size: 100px; color: #FF5801;"></i>
                    <h3 style="margin-top: 20px;">Le QR code sera généré automatiquement</h3>
                    <p style="color: #666; margin-top: 10px;">
                        Lors de la sauvegarde, un QR code unique sera créé.<br>
                        Vous pourrez le télécharger en PDF pour impression.
                    </p>
                </div>

                <div class="warning-box" style="margin-top: 30px;">
                    <h4>📋 Instructions d'utilisation :</h4>
                    <ol style="line-height: 2; margin-top: 10px;">
                        <li>Le QR code sera généré dès la sauvegarde de l'œuvre</li>
                        <li>Téléchargez le PDF depuis la liste des œuvres (bouton "QR PDF")</li>
                        <li>Imprimez sur papier de qualité (format A4 recommandé)</li>
                        <li>Plastifiez pour une meilleure durabilité</li>
                        <li>Installez à côté de l'œuvre (hauteur 1,20-1,50m)</li>
                    </ol>
                </div>

                <div class="info-box" style="margin-top: 20px;">
                    <strong>💡 Conseil :</strong> Les visiteurs pourront scanner le QR code directement
                    avec l'appareil photo de leur téléphone pour accéder instantanément aux détails de l'œuvre.
                </div>
            </div>
        </div>

        <!-- Boutons de navigation -->
        <div style="padding: 20px; border-top: 2px solid #e0e0e0; display: flex; justify-content: space-between; background: #f5f5f5;">
            <button type="button" id="prev-btn" class="btn-mcn" style="background: #666;" disabled>
                <i class="fas fa-arrow-left"></i> Précédent
            </button>

            <button type="button" id="next-btn" class="btn-mcn">
                Suivant <i class="fas fa-arrow-right"></i>
            </button>

            <button type="submit" id="submit-btn" class="btn-mcn" style="display: none; background: #00853F;">
                <i class="fas fa-save"></i> Enregistrer l'œuvre
            </button>
        </div>
    </form>
</div>

<script>
let currentStep = 1;
const totalSteps = 5;

document.getElementById('next-btn').addEventListener('click', () => {
    if (validateStep(currentStep) && currentStep < totalSteps) {
        currentStep++;
        updateWizard();
    }
});

document.getElementById('prev-btn').addEventListener('click', () => {
    if (currentStep > 1) {
        currentStep--;
        updateWizard();
    }
});

function updateWizard() {
    document.querySelectorAll('.wizard-step').forEach((step, index) => {
        step.classList.remove('active', 'completed');
        if (index + 1 === currentStep) step.classList.add('active');
        else if (index + 1 < currentStep) step.classList.add('completed');
    });

    document.querySelectorAll('.form-section').forEach((section, index) => {
        section.classList.toggle('active', index + 1 === currentStep);
    });

    document.getElementById('prev-btn').disabled = currentStep === 1;
    document.getElementById('next-btn').style.display = currentStep === totalSteps ? 'none' : 'block';
    document.getElementById('submit-btn').style.display = currentStep === totalSteps ? 'block' : 'none';
}

function validateStep(step) {
    const section = document.querySelector(`.form-section[data-section="${step}"]`);
    let isValid = true;

    section.querySelectorAll('[required]').forEach(field => {
        if (!field.value.trim() && field.offsetParent !== null) {
            field.style.borderColor = 'red';
            isValid = false;
        } else {
            field.style.borderColor = '';
        }
    });

    if (!isValid) alert('Veuillez remplir tous les champs obligatoires');
    return isValid;
}

document.querySelectorAll('.language-tab').forEach(tab => {
    tab.addEventListener('click', function() {
        document.querySelectorAll('.language-tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');

        document.querySelectorAll('.translation-content').forEach(content => {
            content.style.display = content.dataset.trans === this.dataset.lang ? 'block' : 'none';
        });
    });
});

document.getElementById('image-upload').addEventListener('change', function(e) {
    const preview = document.getElementById('image-preview');
    preview.innerHTML = '';
    Array.from(e.target.files).forEach(file => {
        const reader = new FileReader();
        reader.onload = e => {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.className = 'preview-image';
            preview.appendChild(img);
        };
        reader.readAsDataURL(file);
    });
});

document.getElementById('panorama-upload').addEventListener('change', function(e) {
    const preview = document.getElementById('panorama-preview');
    preview.innerHTML = '';
    if (e.target.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '100%';
            img.style.maxHeight = '200px';
            img.style.objectFit = 'contain';
            preview.appendChild(img);
        };
        reader.readAsDataURL(e.target.files[0]);
    }
});

document.getElementById('enable-3d').addEventListener('change', function() {
    document.getElementById('3d-options').style.display = this.checked ? 'block' : 'none';
});

document.getElementById('artwork-form').addEventListener('submit', function(e) {
    e.preventDefault();
    if (confirm('Confirmer l\'enregistrement de cette œuvre ?')) {
        const btn = document.getElementById('submit-btn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enregistrement...';
        this.submit();
    }
});
</script>
{% endblock %}