<?php ob_start(); ?>

<!-- Header avec statut IA -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Statut IA -->
    <div class="bg-white rounded-2xl p-6 border border-slate-200">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <div class="w-12 h-12 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-xl flex items-center justify-center mr-4">
                    <i class="fas fa-robot text-white text-xl"></i>
                </div>
                <div>
                    <h3 class="font-bold text-slate-800">Assistant IA</h3>
                    <p class="text-sm text-slate-500">ChatGPT intégré</p>
                </div>
            </div>
            <?php if ($aiConfigured): ?>
                <span class="flex items-center px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm font-medium">
                    <span class="w-2 h-2 bg-emerald-500 rounded-full mr-2 animate-pulse"></span>
                    Actif
                </span>
            <?php else: ?>
                <span class="flex items-center px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm font-medium">
                    <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
                    Non configuré
                </span>
            <?php endif; ?>
        </div>
        <p class="text-sm text-slate-600">
            <?php if ($aiConfigured): ?>
                L'IA répond automatiquement aux clients en utilisant vos FAQ et le contexte de votre entreprise.
            <?php else: ?>
                Contactez l'administrateur pour activer l'IA ChatGPT.
            <?php endif; ?>
        </p>
    </div>

    <!-- Stats utilisation -->
    <div class="bg-white rounded-2xl p-6 border border-slate-200">
        <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-xl flex items-center justify-center mr-4">
                <i class="fas fa-chart-line text-white text-xl"></i>
            </div>
            <div>
                <h3 class="font-bold text-slate-800">Utilisation</h3>
                <p class="text-sm text-slate-500">Statistiques IA</p>
            </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <p class="text-2xl font-bold text-slate-800"><?= number_format($aiStats['total_requests'] ?? 0) ?></p>
                <p class="text-xs text-slate-500">Requêtes IA</p>
            </div>
            <div>
                <p class="text-2xl font-bold text-slate-800"><?= number_format($aiStats['total_tokens'] ?? 0) ?></p>
                <p class="text-xs text-slate-500">Tokens utilisés</p>
            </div>
        </div>
    </div>

    <!-- FAQ Count -->
    <div class="bg-white rounded-2xl p-6 border border-slate-200">
        <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mr-4">
                <i class="fas fa-question-circle text-white text-xl"></i>
            </div>
            <div>
                <h3 class="font-bold text-slate-800">Base de connaissances</h3>
                <p class="text-sm text-slate-500">FAQ pour l'IA</p>
            </div>
        </div>
        <p class="text-3xl font-bold text-slate-800"><?= count($faqs) ?></p>
        <p class="text-sm text-slate-500">Questions/Réponses configurées</p>
    </div>
</div>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
    <!-- Liste FAQ -->
    <div class="xl:col-span-2 bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-gradient-to-r from-slate-50 to-white">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mr-3">
                    <i class="fas fa-book text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-slate-800">FAQ - Base de connaissances</h3>
                    <p class="text-sm text-slate-500">L'IA utilise ces informations pour répondre aux clients</p>
                </div>
            </div>
            <a href="<?= BASE_URL ?>/admin/ia/faq/create" class="flex items-center px-4 py-2 bg-gradient-to-r from-cyan-500 to-emerald-500 hover:from-cyan-600 hover:to-emerald-600 text-white rounded-xl text-sm font-medium transition">
                <i class="fas fa-plus mr-2"></i>Ajouter
            </a>
        </div>

        <?php if (empty($faqs)): ?>
            <div class="p-12 text-center">
                <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-lightbulb text-3xl text-slate-400"></i>
                </div>
                <h4 class="font-semibold text-slate-700 mb-2">Aucune FAQ configurée</h4>
                <p class="text-slate-500 mb-6">Ajoutez des questions/réponses pour enrichir les connaissances de l'IA</p>
                <a href="<?= BASE_URL ?>/admin/ia/faq/create" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-cyan-500 to-emerald-500 text-white rounded-xl font-medium">
                    <i class="fas fa-plus mr-2"></i>Créer ma première FAQ
                </a>
            </div>
        <?php else: ?>
            <div class="divide-y divide-slate-100">
                <?php foreach ($faqs as $faq): ?>
                <div class="p-5 hover:bg-slate-50 transition group">
                    <div class="flex items-start justify-between">
                        <div class="flex-1 pr-4">
                            <div class="flex items-center mb-2">
                                <span class="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs font-medium mr-2">
                                    <?= htmlspecialchars($faq['categorie'] ?? 'Général') ?>
                                </span>
                                <?php if ($faq['is_active']): ?>
                                    <span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded text-xs">Actif</span>
                                <?php else: ?>
                                    <span class="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-xs">Inactif</span>
                                <?php endif; ?>
                            </div>
                            <h4 class="font-semibold text-slate-800 mb-1">
                                <i class="fas fa-question text-cyan-500 mr-2"></i>
                                <?= htmlspecialchars($faq['question']) ?>
                            </h4>
                            <p class="text-sm text-slate-600 line-clamp-2">
                                <i class="fas fa-reply text-emerald-500 mr-2"></i>
                                <?= htmlspecialchars(substr($faq['reponse'], 0, 150)) ?><?= strlen($faq['reponse']) > 150 ? '...' : '' ?>
                            </p>
                            <div class="mt-2 flex items-center text-xs text-slate-400">
                                <span><i class="fas fa-eye mr-1"></i><?= $faq['views_count'] ?? 0 ?> utilisations</span>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition">
                            <a href="<?= BASE_URL ?>/admin/ia/faq/<?= $faq['id'] ?>/edit" class="w-9 h-9 bg-slate-100 hover:bg-blue-100 rounded-lg flex items-center justify-center text-slate-500 hover:text-blue-600 transition">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="<?= BASE_URL ?>/admin/ia/faq/<?= $faq['id'] ?>/delete" method="POST" onsubmit="return confirm('Supprimer cette FAQ ?')">
                                <button type="submit" class="w-9 h-9 bg-slate-100 hover:bg-red-100 rounded-lg flex items-center justify-center text-slate-500 hover:text-red-600 transition">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Section Documents -->
        <div class="mt-8 bg-white rounded-2xl border border-slate-200 overflow-hidden">
            <div class="p-6 border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-gradient-to-br from-orange-500 to-amber-500 rounded-xl flex items-center justify-center mr-3">
                            <i class="fas fa-file-alt text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-800">Documents & Documentation</h3>
                            <p class="text-sm text-slate-500">Téléchargez des fichiers pour enrichir l'IA</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Formulaire upload -->
            <form action="<?= BASE_URL ?>/admin/ia/documents" method="POST" enctype="multipart/form-data" class="p-5 border-b border-slate-100 bg-slate-50">
                <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Titre du document</label>
                        <input type="text" name="titre" class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-cyan-500" placeholder="Ex: Guide produits">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Description (optionnel)</label>
                        <input type="text" name="description" class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-cyan-500" placeholder="Brève description">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Fichier (TXT, PDF, MD, CSV)</label>
                        <div class="flex items-center space-x-2">
                            <input type="file" name="document" accept=".txt,.pdf,.md,.csv" required class="w-full px-3 py-1.5 border border-slate-200 rounded-lg text-sm file:mr-2 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:bg-cyan-50 file:text-cyan-700">
                            <button type="submit" class="px-4 py-2 bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white rounded-lg text-sm font-medium whitespace-nowrap">
                                <i class="fas fa-upload mr-1"></i>Ajouter
                            </button>
                        </div>
                    </div>
                </div>
                <p class="text-xs text-slate-500 mt-2"><i class="fas fa-info-circle mr-1"></i>Max 5MB. Le contenu sera extrait et utilisé par l'IA pour répondre aux questions.</p>
            </form>

            <!-- Liste documents -->
            <?php if (empty($documents)): ?>
                <div class="p-8 text-center">
                    <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-folder-open text-2xl text-slate-400"></i>
                    </div>
                    <p class="text-slate-500">Aucun document. Téléchargez vos guides, manuels ou documentations.</p>
                </div>
            <?php else: ?>
                <div class="divide-y divide-slate-100">
                    <?php foreach ($documents as $doc): ?>
                    <div class="p-4 hover:bg-slate-50 transition group flex items-center justify-between">
                        <div class="flex items-center flex-1">
                            <div class="w-10 h-10 bg-<?= $doc['type_fichier'] === 'pdf' ? 'red' : ($doc['type_fichier'] === 'txt' ? 'blue' : 'green') ?>-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-file-<?= $doc['type_fichier'] === 'pdf' ? 'pdf' : ($doc['type_fichier'] === 'txt' ? 'alt' : 'code') ?> text-<?= $doc['type_fichier'] === 'pdf' ? 'red' : ($doc['type_fichier'] === 'txt' ? 'blue' : 'green') ?>-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center">
                                    <h4 class="font-medium text-slate-800"><?= htmlspecialchars($doc['titre']) ?></h4>
                                    <?php if ($doc['is_active']): ?>
                                        <span class="ml-2 px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded text-xs">Actif</span>
                                    <?php else: ?>
                                        <span class="ml-2 px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-xs">Inactif</span>
                                    <?php endif; ?>
                                </div>
                                <p class="text-sm text-slate-500">
                                    <?= strtoupper($doc['type_fichier']) ?> • <?= round($doc['taille_fichier'] / 1024, 1) ?> KB
                                    <?php if ($doc['description']): ?>
                                        • <?= htmlspecialchars(substr($doc['description'], 0, 50)) ?>
                                    <?php endif; ?>
                                </p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition">
                            <form action="<?= BASE_URL ?>/admin/ia/documents/<?= $doc['id'] ?>/toggle" method="POST">
                                <button type="submit" class="w-8 h-8 bg-slate-100 hover:bg-blue-100 rounded-lg flex items-center justify-center text-slate-500 hover:text-blue-600 transition" title="<?= $doc['is_active'] ? 'Désactiver' : 'Activer' ?>">
                                    <i class="fas fa-<?= $doc['is_active'] ? 'eye-slash' : 'eye' ?>"></i>
                                </button>
                            </form>
                            <form action="<?= BASE_URL ?>/admin/ia/documents/<?= $doc['id'] ?>/delete" method="POST" onsubmit="return confirm('Supprimer ce document ?')">
                                <button type="submit" class="w-8 h-8 bg-slate-100 hover:bg-red-100 rounded-lg flex items-center justify-center text-slate-500 hover:text-red-600 transition">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Configuration IA -->
    <div class="space-y-6">
        <!-- Configuration du contexte -->
        <div class="bg-white rounded-2xl border border-slate-200">
            <div class="p-5 border-b border-slate-100">
                <div class="flex items-center">
                    <div class="w-9 h-9 bg-cyan-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-cog text-cyan-600"></i>
                    </div>
                    <span class="font-bold text-slate-800">Configuration IA</span>
                </div>
            </div>
            <form action="<?= BASE_URL ?>/admin/ia/config" method="POST" class="p-5">
                <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
                
                <?php $iaConfig = json_decode($entreprise['ia_config'] ?? '{}', true); ?>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Contexte de l'entreprise</label>
                        <textarea name="contexte" rows="3" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-sm" placeholder="Décrivez votre entreprise et vos services..."><?= htmlspecialchars($iaConfig['contexte'] ?? '') ?></textarea>
                        <p class="text-xs text-slate-500 mt-1">L'IA utilisera ce contexte pour personnaliser ses réponses</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Ton de l'IA</label>
                        <select name="ton" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-cyan-500 text-sm">
                            <option value="professionnel" <?= ($iaConfig['ton'] ?? '') === 'professionnel' ? 'selected' : '' ?>>Professionnel</option>
                            <option value="amical" <?= ($iaConfig['ton'] ?? '') === 'amical' ? 'selected' : '' ?>>Amical</option>
                            <option value="formel" <?= ($iaConfig['ton'] ?? '') === 'formel' ? 'selected' : '' ?>>Formel</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Instructions spéciales</label>
                        <textarea name="instructions" rows="3" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-cyan-500 text-sm" placeholder="Instructions supplémentaires pour l'IA..."><?= htmlspecialchars($iaConfig['instructions'] ?? '') ?></textarea>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="auto_escalade" id="auto_escalade" class="w-4 h-4 text-cyan-600 rounded" <?= ($iaConfig['auto_escalade'] ?? false) ? 'checked' : '' ?>>
                        <label for="auto_escalade" class="ml-2 text-sm text-slate-700">Escalader automatiquement si l'IA ne peut pas répondre</label>
                    </div>
                </div>

                <button type="submit" class="mt-6 w-full py-3 bg-gradient-to-r from-cyan-500 to-emerald-500 hover:from-cyan-600 hover:to-emerald-600 text-white rounded-xl font-medium transition">
                    <i class="fas fa-save mr-2"></i>Enregistrer
                </button>
            </form>
        </div>

        <!-- Conseils -->
        <div class="bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-2xl p-6 text-white">
            <h4 class="font-bold mb-3"><i class="fas fa-lightbulb mr-2"></i>Conseils pour enrichir l'IA</h4>
            <ul class="space-y-2 text-sm text-cyan-50">
                <li class="flex items-start">
                    <i class="fas fa-check mr-2 mt-1 text-emerald-300"></i>
                    Ajoutez vos questions les plus fréquentes
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check mr-2 mt-1 text-emerald-300"></i>
                    Soyez précis dans les réponses
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check mr-2 mt-1 text-emerald-300"></i>
                    Utilisez des catégories pour organiser
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check mr-2 mt-1 text-emerald-300"></i>
                    Mettez à jour régulièrement
                </li>
            </ul>
        </div>
    </div>
</div>

<?php 
$content = ob_get_clean();
$title = 'Configuration IA - ' . APP_NAME;
$pageTitle = 'Intelligence Artificielle';
include VIEWS_PATH . '/layouts/main.php';
?>
