{{--
    AI generation panel (Claude). Props:
      $aiEndpoint — the route() URL to POST to (multipart: prompt + files[]).
      $onResult   — name of a JS function, already defined on the page, called with the
                    parsed JSON result on success (e.g. function applyAiTemplate(data){...}).
--}}
<div class="card" style="background:#faf5ff;border-color:#e9d5ff">
    <h2 style="margin-top:0">🤖 Générer avec l'IA</h2>
    <p class="muted" style="margin-top:0">
        Décris ce que tu veux (thème, ton, style…) et/ou joins des images ou PDF — logo, charte graphique, capture
        d'un vrai mail ou d'une vraie page à imiter. L'IA remplit le formulaire ci-dessus ; relis et ajuste avant
        d'enregistrer.
    </p>
    <textarea id="ai-prompt" rows="3" placeholder="ex. Un mail imitant une alerte de sécurité Microsoft 365, ton urgent, avec un bouton « Vérifier mon compte »."></textarea>
    <label style="margin-top:10px">Fichiers (facultatif — images ou PDF, 5 max, 10 Mo chacun)</label>
    <input type="file" id="ai-files" multiple accept="image/*,.pdf">
    <div class="row" style="margin-top:12px;align-items:center;gap:10px">
        <button type="button" class="btn" id="ai-generate-btn">Générer</button>
        <span id="ai-status" class="muted" style="font-size:13px"></span>
    </div>
</div>
<script>
(function(){
    const btn = document.getElementById('ai-generate-btn');
    const status = document.getElementById('ai-status');
    // Looked up at click time (not here): the callback may be defined in a <script> block
    // further down the page, which hasn't run yet when THIS panel's script executes.
    const resultCallbackName = @json($onResult);
    btn.addEventListener('click', async () => {
        const prompt = document.getElementById('ai-prompt').value;
        const files = document.getElementById('ai-files').files;
        const body = new FormData();
        body.append('prompt', prompt);
        for (const f of files) body.append('files[]', f);

        btn.disabled = true;
        status.textContent = 'Génération en cours… (10 à 30 secondes)';
        try {
            const res = await fetch(@json($aiEndpoint), {
                method: 'POST',
                body,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
            });
            const data = await res.json();
            if (!res.ok) throw new Error(data.message || 'Erreur inconnue.');
            status.textContent = '✅ Généré — vérifie et ajuste avant d\'enregistrer.';
            window[resultCallbackName](data);
        } catch (err) {
            status.textContent = '❌ ' + err.message;
        } finally {
            btn.disabled = false;
        }
    });
})();
</script>