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

{% block title %}Moodia - Éditeur de cours{% endblock %}

{% block meta_description %}Éditez et personnalisez votre cours Moodle avant le déploiement.{% endblock %}

{% block body %}
<div class="moodia-editor-page" data-controller="moodia--editor"
     data-moodia--editor-course-uuid-value="{{ courseUuid }}"
     data-moodia--editor-save-url-value="{{ path('app_moodia_save_course', {uuid: courseUuid}) }}"
     data-moodia--editor-deploy-url-value="{{ path('app_moodia_deploy') }}"
     data-moodia--editor-stream-url-value="{{ path('app_moodia_generate_stream') }}"
     data-moodia--editor-generate-audio-url-value="{{ path('app_moodia_generate_audio') }}"
     data-moodia--editor-export-stream-url-value="{{ path('app_moodia_export_mbz_stream', {uuid: courseUuid}) }}"
     data-moodia--editor-can-deploy-value="{{ canDeployToMoodle ? 'true' : 'false' }}"
     data-moodia--editor-needs-generation-value="{{ needsGeneration|default(false) ? 'true' : 'false' }}">

    {# Header du cours #}
    <header class="editor-header" data-moodia--editor-target="header">
        <div class="editor-header__left">
            <input type="text"
                   class="editor-header__title-input"
                   value="{{ config.courseTitle|default('Mon cours') }}"
                   data-moodia--editor-target="courseTitle"
                   data-action="input->moodia--editor#updateCourseTitle input->moodia--editor#markDirty"
                   placeholder="Titre du cours">
        </div>
        <div class="editor-header__right">
            <span class="editor-header__status" data-moodia--editor-target="saveStatus">
                <span class="status-dot"></span>
                <span data-moodia--editor-target="statusText">Prêt</span>
            </span>
        </div>
    </header>

    <div class="editor-layout">
        {# Sidebar avec Table des matières #}
        <aside class="editor-sidebar" data-moodia--editor-target="sidebar">
            <div class="sidebar-header">
                <h2 class="sidebar-title">Plan du cours</h2>
            </div>
            <nav class="sidebar-toc" data-moodia--editor-target="toc">
                {# La TOC sera générée dynamiquement #}
                <div class="toc-loading">
                    <div class="toc-skeleton"></div>
                    <div class="toc-skeleton short"></div>
                    <div class="toc-skeleton"></div>
                </div>
            </nav>
            <div class="sidebar-footer">
                <a href="{{ path('app_moodia_export_mbz', {uuid: courseUuid}) }}"
                   class="btn btn--primary btn--enhanced"
                   data-moodia--editor-target="exportMbzBtn"
                   data-action="click->moodia--editor#exportMbz"
                   data-turbo="false"
                   title="Télécharger le cours au format Moodle (.mbz)">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="7 10 12 15 17 10"></polyline>
                        <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                    Télécharger en .MBZ
                </a>
            </div>
        </aside>

        {# Zone de contenu principale #}
        <main class="editor-main">
            <div class="editor-content" data-moodia--editor-target="coursePreview">
                <div class="course-content-wrapper" data-moodia--editor-target="courseMain">
                    {# Structure des sections #}
                    <div class="sections-list" data-moodia--editor-target="sections">
                        {# État initial : loading #}
                        <div class="generation-placeholder">
                            <div class="generation-loader">
                                <div class="loader-spinner"></div>
                                <p class="loader-text">Préparation de la génération...</p>
                            </div>
                        </div>
                    </div>

                    {# Bouton ajouter une section #}
                    <button type="button" class="add-section-btn"
                            data-action="click->moodia--editor#addSection"
                            data-moodia--editor-target="addSectionBtn">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        Ajouter une section
                    </button>
                </div>
            </div>
        </main>
    </div>

    {# Données du cours (JSON) #}
    <script type="application/json" data-moodia--editor-target="courseData">
        {{ courseData|json_encode|raw }}
    </script>

    {# Modal d'export MBZ #}
    <div class="export-modal" data-moodia--editor-target="exportModal">
        <div class="export-modal__overlay" data-action="click->moodia--editor#closeExportModal"></div>
        <div class="export-modal__content">
            {# Vue progression #}
            <div class="export-modal__progress-view" data-moodia--editor-target="exportProgressView">
                <div class="export-modal__header">
                    <h3 class="export-modal__title">Export du cours</h3>
                </div>
                <div class="export-modal__body">
                    <div class="export-modal__progress">
                        <div class="export-modal__progress-bar">
                            <div class="export-modal__progress-fill" data-moodia--editor-target="exportProgressFill" style="width: 0%"></div>
                        </div>
                        <div class="export-modal__progress-info">
                            <span class="export-modal__progress-label" data-moodia--editor-target="exportProgressLabel">Préparation...</span>
                            <span class="export-modal__progress-percent" data-moodia--editor-target="exportProgressPercent">0%</span>
                        </div>
                    </div>
                    <div class="export-modal__detail" data-moodia--editor-target="exportProgressDetail"></div>
                </div>
            </div>

            {# Vue tutoriel (après téléchargement) #}
            <div class="export-modal__tutorial-view" data-moodia--editor-target="exportTutorialView" style="display: none;">
                <div class="export-modal__header">
                    <h3 class="export-modal__title">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #22c55e; margin-right: 8px;">
                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
                        </svg>
                        Téléchargement terminé
                    </h3>
                </div>
                <div class="export-modal__body">
                    <p class="export-modal__intro">Votre fichier <strong>.mbz</strong> a été téléchargé. Suivez ces étapes pour l'importer dans Moodle :</p>

                    <div class="export-modal__steps">
                        <div class="export-modal__step">
                            <span class="export-modal__step-number">1</span>
                            <div class="export-modal__step-content">
                                <strong>Connectez-vous à Moodle</strong>
                                <p>Accédez à votre plateforme Moodle avec un compte administrateur ou enseignant.</p>
                            </div>
                        </div>

                        <div class="export-modal__step">
                            <span class="export-modal__step-number">2</span>
                            <div class="export-modal__step-content">
                                <strong>Accédez à la restauration</strong>
                                <p>Allez dans <em>Administration du site → Cours → Restaurer un cours</em> ou depuis un cours existant : <em>Paramètres → Restaurer</em>.</p>
                            </div>
                        </div>

                        <div class="export-modal__step">
                            <span class="export-modal__step-number">3</span>
                            <div class="export-modal__step-content">
                                <strong>Importez le fichier .mbz</strong>
                                <p>Glissez-déposez le fichier téléchargé ou cliquez pour le sélectionner, puis cliquez sur <em>Restaurer</em>.</p>
                            </div>
                        </div>

                        <div class="export-modal__step">
                            <span class="export-modal__step-number">4</span>
                            <div class="export-modal__step-content">
                                <strong>Configurez et finalisez</strong>
                                <p>Suivez l'assistant de restauration, choisissez la catégorie de destination et validez.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="export-modal__footer">
                    <button type="button" class="export-modal__btn" data-action="click->moodia--editor#closeExportModal">
                        Compris
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}