{% extends "base.html" %}

{% block content %}
<section class="help-section">
    <h1>Aide & Dépannage</h1>

    <div class="help-card">
        <h2>État du système</h2>
        <div id="health-checks" class="health-checks">
            <p class="loading">Vérification en cours...</p>
        </div>
        <button class="btn btn-secondary" onclick="checkHealth()">Revérifier</button>
    </div>
</section>

<section class="help-section">
    <div class="help-card">
        <h2>Dépannage courant</h2>

        <div class="troubleshoot-item">
            <h3>🎤 La transcription ne fonctionne pas</h3>
            <ol>
                <li>Vérifiez que <strong>Vicsia</strong> est autorisé à accéder au microphone :
                    <br><em>Préférences Système → Sécurité → Confidentialité → Microphone</em></li>
                <li>Vérifiez que votre microphone est bien branché et sélectionné</li>
                <li>Relancez l'application avec le bouton "Relancer" dans le Dashboard</li>
            </ol>
        </div>

        <div class="troubleshoot-item">
            <h3>📋 Le texte ne se colle pas</h3>
            <ol>
                <li>Autorisez <strong>Vicsia</strong> dans les paramètres d'Accessibilité :
                    <br><em>Préférences Système → Sécurité → Confidentialité → Accessibilité</em></li>
                <li>Si Vicsia n'apparaît pas dans la liste :
                    <ul>
                        <li>Cliquez sur le "+" pour l'ajouter manuellement</li>
                        <li>Naviguez vers <code>/Applications/Vicsia.app</code></li>
                    </ul>
                </li>
                <li>Si ça ne fonctionne toujours pas :
                    <ul>
                        <li>Retirez Vicsia de la liste (bouton "-")</li>
                        <li>Relancez l'application</li>
                        <li>Réautorisez quand la demande apparaît</li>
                    </ul>
                </li>
            </ol>
        </div>

        <div class="troubleshoot-item">
            <h3>🔑 Erreur "Clé API non configurée"</h3>
            <ol>
                <li>Allez dans <a href="/settings">Settings</a> → API Keys</li>
                <li>Obtenez une clé Mistral sur <a href="https://console.mistral.ai" target="_blank">console.mistral.ai</a></li>
                <li>Collez votre clé et sauvegardez</li>
            </ol>
        </div>

        <div class="troubleshoot-item">
            <h3>⚡ L'application ne répond plus</h3>
            <ol>
                <li>Utilisez le bouton "Relancer" dans le Dashboard</li>
                <li>Si ça ne fonctionne pas, utilisez "Force Kill" (menu Quitter)</li>
                <li>En dernier recours, forcez l'arrêt via le Moniteur d'activité macOS</li>
            </ol>
        </div>
    </div>
</section>

<section class="help-section">
    <div class="help-card">
        <h2>Conseils macOS</h2>

        <div class="tip-item">
            <strong>Permissions Accessibilité</strong>
            <p>macOS demande l'autorisation Accessibilité pour permettre à Vicsia de coller du texte dans d'autres applications. C'est normal et sécurisé.</p>
        </div>

        <div class="tip-item">
            <strong>Terminal vs Application</strong>
            <p>Si vous lancez Vicsia depuis le Terminal, il hérite des permissions du Terminal. Si vous lancez l'app directement, elle a besoin de ses propres permissions.</p>
        </div>

        <div class="tip-item">
            <strong>Après une mise à jour</strong>
            <p>Parfois macOS révoque les permissions après une mise à jour. Si Vicsia ne fonctionne plus, revérifiez les permissions Accessibilité.</p>
        </div>
    </div>
</section>

<section class="help-section">
    <div class="help-card help-card-secondary">
        <h2>Besoin d'aide ?</h2>
        <p>Si vous rencontrez un problème non documenté, vous pouvez :</p>
        <ul>
            <li>Consulter les logs dans le Terminal (si lancé en mode développement)</li>
            <li>Signaler un bug sur <a href="https://github.com/TMDray/IAVocal/issues" target="_blank">GitHub Issues</a></li>
        </ul>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
async function checkHealth() {
    const container = document.getElementById('health-checks');
    container.innerHTML = '<p class="loading">Vérification en cours...</p>';

    try {
        const res = await fetch('/api/system-health');
        const data = await res.json();
        renderHealthChecks(data);
    } catch (e) {
        container.innerHTML = '<p class="error">Erreur de connexion au serveur</p>';
    }
}

function renderHealthChecks(data) {
    const container = document.getElementById('health-checks');

    if (!data.checks || data.checks.length === 0) {
        container.innerHTML = '<p>Aucune vérification disponible</p>';
        return;
    }

    container.innerHTML = data.checks.map(check => {
        const icon = check.ok ? '✅' : '❌';
        const statusClass = check.ok ? 'health-ok' : 'health-error';
        const fixHtml = check.ok ? '' : `<div class="health-fix">→ ${check.fix}</div>`;
        return `
            <div class="health-check ${statusClass}">
                <span class="health-icon">${icon}</span>
                <span class="health-name">${check.name}</span>
                <span class="health-message">${check.message}</span>
                ${fixHtml}
            </div>
        `;
    }).join('');
}

// Check on page load
checkHealth();
</script>
{% endblock %}