<?php ob_start(); ?>

<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">🔗 Intégration Widget</h1>
            <p class="text-gray-500 mt-1">Intégrez le widget de support sur votre site web</p>
        </div>
    </div>

    <!-- API Key -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
        <h3 class="font-semibold text-gray-900 mb-4">🔑 Votre clé API</h3>
        <div class="flex items-center gap-3">
            <input type="text" readonly value="<?= htmlspecialchars($entreprise['api_key'] ?? 'Non configurée') ?>" 
                   class="flex-1 px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg font-mono text-sm" id="api-key-input">
            <button onclick="copyToClipboard('api-key-input')" class="px-4 py-3 bg-cyan-500 text-white rounded-lg hover:bg-cyan-600 transition" title="Copier">
                <i class="fas fa-copy"></i>
            </button>
            <button onclick="regenerateApiKey()" class="px-4 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition" title="Régénérer">
                <i class="fas fa-sync-alt"></i>
            </button>
        </div>
        <p class="text-sm text-gray-500 mt-2">Cette clé identifie votre entreprise. Gardez-la confidentielle.</p>
        <p class="text-sm text-amber-600 mt-1"><i class="fas fa-exclamation-triangle mr-1"></i>Attention : régénérer la clé invalidera l'ancienne sur tous vos sites.</p>
    </div>

    <!-- Code d'intégration simple -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
        <h3 class="font-semibold text-gray-900 mb-4">📋 Code d'intégration (Simple)</h3>
        <p class="text-gray-600 mb-4">Copiez ce code et collez-le juste avant la balise <code class="bg-gray-100 px-2 py-1 rounded">&lt;/body&gt;</code> de votre site.</p>
        
        <div class="relative">
            <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-sm" id="simple-code"><code>&lt;!-- mySupport Widget --&gt;
&lt;script&gt;
  window.mySupportConfig = {
    apiKey: '<?= htmlspecialchars($entreprise['api_key'] ?? 'VOTRE_CLE_API') ?>',
    baseUrl: '<?= BASE_URL ?>'
  };
&lt;/script&gt;
&lt;script src="<?= BASE_URL ?>/widget/embed.js"&gt;&lt;/script&gt;</code></pre>
            <button onclick="copyCode('simple-code')" class="absolute top-2 right-2 px-3 py-1 bg-white/10 text-white rounded hover:bg-white/20 text-sm">
                Copier
            </button>
        </div>
    </div>

    <!-- Code d'intégration avancé -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
        <h3 class="font-semibold text-gray-900 mb-4">⚙️ Code d'intégration (Personnalisé)</h3>
        <p class="text-gray-600 mb-4">Version avec options de personnalisation.</p>
        
        <div class="relative">
            <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-sm" id="advanced-code"><code>&lt;!-- mySupport Widget - Configuration avancée --&gt;
&lt;script&gt;
  window.mySupportConfig = {
    // Clé API (obligatoire)
    apiKey: '<?= htmlspecialchars($entreprise['api_key'] ?? 'VOTRE_CLE_API') ?>',
    baseUrl: '<?= BASE_URL ?>',
    
    // Personnalisation
    position: 'bottom-right',    // bottom-right, bottom-left, top-right, top-left
    primaryColor: '#06b6d4',     // Couleur principale (hex)
    buttonText: 'Support',       // Texte du bouton
    
    // Message d'accueil
    welcomeMessage: 'Bonjour ! Comment puis-je vous aider ?',
    
    // Auto-ouverture (optionnel)
    autoOpen: false,             // Ouvrir automatiquement
    autoOpenDelay: 5000          // Délai en millisecondes (5 secondes)
  };
&lt;/script&gt;
&lt;script src="<?= BASE_URL ?>/widget/embed.js"&gt;&lt;/script&gt;</code></pre>
            <button onclick="copyCode('advanced-code')" class="absolute top-2 right-2 px-3 py-1 bg-white/10 text-white rounded hover:bg-white/20 text-sm">
                Copier
            </button>
        </div>
    </div>

    <!-- Preview -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
        <h3 class="font-semibold text-gray-900 mb-4">👁️ Aperçu</h3>
        <p class="text-gray-600 mb-4">Voici à quoi ressemblera le bouton sur votre site :</p>
        
        <div class="bg-gray-100 rounded-lg p-8 relative min-h-[200px] flex items-center justify-center">
            <p class="text-gray-500">Votre site web</p>
            
            <!-- Preview Button -->
            <button id="preview-btn" style="
                position: absolute;
                bottom: 20px;
                right: 20px;
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 12px 20px;
                background: linear-gradient(135deg, #06b6d4, #10b981);
                color: white;
                border: none;
                border-radius: 50px;
                cursor: pointer;
                box-shadow: 0 4px 20px rgba(0,0,0,0.2);
                font-size: 14px;
                font-weight: 600;
            ">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                </svg>
                <span>Support</span>
            </button>
        </div>
    </div>

    <!-- Instructions -->
    <div class="bg-gradient-to-r from-cyan-50 to-emerald-50 rounded-xl p-6 border border-cyan-100">
        <h3 class="font-semibold text-gray-900 mb-4">📖 Instructions</h3>
        <ol class="list-decimal list-inside space-y-2 text-gray-700">
            <li>Copiez le code d'intégration ci-dessus</li>
            <li>Ouvrez le fichier HTML de votre site (ou le template)</li>
            <li>Collez le code juste avant <code class="bg-white px-2 py-1 rounded">&lt;/body&gt;</code></li>
            <li>Sauvegardez et rechargez votre page</li>
            <li>Le bouton "Support" apparaîtra en bas à droite !</li>
        </ol>
        
        <div class="mt-4 p-4 bg-white/50 rounded-lg">
            <p class="text-sm text-gray-600">
                <strong>💡 Astuce :</strong> Vous pouvez personnaliser la couleur, la position et le texte du bouton 
                en modifiant les options dans <code>mySupportConfig</code>.
            </p>
        </div>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    var input = document.getElementById(elementId);
    input.select();
    document.execCommand('copy');
    showToast('Copié !');
}

function copyCode(elementId) {
    var code = document.getElementById(elementId).textContent;
    var textarea = document.createElement('textarea');
    textarea.value = code;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    showToast('Code copié !');
}

function showToast(message, type) {
    var toast = document.createElement('div');
    toast.textContent = message;
    var bg = type === 'error' ? '#ef4444' : '#10b981';
    toast.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:' + bg + ';color:white;padding:12px 24px;border-radius:8px;z-index:9999;animation:fadeIn 0.3s';
    document.body.appendChild(toast);
    setTimeout(function() {
        toast.remove();
    }, 2000);
}

function regenerateApiKey() {
    if (!confirm('Êtes-vous sûr de vouloir régénérer la clé API ?\n\nL\'ancienne clé ne fonctionnera plus sur vos sites.')) {
        return;
    }
    
    fetch('<?= BASE_URL ?>/admin/integration/regenerate-key', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'}
    })
    .then(function(res) { return res.json(); })
    .then(function(data) {
        if (data.success) {
            document.getElementById('api-key-input').value = data.api_key;
            showToast('Nouvelle clé API générée !');
            // Recharger la page pour mettre à jour les codes
            setTimeout(function() { location.reload(); }, 1500);
        } else {
            showToast('Erreur: ' + data.error, 'error');
        }
    })
    .catch(function() {
        showToast('Erreur de connexion', 'error');
    });
}
</script>

<?php 
$content = ob_get_clean();
$title = 'Intégration Widget - ' . APP_NAME;
$pageTitle = 'Intégration Widget';
include VIEWS_PATH . '/layouts/main.php';
?>
