@extends('layouts.app')

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Base de Conocimiento'])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <!-- Header de la página -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md me-3">
                                        <i class="ni ni-books text-white text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                    <div>
                                        <h6 class="text-dark font-weight-bolder mb-1" id="business-name">Nombre del Negocio</h6>
                                        <p class="text-muted text-sm mb-0" id="business-info">Información del negocio</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex justify-content-end">
                                    <button class="btn bg-gradient-success me-2" onclick="addKnowledgeCategory()">
                                        <i class="fas fa-plus me-2"></i>Agregar Entrada
                                    </button>
                                    <button class="btn bg-gradient-info me-2" onclick="loadKnowledgeCategories()">
                                        <i class="fas fa-sync me-2"></i>Actualizar
                                    </button>
                                    <a href="{{ route('page', ['page' => 'businesses']) }}" class="btn bg-gradient-secondary">
                                        <i class="fas fa-arrow-left me-2"></i>Volver a Negocios
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Filtros -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label">Buscar entradas</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                    <input type="text" class="form-control" id="kb-search" placeholder="Buscar por nombre o descripción...">
                                    <button class="btn btn-primary" type="button" onclick="searchKnowledgeCategories()">
                                        Buscar
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Filtrar por estado</label>
                                <select class="form-select" id="kb-category-filter">
                                    <option value="">Todas las entradas</option>
                                    <option value="active">Solo activas</option>
                                    <option value="inactive">Solo inactivas</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabla de entradas -->
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Entradas de Conocimiento</h6>
                            <span class="badge bg-gradient-info" id="kb-categories-count">0 entradas</span>
                        </div>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0 table-hover" id="kb-categories-table">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3" style="width: 8%;">ID</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 20%;">Entrada</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 45%;">Descripción</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">Estado</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 15%;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="kb-categories-tbody">
                                    <tr>
                                        <td colspan="5" class="text-center py-4">
                                            <div class="spinner-border text-primary" role="status">
                                                <span class="visually-hidden">Cargando entradas...</span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @include('layouts.footers.auth.footer')
    </div>

    <!-- Modal para crear/editar entrada de conocimiento -->
    <div class="modal fade" id="knowledgeCategoryModal" tabindex="-1" aria-labelledby="knowledgeCategoryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="knowledgeCategoryModalLabel">Nueva Entrada de Conocimiento</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="knowledgeCategoryForm">
                    <div class="modal-body">
                        <input type="hidden" id="kb-category-id" name="id">
                        <input type="hidden" id="kb-business-id" name="business_id">
                        
                        <div class="mb-3">
                            <label for="kb-category-name" class="form-label">Nombre de la Entrada</label>
                            <input type="text" class="form-control" id="kb-category-name" name="name" required>
                            <div class="form-text">Ej: horarios, contacto, ubicacion, precios, informacion_general</div>
                        </div>

                        <div class="mb-3">
                            <label for="kb-category-description" class="form-label">Descripción</label>
                            <textarea class="form-control" id="kb-category-description" name="description" rows="6" required></textarea>
                            <div class="form-text">Información detallada sobre esta entrada para el bot de WhatsApp</div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="kb-category-active" name="is_active" checked>
                                <label class="form-check-label" for="kb-category-active">
                                    Entrada activa
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Guardar Entrada</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal para ver detalle de entrada -->
    <div class="modal fade" id="knowledgeCategoryDetailModal" tabindex="-1" aria-labelledby="knowledgeCategoryDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="knowledgeCategoryDetailModalLabel">Detalle de Entrada</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Nombre de la Entrada</h6>
                            <p id="detail-category-name" class="text-muted">-</p>
                        </div>
                        <div class="col-md-6">
                            <h6>Estado</h6>
                            <p id="detail-category-status" class="text-muted">-</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <h6>Descripción</h6>
                            <p id="detail-category-description" class="text-muted">-</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="editKnowledgeCategoryFromDetail()">Editar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        let currentKnowledgeCategories = [];
        let selectedBusinessId = null;
        let selectedCategoryId = null;

        document.addEventListener('DOMContentLoaded', function() {
            // Obtener business ID de URL
            const urlParams = new URLSearchParams(window.location.search);
            selectedBusinessId = urlParams.get('business_id');
            
            if (selectedBusinessId) {
                loadBusinessInfo(selectedBusinessId);
                loadKnowledgeCategories(selectedBusinessId);
            } else {
                // Redirigir a businesses si no hay business_id
                window.location.href = '{{ route("page", ["page" => "businesses"]) }}';
            }
            
            // Event listeners
            document.getElementById('knowledgeCategoryForm').addEventListener('submit', saveKnowledgeCategory);
            document.getElementById('kb-search').addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    searchKnowledgeCategories();
                }
            });
            document.getElementById('kb-category-filter').addEventListener('change', filterKnowledgeCategories);
        });

        // Cargar información del negocio
        async function loadBusinessInfo(businessId) {
            try {
                const response = await fetch(`/api/v1/businesses/${businessId}`);
                const data = await response.json();
                
                if (data.success) {
                    const business = data.data;
                    document.getElementById('business-name').textContent = business.name;
                    document.getElementById('business-info').textContent = `${business.business_type} - ${business.whatsapp_client?.client_name || 'Sin cliente'}`;
                }
            } catch (error) {
                console.error('Error loading business info:', error);
            }
        }

        // Cargar entradas de conocimiento
        async function loadKnowledgeCategories(businessId = null) {
            const id = businessId || selectedBusinessId;
            try {
                const response = await fetch(`/api/v1/knowledge?business_id=${id}`);
                const data = await response.json();
                
                if (data.success) {
                    currentKnowledgeCategories = data.data.data;
                    updateKnowledgeCategoriesTable(data.data.data);
                    updateKnowledgeCategoriesCount(data.data.data.length);
                }
            } catch (error) {
                console.error('Error loading knowledge categories:', error);
                document.getElementById('kb-categories-tbody').innerHTML = 
                    '<tr><td colspan="5" class="text-center text-danger">Error al cargar entradas</td></tr>';
            }
        }

        // Actualizar tabla de entradas
        function updateKnowledgeCategoriesTable(categories) {
            const tbody = document.getElementById('kb-categories-tbody');
            
            if (categories.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No se encontraron entradas</td></tr>';
                return;
            }
            
            let html = '';
            categories.forEach(category => {
                const statusBadge = category.is_active ? 
                    '<span class="badge badge-sm bg-gradient-success">Activo</span>' : 
                    '<span class="badge badge-sm bg-gradient-secondary">Inactivo</span>';
                
                const truncatedDescription = category.description.length > 100 ? 
                    category.description.substring(0, 100) + '...' : category.description;
                
                html += `
                    <tr>
                        <td class="text-sm font-weight-bold ps-3">${category.id}</td>
                        <td>
                            <span class="badge badge-lg bg-gradient-info">${category.name.replace('_', ' ').toUpperCase()}</span>
                        </td>
                        <td>
                            <p class="text-sm mb-0">${truncatedDescription}</p>
                        </td>
                        <td class="align-middle text-center text-sm">
                            ${statusBadge}
                        </td>
                        <td class="align-middle text-center">
                            <div class="d-flex align-items-center justify-content-center gap-1">
                                <button class="btn btn-outline-primary btn-sm" onclick="viewKnowledgeCategory(${category.id})" title="Ver detalle">
                                    Ver
                                </button>
                                <button class="btn btn-outline-success btn-sm" onclick="editKnowledgeCategory(${category.id})" title="Editar">
                                    Editar
                                </button>
                                <button class="btn btn-outline-info btn-sm" onclick="testKnowledgeCategory(${category.id})" title="Probar con bot">
                                    Probar
                                </button>
                                <button class="btn btn-outline-danger btn-sm" onclick="deleteKnowledgeCategory(${category.id})" title="Eliminar">
                                    Eliminar
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });
            
            tbody.innerHTML = html;
        }

        // Actualizar contador de entradas
        function updateKnowledgeCategoriesCount(count) {
            document.getElementById('kb-categories-count').textContent = `${count} entradas`;
        }

        // Agregar nueva entrada
        function addKnowledgeCategory() {
            document.getElementById('knowledgeCategoryModalLabel').textContent = 'Nueva Entrada de Conocimiento';
            document.getElementById('knowledgeCategoryForm').reset();
            document.getElementById('kb-category-id').value = '';
            document.getElementById('kb-business-id').value = selectedBusinessId;
            document.getElementById('kb-category-active').checked = true;
            
            const modal = new bootstrap.Modal(document.getElementById('knowledgeCategoryModal'));
            modal.show();
        }

        // Editar entrada
        function editKnowledgeCategory(categoryId) {
            const category = currentKnowledgeCategories.find(c => c.id === categoryId);
            if (!category) return;
            
            document.getElementById('knowledgeCategoryModalLabel').textContent = 'Editar Entrada de Conocimiento';
            document.getElementById('kb-category-id').value = category.id;
            document.getElementById('kb-business-id').value = category.business_id;
            document.getElementById('kb-category-name').value = category.name;
            document.getElementById('kb-category-description').value = category.description;
            document.getElementById('kb-category-active').checked = category.is_active;
            
            const modal = new bootstrap.Modal(document.getElementById('knowledgeCategoryModal'));
            modal.show();
        }

        // Ver detalle de entrada
        function viewKnowledgeCategory(categoryId) {
            const category = currentKnowledgeCategories.find(c => c.id === categoryId);
            if (!category) return;
            
            selectedCategoryId = categoryId;
            document.getElementById('detail-category-name').textContent = category.name.replace('_', ' ').toUpperCase();
            document.getElementById('detail-category-status').innerHTML = category.is_active ? 
                '<span class="badge bg-gradient-success">Activo</span>' : 
                '<span class="badge bg-gradient-secondary">Inactivo</span>';
            document.getElementById('detail-category-description').textContent = category.description;
            
            const modal = new bootstrap.Modal(document.getElementById('knowledgeCategoryDetailModal'));
            modal.show();
        }

        // Editar desde modal de detalle
        function editKnowledgeCategoryFromDetail() {
            const detailModal = bootstrap.Modal.getInstance(document.getElementById('knowledgeCategoryDetailModal'));
            detailModal.hide();
            
            setTimeout(() => {
                editKnowledgeCategory(selectedCategoryId);
            }, 300);
        }

        // Probar entrada con bot
        function testKnowledgeCategory(categoryId) {
            const category = currentKnowledgeCategories.find(c => c.id === categoryId);
            if (!category) return;
            
            alert(`Probando entrada: ${category.name}\\n\\nEsta función conectará con el bot de WhatsApp para probar la respuesta.`);
        }

        // Eliminar entrada
        async function deleteKnowledgeCategory(categoryId) {
            const category = currentKnowledgeCategories.find(c => c.id === categoryId);
            if (!category) return;
            
            if (!confirm(`¿Estás seguro de que deseas eliminar la entrada "${category.name}"?`)) {
                return;
            }
            
            try {
                const response = await fetch(`/api/v1/knowledge/${categoryId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });
                
                const data = await response.json();
                
                if (data.success) {
                    loadKnowledgeCategories();
                    alert('Entrada eliminada exitosamente');
                } else {
                    alert('Error al eliminar la entrada: ' + (data.message || 'Error desconocido'));
                }
            } catch (error) {
                console.error('Error deleting category:', error);
                alert('Error al eliminar la entrada');
            }
        }

        // Guardar entrada
        async function saveKnowledgeCategory(e) {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const categoryData = {
                business_id: formData.get('business_id'),
                name: formData.get('name'),
                description: formData.get('description'),
                is_active: formData.get('is_active') === 'on' ? 1 : 0
            };
            
            const categoryId = formData.get('id');
            const isEdit = categoryId && categoryId !== '';
            
            try {
                const response = await fetch(`/api/v1/knowledge${isEdit ? `/${categoryId}` : ''}`, {
                    method: isEdit ? 'PUT' : 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify(categoryData)
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('knowledgeCategoryModal'));
                    modal.hide();
                    
                    loadKnowledgeCategories();
                    alert(`Entrada ${isEdit ? 'actualizada' : 'creada'} exitosamente`);
                } else {
                    alert('Error al guardar la entrada: ' + (data.message || 'Error desconocido'));
                }
            } catch (error) {
                console.error('Error saving category:', error);
                alert('Error al guardar la entrada');
            }
        }

        // Buscar entradas
        function searchKnowledgeCategories() {
            const searchTerm = document.getElementById('kb-search').value.toLowerCase();
            const filtered = currentKnowledgeCategories.filter(category => 
                category.name.toLowerCase().includes(searchTerm) || 
                category.description.toLowerCase().includes(searchTerm)
            );
            
            updateKnowledgeCategoriesTable(filtered);
            updateKnowledgeCategoriesCount(filtered.length);
        }

        // Filtrar entradas
        function filterKnowledgeCategories() {
            const filterValue = document.getElementById('kb-category-filter').value;
            let filtered = currentKnowledgeCategories;
            
            if (filterValue === 'active') {
                filtered = currentKnowledgeCategories.filter(category => category.is_active);
            } else if (filterValue === 'inactive') {
                filtered = currentKnowledgeCategories.filter(category => !category.is_active);
            }
            
            updateKnowledgeCategoriesTable(filtered);
            updateKnowledgeCategoriesCount(filtered.length);
        }
    </script>
@endpush