{% extends "v3/base.html" %}

{% block content %}
<style>
/* === Wizard plein écran : cache sidebar + header parent === */
.app > .header,
.app > .sidebar,
#permission-banner { display: none !important; }
.main {
    margin-left: 0 !important;
    padding-top: 0 !important;
    min-height: 100vh;
}

/* === Conteneur leçon === */
.acad-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 4rem;
    position: relative;
}
.acad-brand {
    position: absolute;
    top: 1.25rem;
    left: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.5px;
}
.acad-skip {
    position: absolute;
    top: 1.15rem;
    right: 1.5rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.acad-skip:hover { background: var(--bg-hover); color: var(--text); border-color: var(--text-muted); }

/* === Step === */
.acad-step {
    width: 100%;
    max-width: 760px;
    margin-top: 1rem;
}
.acad-badge-big {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    background: rgba(255, 171, 26, 0.12);
    color: #c97400;
    border: 1.5px solid rgba(255, 171, 26, 0.45);
}
[data-theme="dark"] .acad-badge-big { color: #FFAB1A; }
.acad-badge-big::before { content: "🎁"; font-size: 1rem; line-height: 1; }

.acad-eyebrow {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.acad-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.7rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.acad-lead {
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.kbd-inline {
    display: inline-block;
    padding: 3px 9px;
    background: var(--card);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 1px 0 var(--border);
    font-family: Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 0.9rem;
}

/* === Animation surlignage === */
.select-anim {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin: 0.5rem 0 1.25rem;
}
.select-doc {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.select-doc-bar {
    background: #f3f4f6;
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
    font-size: 0.78rem;
    color: #6b7280;
}
.select-doc-body {
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #1f1f1f;
}
.select-highlight {
    background: transparent;
    color: inherit;
    border-radius: 2px;
    padding: 1px 2px;
    transition: background 350ms ease-out, color 350ms ease-out;
}
.select-highlight.active {
    background: #1A8FFF;
    color: white;
}

.kbd-group { display: flex; align-items: center; gap: 0.6rem; }
.kbd-key {
    padding: 8px 14px;
    background: white;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-family: Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 0.92rem;
    color: #374151;
    box-shadow: 0 2px 0 #d1d5db, 0 1px 4px rgba(0,0,0,0.08);
    transition: all 0.2s;
}
.kbd-key.pressed {
    transform: translateY(2px) scale(0.96);
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.kbd-plus { color: #9ca3af; font-size: 1.1rem; font-weight: 500; }

.select-kbd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}
.select-caption {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    margin: 0;
}
.select-result {
    background: white;
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #1f1f1f;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    box-shadow: 0 2px 8px rgba(26, 143, 255, 0.12);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.select-result.visible { opacity: 1; transform: translateY(0); }
.select-result-arrow { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; }

/* === Liste d'exemples === */
.use-cases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    margin: 0.5rem 0 1rem;
}
@media (max-width: 640px) { .use-cases { grid-template-columns: 1fr; } }
.use-case {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0.75rem 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.use-case-icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}
.use-case-name { font-weight: 600; color: var(--text); font-size: 0.95rem; margin-bottom: 0.15rem; }
.use-case-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; }

/* === Bloc pratique (textareas exos) === */
.practice-block {
    background: var(--accent-light);
    border: 1px solid rgba(26, 143, 255, 0.20);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 0.85rem 1rem 1rem;
    margin-bottom: 0.85rem;
}
.practice-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}
.practice-num {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.practice-head-text strong { display: block; color: var(--text); font-size: 0.98rem; margin-bottom: 0.15rem; }
.practice-head-text span { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }
.practice-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.7rem 0.9rem;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.5;
    resize: vertical;
}
.practice-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 143, 255, 0.15);
}
.practice-textarea[readonly] { background: var(--bg-hover); cursor: text; }
.practice-hint {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

/* === Astuce === */
.acad-tip {
    margin: 1rem 0;
    padding: 0.7rem 1rem;
    background: rgba(255, 171, 26, 0.08);
    border-left: 3px solid #FFAB1A;
    border-radius: 0 8px 8px 0;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.5;
}
.acad-tip::before { content: "💡 "; }

/* === Boutons === */
.acad-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.btn-acad {
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-acad-primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.btn-acad-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
}
.btn-acad-secondary {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.btn-acad-secondary:hover {
    background: var(--bg-hover);
    color: var(--text);
}
</style>

<div class="acad-wrap">
    <div class="acad-brand">VICSIA</div>
    <a class="acad-skip" href="/v3/agents" title="Revenir aux agents">Retour aux agents →</a>

    <section class="acad-step">
        <span class="acad-badge-big">Leçon bonus</span>
        <div class="acad-eyebrow">Optionnel · Sans commande vocale</div>
        <h1 class="acad-title">Les agents qui travaillent sur ce que vous sélectionnez</h1>
        <p class="acad-lead">
            Vicsia ne sert pas qu'à dicter ou parler à l'IA — il peut aussi <strong style="color:var(--text);">agir
            sur le texte que vous sélectionnez à la souris</strong>, sans que vous ayez besoin de prononcer un mot.
        </p>

        <!-- Animation surlignage (démonstration passive) -->
        <div class="select-anim" id="select-anim">
            <div class="select-doc">
                <div class="select-doc-bar">📝 &nbsp;Document — Brouillon de mail</div>
                <div class="select-doc-body">
                    Bonjour Marc, <span class="select-highlight" id="select-hl">je voudrai te confirmé notre rendez vous de jeudi prochain a 14h</span> dans nos locaux pour discuter du projet.
                </div>
            </div>
            <div class="select-kbd">
                <div class="kbd-group">
                    <span class="kbd-key" id="select-kbd-ctrl">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-key" id="select-kbd-g">&lt;</span>
                </div>
                <p class="select-caption">
                    Sélection en bleu, puis un raccourci dédié — la correction se fait toute seule.
                </p>
            </div>
            <div class="select-result" id="select-result">
                <span class="select-result-arrow">↓</span>
                <span class="select-result-text"></span>
            </div>
        </div>

        <h2 style="font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.7rem; color: var(--text);">
            Quelques exemples d'usage
        </h2>
        <div class="use-cases">
            <div class="use-case">
                <span class="use-case-icon">✂</span>
                <div>
                    <div class="use-case-name">Corriger les fautes</div>
                    <div class="use-case-desc">Sélectionnez un paragraphe, lancez l'agent, le texte revient corrigé.</div>
                </div>
            </div>
            <div class="use-case">
                <span class="use-case-icon">🌐</span>
                <div>
                    <div class="use-case-name">Traduire</div>
                    <div class="use-case-desc">Vers l'anglais, l'espagnol, le japonais… selon les agents installés.</div>
                </div>
            </div>
            <div class="use-case">
                <span class="use-case-icon">📋</span>
                <div>
                    <div class="use-case-name">Résumer</div>
                    <div class="use-case-desc">Un long mail, un article, un rapport — en 3 lignes.</div>
                </div>
            </div>
            <div class="use-case">
                <span class="use-case-icon">✍</span>
                <div>
                    <div class="use-case-name">Reformuler</div>
                    <div class="use-case-desc">Plus formel, plus court, plus chaleureux — vous choisissez le ton.</div>
                </div>
            </div>
        </div>

        <div style="margin: 1.5rem 0 0; padding: 0.95rem 1.1rem; background: rgba(26, 143, 255, 0.08); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; font-size: 0.94rem; color: var(--text); line-height: 1.6;">
            <strong style="color: var(--text);">ℹ Et avec un prompt vocal ?</strong>
            La sélection marche aussi avec les agents <strong>activés à la voix</strong>.
            Sélectionnez un texte, appuyez sur <span class="kbd-inline">Ctrl + G</span> (ou n'importe quel raccourci vocal),
            dictez une intention courte comme <em>« résume ça »</em> ou <em>« réponds en disant que c'est OK »</em>,
            et l'agent combine votre voix + la sélection pour produire la réponse. Plus besoin de tout redicter.
        </div>

        <h2 style="font-size: 1.05rem; font-weight: 700; margin: 1.75rem 0 0.7rem; color: var(--text);">
            Mettez-vous en pratique
        </h2>

        <!-- Exercice 1 : Correction (éditable) -->
        <div class="practice-block">
            <div class="practice-head">
                <span class="practice-num">1</span>
                <div class="practice-head-text">
                    <strong>Corriger ce texte</strong>
                    <span>Sélectionnez tout, puis appuyez sur <span class="kbd-inline">Ctrl + &lt;</span> (raccourci correction par défaut).</span>
                </div>
            </div>
            <textarea
                class="practice-textarea"
                id="practice-correction"
                spellcheck="false"
                autocomplete="off">moi je pense que c'est une bonne idée mais faut quand meme verifié que ca marche dans tous les cas parce que la dernière fois on avait eu des soucis tu te rappel</textarea>
            <p class="practice-hint">Le texte sera remplacé par sa version corrigée.</p>
        </div>

        <!-- Exercice 2 : Traduction (readonly) -->
        <div class="practice-block">
            <div class="practice-head">
                <span class="practice-num">2</span>
                <div class="practice-head-text">
                    <strong>Traduire ce texte</strong>
                    <span>Sélectionnez tout et appuyez sur le raccourci de votre agent traduction (par défaut <span class="kbd-inline">Ctrl + Shift + T</span>).</span>
                </div>
            </div>
            <textarea
                class="practice-textarea"
                id="practice-translation"
                readonly>Could you send me the report before Friday? I need to review it before the meeting on Monday morning.</textarea>
            <p class="practice-hint">Lecture seule — l'agent traduction écrit la version traduite à la suite ou la remplace selon votre config.</p>
        </div>

        <div class="acad-tip">
            Vous configurez ces agents et leurs raccourcis depuis la <strong>page Agents</strong> —
            la leçon paramétrage détaille tout cela. Pour l'instant, sachez juste que ça existe.
        </div>

        <div class="acad-actions">
            <a class="btn-acad btn-acad-secondary" href="/v3/academy">← Retour au menu Académie</a>
            <a class="btn-acad btn-acad-primary" href="/v3/agents" id="lesson3-finish">Voir mes agents →</a>
        </div>
    </section>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    'use strict';

    const CORRECTED = "je voudrais te confirmer notre rendez-vous de jeudi prochain à 14h";
    let timers = [];
    let running = false;

    function $(s) { return document.querySelector(s); }

    function runLoop() {
        timers.forEach(t => clearTimeout(t));
        timers = [];

        const hl = $('#select-hl');
        const ctrlK = $('#select-kbd-ctrl');
        const ltK = $('#select-kbd-g');
        const result = $('#select-result');
        const resultText = result && result.querySelector('.select-result-text');

        if (hl) hl.classList.remove('active');
        if (ctrlK) ctrlK.classList.remove('pressed');
        if (ltK) ltK.classList.remove('pressed');
        if (result) result.classList.remove('visible');
        if (resultText) resultText.textContent = '';

        // Surlignage (0 → 1200ms)
        const t1 = setTimeout(() => { if (hl) hl.classList.add('active'); }, 700);
        timers.push(t1);

        // Touches pressées (2200 → 3200ms)
        const t2 = setTimeout(() => {
            if (ctrlK) ctrlK.classList.add('pressed');
            if (ltK) ltK.classList.add('pressed');
        }, 2200);
        timers.push(t2);

        // Résultat avec streaming (3500 → 6500ms)
        const t3 = setTimeout(() => {
            if (result) result.classList.add('visible');
            if (resultText) {
                let i = 0;
                resultText.textContent = '';
                function tick() {
                    if (i >= CORRECTED.length) return;
                    i += 2;
                    resultText.textContent = CORRECTED.slice(0, Math.min(i, CORRECTED.length));
                    const t = setTimeout(tick, 28);
                    timers.push(t);
                }
                tick();
            }
        }, 3500);
        timers.push(t3);

        // Loop avec pause de 3s (9500ms total)
        const tLoop = setTimeout(() => { if (running) runLoop(); }, 9500);
        timers.push(tLoop);
    }

    async function markCompleted() {
        try {
            await apiFetch('/api/academy/complete/3', { method: 'POST' });
        } catch (e) { /* offline ok */ }
    }

    const finishBtn = $('#lesson3-finish');
    if (finishBtn) finishBtn.addEventListener('click', () => { markCompleted(); });

    document.body.style.opacity = '1';
    if (typeof loadAcademyHotkeys === 'function') loadAcademyHotkeys();

    running = true;
    runLoop();
})();
</script>
{% endblock %}