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

{% block title %}Slidia - Générateur de présentations{% endblock %}

{% block body %}
<div
    class="slidia-generator"
    data-controller="slidia--generator"
    data-slidia--generator-max-chars-value="20000"
    data-slidia--generator-tokens-remaining-value="{{ tokenStats.remaining }}"
>
    <div class="slidia-generator__container">
        {# Left side - Paramètres (25%) #}
        <div class="slidia-generator__sidebar">
            {# Header #}
            <div class="slidia-sidebar__header">
                <div class="slidia-sidebar__title-row">
                    <div class="slidia-sidebar__icon">
                        {% include "_components/icons/slidia.html.twig" %}
                    </div>
                    <h1 class="slidia-sidebar__title">Slidia</h1>
                </div>
                <p class="slidia-sidebar__subtitle">Transformez vos idées en présentations professionnelles</p>
            </div>

            {# Paramètres du thème - Éditables #}
            <div class="slidia-sidebar__content">
                <div class="slidia-theme-editor">
                    {# Section Masques personnalisés #}
                    <div class="slidia-theme-section" data-controller="slidia--mask" data-slidia--mask-user-id-value="{{ app.user.id }}">
                        <div class="slidia-theme-section__header">
                            {% include '_components/icons/slidia.html.twig' %}
                            <span>Masque</span>
                        </div>

                        {# Zone d'upload (visible si pas de masque custom) #}
                        <div class="slidia-mask-upload slidia-mask-upload--compact" data-slidia--mask-target="uploadZone" {% if maskInfo.hasCustomMask %}hidden{% endif %}>
                            <input type="file" id="mask-file-input-slidia" accept=".pptx" class="slidia-mask-upload__input" data-slidia--mask-target="fileInput" data-action="change->slidia--mask#handleFileSelect">
                            <label for="mask-file-input-slidia" class="slidia-mask-upload__dropzone" data-action="dragover->slidia--mask#handleDragOver dragenter->slidia--mask#handleDragEnter dragleave->slidia--mask#handleDragLeave drop->slidia--mask#handleDrop">
                                <div class="slidia-mask-upload__icon">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                        <polyline points="17 8 12 3 7 8"/>
                                        <line x1="12" y1="3" x2="12" y2="15"/>
                                    </svg>
                                </div>
                                <div class="slidia-mask-upload__text">
                                    <span class="slidia-mask-upload__text-main">Importer un masque</span>
                                    <span class="slidia-mask-upload__text-sub">Fichier .pptx (max 20 Mo)</span>
                                </div>
                            </label>
                        </div>

                        {# Barre de progression #}
                        <div class="slidia-mask-progress" data-slidia--mask-target="progress" hidden>
                            <div class="slidia-mask-progress__bar">
                                <div class="slidia-mask-progress__fill" data-slidia--mask-target="progressFill"></div>
                            </div>
                            <p class="slidia-mask-progress__text" data-slidia--mask-target="progressText">Upload en cours...</p>
                        </div>

                        {# Masque actuel (si custom) #}
                        <div class="slidia-mask-file" data-slidia--mask-target="current" {% if not maskInfo.hasCustomMask %}hidden{% endif %}>
                            <a href="/slidia/mask/download/{{ app.user.id }}" class="slidia-mask-file__link" data-slidia--mask-target="downloadLink" download>
                                <div class="slidia-mask-file__icon">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                        <polyline points="14 2 14 8 20 8"/>
                                    </svg>
                                </div>
                                <div class="slidia-mask-file__info">
                                    <span class="slidia-mask-file__name" data-slidia--mask-target="fileName">Mon masque</span>
                                    <span class="slidia-mask-file__meta" data-slidia--mask-target="fileMeta">{{ maskInfo.layoutCount }} layout{{ maskInfo.layoutCount > 1 ? 's' : '' }}</span>
                                </div>
                            </a>
                            <button type="button" class="slidia-mask-file__delete" data-action="click->slidia--mask#deleteMask" title="Supprimer">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <line x1="18" y1="6" x2="6" y2="18"/>
                                    <line x1="6" y1="6" x2="18" y2="18"/>
                                </svg>
                            </button>
                        </div>

                        {# Message d'erreur #}
                        <div class="slidia-mask-error" data-slidia--mask-target="error" hidden>
                            <span data-slidia--mask-target="errorText"></span>
                        </div>
                    </div>

                    {# Section Densité du texte #}
                    <div class="slidia-theme-section">
                        <div class="slidia-theme-section__header">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="21" y1="6" x2="3" y2="6"/>
                                <line x1="17" y1="12" x2="3" y2="12"/>
                                <line x1="19" y1="18" x2="3" y2="18"/>
                            </svg>
                            <span>Densité du texte</span>
                        </div>
                        <div class="slidia-option-group">
                            <label class="slidia-option">
                                <input type="radio" name="textDensity" value="concise" {% if settings.textDensity == 'concise' %}checked{% endif %} data-slidia--generator-target="textDensity">
                                <div class="slidia-option__content">
                                    <span class="slidia-option__label">Concis</span>
                                    <span class="slidia-option__desc">Peu de texte, idées clés</span>
                                </div>
                            </label>
                            <label class="slidia-option">
                                <input type="radio" name="textDensity" value="normal" {% if settings.textDensity == 'normal' %}checked{% endif %} data-slidia--generator-target="textDensity">
                                <div class="slidia-option__content">
                                    <span class="slidia-option__label">Normal</span>
                                    <span class="slidia-option__desc">Équilibré</span>
                                </div>
                            </label>
                            <label class="slidia-option">
                                <input type="radio" name="textDensity" value="detailed" {% if settings.textDensity == 'detailed' %}checked{% endif %} data-slidia--generator-target="textDensity">
                                <div class="slidia-option__content">
                                    <span class="slidia-option__label">Détaillé</span>
                                    <span class="slidia-option__desc">Explications complètes</span>
                                </div>
                            </label>
                        </div>
                    </div>

                    {# Section Fidélité au contenu #}
                    <div class="slidia-theme-section">
                        <div class="slidia-theme-section__header">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                            </svg>
                            <span>Intervention de l'IA</span>
                        </div>
                        <div class="slidia-option-group">
                            <label class="slidia-option">
                                <input type="radio" name="contentFidelity" value="verbatim" {% if settings.contentFidelity == 'verbatim' %}checked{% endif %} data-slidia--generator-target="contentFidelity">
                                <div class="slidia-option__content">
                                    <span class="slidia-option__label">Texte exact</span>
                                    <span class="slidia-option__desc">Moins de tokens</span>
                                </div>
                            </label>
                            <label class="slidia-option">
                                <input type="radio" name="contentFidelity" value="light_edit" {% if settings.contentFidelity == 'light_edit' %}checked{% endif %} data-slidia--generator-target="contentFidelity">
                                <div class="slidia-option__content">
                                    <span class="slidia-option__label">Légères corrections</span>
                                    <span class="slidia-option__desc">Tokens modérés</span>
                                </div>
                            </label>
                            <label class="slidia-option">
                                <input type="radio" name="contentFidelity" value="creative" {% if settings.contentFidelity == 'creative' %}checked{% endif %} data-slidia--generator-target="contentFidelity">
                                <div class="slidia-option__content">
                                    <span class="slidia-option__label">Reformulation libre</span>
                                    <span class="slidia-option__desc">Plus de tokens</span>
                                </div>
                            </label>
                        </div>
                    </div>

                </div>
            </div>

            {# Footer avec tokens et énergie #}
            <div class="slidia-sidebar__footer">
                <div class="slidia-sidebar__stats">
                    {# Tokens - formatage intelligent #}
                    {% set tokens = tokenStats.remaining %}
                    <div class="slidia-stat-item">
                        <div class="slidia-stat-icon slidia-stat-icon--tokens">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M2 17L12 22L22 17" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M2 12L12 17L22 12" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="slidia-stat-content" data-slidia--generator-target="tokensDisplay">
                            {% if tokens >= 1000000 %}
                                <span class="slidia-stat-value">{{ (tokens / 1000000)|number_format(1, ',', ' ') }}</span>
                                <span class="slidia-stat-label">M tokens</span>
                            {% elseif tokens >= 1000 %}
                                <span class="slidia-stat-value">{{ (tokens / 1000)|number_format(0, ',', ' ') }}</span>
                                <span class="slidia-stat-label">K tokens</span>
                            {% else %}
                                <span class="slidia-stat-value">{{ tokens|number_format(0, ',', ' ') }}</span>
                                <span class="slidia-stat-label">tokens</span>
                            {% endif %}
                        </div>
                    </div>

                    {# Énergie - formatage intelligent #}
                    {% set energyWh = tokenStats.energyConsumptionWh %}
                    <div class="slidia-stat-item">
                        <div class="slidia-stat-icon slidia-stat-icon--energy">
                            {% include "_components/icons/battery.html.twig" %}
                        </div>
                        <div class="slidia-stat-content" data-slidia--generator-target="energyDisplay">
                            {% if energyWh >= 1000 %}
                                <span class="slidia-stat-value">{{ (energyWh / 1000)|number_format(2, ',', ' ') }}</span>
                                <span class="slidia-stat-label">kWh</span>
                            {% elseif energyWh >= 1 %}
                                <span class="slidia-stat-value">{{ energyWh|number_format(1, ',', ' ') }}</span>
                                <span class="slidia-stat-label">Wh</span>
                            {% else %}
                                <span class="slidia-stat-value">{{ (energyWh * 1000)|number_format(1, ',', ' ') }}</span>
                                <span class="slidia-stat-label">mWh</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Right side - Editor (75%) #}
        <div class="slidia-generator__editor">
            <form
                data-action="submit->slidia--generator#generate"
                data-slidia--generator-target="form"
            >
                <div class="slidia-generator__textarea-wrapper">
                    <textarea
                        id="content"
                        name="content"
                        class="slidia-generator__textarea"
                        placeholder="Collez votre texte ici et transformez-le en diaporama professionnel."
                        data-action="input->slidia--generator#updateCharCount"
                        data-slidia--generator-target="textarea"
                        required
                        maxlength="20000"
                    ></textarea>
                    <span
                        class="slidia-generator__char-count"
                        data-slidia--generator-target="charCount"
                    >0 / 20 000</span>
                </div>

                <div class="slidia-generator__footer">
                    <div class="slidia-generator__help">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2 17L12 22L22 17" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2 12L12 17L22 12" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <span>✨ <strong>Collez votre contenu brut et cliquez sur "Générer"</strong> ! L'IA formatera et créera votre présentation automatiquement.</span>
                    </div>

                    <div class="slidia-generator__actions">
                        <button
                            type="submit"
                            class="btn btn--primary btn--enhanced"
                            data-slidia--generator-target="submitBtn"
                        >
                            <span data-slidia--generator-target="btnText">Générer le PowerPoint</span>
                        </button>
                    </div>
                </div>

                {# Loading state - Génération #}
                <div
                    class="slidia-generator__loading"
                    data-slidia--generator-target="loading"
                    style="display: none;"
                >
                    <div class="slidia-generator__loading-spinner"></div>
                    <p
                        class="slidia-generator__loading-text"
                        data-slidia--generator-target="loadingText"
                    >Génération en cours...</p>
                    <p class="slidia-generator__loading-subtext">Slidia structure votre contenu et crée vos slides</p>
                </div>

            </form>
        </div>
    </div>
</div>
{% endblock %}