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

{% block content %}
<style>
.lesson2-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
.lesson2-back {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}
.lesson2-back:hover { color: var(--accent); }

.lesson2-badges { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.7rem; flex-wrap: wrap; }
.lesson2-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lesson2-tag.parametrage {
    background: rgba(26, 143, 255, 0.10);
    color: var(--accent);
    border: 1px solid rgba(26, 143, 255, 0.30);
}
.lesson2-tag.beta {
    background: rgba(255, 171, 26, 0.12);
    color: #c97400;
    border: 1px solid rgba(255, 171, 26, 0.40);
}
[data-theme="dark"] .lesson2-tag.beta { color: #FFAB1A; }

.lesson2-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.6rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.lesson2-lead { color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; margin-bottom: 1.5rem; }

/* === Layout 2 colonnes : maquette form (gauche) + explication (droite) === */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    align-items: start;
}
@media (max-width: 760px) {
    .field-row { grid-template-columns: 1fr; gap: 0.7rem; }
}

/* Maquette du formulaire (look identique à la modale réelle) */
.form-mock {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.form-mock-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
    display: block;
}
.form-mock-input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    background: var(--bg-hover);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.form-mock-input.placeholder { color: var(--text-muted); font-style: italic; }
.form-mock-textarea {
    min-height: 70px;
    line-height: 1.5;
    resize: none;
    display: block;
}
.form-mock-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}
.form-mock-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--text);
    padding: 0.3rem 0;
}
.form-mock-check + .form-mock-check { padding-top: 0.1rem; }
.form-mock-check input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    margin: 0;
    pointer-events: none;
}

/* Bloc explication (à droite) */
.field-explain {
    padding-top: 0.15rem;
}
.field-explain h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.3rem;
}
.field-explain h3 .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 0.75rem;
    margin-right: 0.5rem;
    vertical-align: 2px;
}
.field-explain p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 0.4rem;
}
.field-explain p strong { color: var(--text); }
.field-explain ul {
    margin: 0.3rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}
.field-explain ul li { margin-bottom: 0.15rem; }

.lesson2-tip {
    margin: 1.5rem 0;
    padding: 0.85rem 1rem;
    background: rgba(255, 171, 26, 0.08);
    border-left: 3px solid #FFAB1A;
    border-radius: 0 8px 8px 0;
    font-size: 0.94rem;
    color: var(--text);
    line-height: 1.55;
}
.lesson2-tip::before { content: "💡 "; }

.lesson2-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.btn-l {
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.94rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-l-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-l-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn-l-secondary { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-l-secondary:hover { background: var(--bg-hover); color: var(--text); }
</style>

<div class="lesson2-wrap">
    <a class="lesson2-back" href="/v3/academy">← Retour au menu Académie</a>

    <div class="lesson2-badges">
        <span class="lesson2-tag parametrage">Paramétrage</span>
        <span class="lesson2-tag beta">Beta</span>
    </div>

    <h1 class="lesson2-title">Créer un agent — un champ à la fois</h1>
    <p class="lesson2-lead">
        Quand vous cliquez sur <strong>+ Nouvel agent</strong> dans la page Agents, voici le formulaire
        qui apparaît. À gauche, le champ tel qu'il s'affiche. À droite, ce qu'il fait et comment le remplir.
    </p>

    <!-- ─── Nom ─────────────────────────────────────────────────── -->
    <div class="field-row">
        <div class="form-mock">
            <span class="form-mock-label">Nom</span>
            <input type="text" class="form-mock-input placeholder" value="Réponse pro" readonly>
        </div>
        <div class="field-explain">
            <h3><span class="num">1</span>Nom</h3>
            <p>Le titre court de l'agent — celui qui apparaît dans la liste et dans la capsule.</p>
            <p><strong>Bons exemples :</strong> « Réponse pro », « Résumé court », « Anglais formel ».</p>
        </div>
    </div>

    <!-- ─── Instructions ────────────────────────────────────────── -->
    <div class="field-row">
        <div class="form-mock">
            <span class="form-mock-label">Instructions (prompt système)</span>
            <textarea class="form-mock-input form-mock-textarea placeholder" readonly>Reformule le texte en français professionnel.
Ton chaleureux, phrases courtes, signature à la fin.</textarea>
        </div>
        <div class="field-explain">
            <h3><span class="num">2</span>Instructions <small style="color:var(--text-muted); font-weight:500; font-size:0.78rem;">(le plus important)</small></h3>
            <p>La consigne envoyée à l'IA. Écrivez ce que l'agent doit faire, comme vous l'expliqueriez à un assistant humain.</p>
            <p><strong>Conseil :</strong> soyez direct et précis. Ton, longueur, format attendu. Pas besoin de jargon technique.</p>
        </div>
    </div>

    <!-- ─── Description ─────────────────────────────────────────── -->
    <div class="field-row">
        <div class="form-mock">
            <span class="form-mock-label">Description</span>
            <textarea class="form-mock-input form-mock-textarea placeholder" style="min-height:38px;" readonly>Reformule un message en français pro avec un ton chaleureux</textarea>
        </div>
        <div class="field-explain">
            <h3><span class="num">3</span>Description</h3>
            <p>Une phrase courte qui dit <em>à quoi sert l'agent</em>. Utilisée par <span class="kbd-inline" style="font-family:Menlo,Consolas,monospace; background:var(--bg-hover); padding:1px 5px; border:1px solid var(--border); border-radius:4px; font-size:0.82rem;">Ctrl + G</span> pour vous router vers le bon agent.</p>
            <p><strong>Bouton « Générer »</strong> dans la modale : l'IA propose une description à partir des instructions. Pratique si vous séchez.</p>
        </div>
    </div>

    <!-- ─── Sortie ──────────────────────────────────────────────── -->
    <div class="field-row">
        <div class="form-mock">
            <span class="form-mock-label">Sortie</span>
            <select class="form-mock-input form-mock-select" disabled>
                <option>Capsule Vicsia</option>
            </select>
            <div style="margin-top:0.45rem;">
                <label class="form-mock-check"><input type="checkbox"> Lecture vocale (TTS)</label>
            </div>
        </div>
        <div class="field-explain">
            <h3><span class="num">4</span>Sortie</h3>
            <p><strong>Capsule Vicsia</strong> — le résultat s'affiche dans un popup avec bouton Copier. Idéal pour les questions, résumés, recherches.</p>
            <p><strong>Coller dans l'application</strong> — le résultat est inséré directement où votre curseur se trouve. Idéal pour transcription, correction, rédaction.</p>
            <p style="margin-top:0.5rem;"><strong>Lecture vocale (TTS)</strong> — Vicsia lit la réponse à voix haute. Disponible seulement en mode Capsule.</p>
        </div>
    </div>

    <!-- ─── Modele IA ───────────────────────────────────────────── -->
    <div class="field-row">
        <div class="form-mock">
            <span class="form-mock-label">Modèle IA</span>
            <select class="form-mock-input form-mock-select" disabled>
                <option>IA Performante</option>
            </select>
        </div>
        <div class="field-explain">
            <h3><span class="num">5</span>Modèle IA</h3>
            <p><strong>Rapide</strong> — réponse en quelques secondes, parfait pour les tâches simples (correction, traduction).</p>
            <p><strong>IA Performante</strong> — plus lent mais plus malin. Pour rédiger, raisonner, structurer.</p>
            <p style="margin-top:0.4rem; font-size:0.85rem;">En cas de doute, laissez <strong>IA Performante</strong> — Vicsia bascule en Rapide automatiquement si le quota Starter est dépassé.</p>
        </div>
    </div>

    <!-- ─── Options ─────────────────────────────────────────────── -->
    <div class="field-row">
        <div class="form-mock">
            <span class="form-mock-label">Options</span>
            <label class="form-mock-check"><input type="checkbox" checked> Commande vocale</label>
            <label class="form-mock-check"><input type="checkbox"> Recherche web</label>
            <label class="form-mock-check"><input type="checkbox"> Base de connaissance</label>
        </div>
        <div class="field-explain">
            <h3><span class="num">6</span>Options</h3>
            <p><strong>Commande vocale</strong> — l'agent écoute votre voix au moment de l'activer. Décochez si vous voulez juste qu'il traite la sélection sans rien dire.</p>
            <p><strong>Recherche web</strong> — autorise l'IA à chercher des infos à jour (cours, météo, actualités). Plus lent, à utiliser si pertinent.</p>
            <p><strong>Base de connaissance</strong> — l'agent peut consulter (et enrichir avec votre permission) les informations que vous avez enregistrées dans la page <em>Base de connaissance</em> : contacts, préférences, projets, notes récurrentes. Utile pour qu'il sache <em>qui</em> est Marc avant d'écrire un mail.</p>
        </div>
    </div>

    <div class="lesson2-tip">
        <strong>Astuce :</strong> seul le <em>Nom</em> est obligatoire pour démarrer. Tous les autres champs
        ont une valeur par défaut sensée — vous pouvez créer un agent en 10 secondes et ajuster après.
    </div>

    <div class="lesson2-actions">
        <a class="btn-l btn-l-secondary" href="/v3/academy">← Menu Académie</a>
        <a class="btn-l btn-l-primary" href="/v3/agents" id="lesson2-finish">Créer un agent maintenant →</a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    'use strict';
    const btn = document.getElementById('lesson2-finish');
    if (btn) btn.addEventListener('click', async () => {
        try { await apiFetch('/api/academy/complete/2', { method: 'POST' }); } catch (e) {}
    });
})();
</script>
{% endblock %}