@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Tipos de Conocimiento'])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <h6>Tipos de Conocimiento</h6>
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#typeModal">
                            <i class="fas fa-plus"></i> Nuevo Tipo
                        </button>
                    </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" id="types-table">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nombre</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Slug</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Data Type</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">IA</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Entries</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="types-tbody">
                                    <tr>
                                        <td colspan="6" class="text-center py-4">
                                            <div class="spinner-border text-primary" role="status"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

    <div class="modal fade" id="typeModal" tabindex="-1" aria-labelledby="typeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="typeModalLabel">Nuevo Tipo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="typeForm">
                    <div class="modal-body">
                        <input type="hidden" id="typeId" name="id">

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="typeName" class="form-label">Nombre</label>
                                <input type="text" class="form-control" id="typeName" name="name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="typeSlug" class="form-label">Slug</label>
                                <input type="text" class="form-control" id="typeSlug" name="slug" placeholder="auto">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="typeDataType" class="form-label">Data Type</label>
                                <select class="form-select" id="typeDataType" name="data_type" required>
                                    <option value="content">content</option>
                                    <option value="event">event</option>
                                    <option value="dataset">dataset</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="typeSortOrder" class="form-label">Orden</label>
                                <input type="number" class="form-control" id="typeSortOrder" name="sort_order" value="0">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="typeIcon" class="form-label">Icono</label>
                                <input type="text" class="form-control" id="typeIcon" name="icon">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="typeColor" class="form-label">Color</label>
                                <input type="text" class="form-control" id="typeColor" name="color">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="typeDescription" class="form-label">Descripción</label>
                            <textarea class="form-control" id="typeDescription" name="description" rows="3"></textarea>
                        </div>

                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="typeAiEnabled" name="ai_enabled">
                                <label class="form-check-label" for="typeAiEnabled">IA habilitada</label>
                            </div>
                        </div>

                        <div id="aiConfig" style="display:none;">
                            <div class="mb-3">
                                <label for="typeAiPrompt" class="form-label">System Prompt</label>
                                <textarea class="form-control" id="typeAiPrompt" name="ai_system_prompt" rows="4"></textarea>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="typeAiTemp" class="form-label">Temperature</label>
                                    <input type="number" step="0.01" class="form-control" id="typeAiTemp" name="ai_temperature" value="0.10">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="typeAiTokens" class="form-label">Max Tokens</label>
                                    <input type="number" class="form-control" id="typeAiTokens" name="ai_max_tokens" value="2000">
                                </div>
                            </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 bg-gradient-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    let currentTypes = [];

    document.addEventListener('DOMContentLoaded', function () {
        loadTypes();
        document.getElementById('typeForm').addEventListener('submit', saveType);
        document.getElementById('typeAiEnabled').addEventListener('change', toggleAiConfig);
    });

    function toggleAiConfig() {
        const enabled = document.getElementById('typeAiEnabled').checked;
        document.getElementById('aiConfig').style.display = enabled ? 'block' : 'none';
    }

    async function loadTypes() {
        try {
            const response = await fetch('/api/v1/knowledge-types');
            const data = await response.json();
            if (data.success) {
                currentTypes = data.data;
                renderTypes(data.data);
            }
        } catch (error) {
            console.error('Error loading types:', error);
        }
    }

    function renderTypes(types) {
        const tbody = document.getElementById('types-tbody');
        if (!types || types.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="text-center">No hay tipos</td></tr>';
            return;
        }

        let html = '';
        types.forEach(type => {
            html += `
                <tr>
                    <td>
                        <div class="d-flex px-2 py-1">
                            <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">${type.name}</h6>
                                <p class="text-xs text-secondary mb-0">${type.description || ''}</p>
                            </div>
                        </div>
                    </td>
                    <td><span class="text-sm text-secondary">${type.slug}</span></td>
                    <td><span class="text-sm text-secondary">${type.data_type}</span></td>
                    <td><span class="text-sm text-secondary">${type.ai_enabled ? 'Sí' : 'No'}</span></td>
                    <td><span class="text-sm text-secondary">${type.entries_count || 0}</span></td>
                    <td class="text-center">
                        <div class="d-flex align-items-center justify-content-center gap-1">
                            <button class="btn btn-link text-secondary mb-0 px-2" onclick="editType(${type.id})" title="Editar">
                                <i class="fas fa-edit text-success" style="font-size: 14px;"></i>
                            </button>
                            <button class="btn btn-link text-secondary mb-0 px-2" onclick="deleteType(${type.id})" title="Eliminar">
                                <i class="fas fa-trash text-danger" style="font-size: 14px;"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `;
        });

        tbody.innerHTML = html;
    }

    function editType(id) {
        const type = currentTypes.find(t => t.id === id);
        if (!type) return;

        document.getElementById('typeModalLabel').textContent = 'Editar Tipo';
        document.getElementById('typeId').value = type.id;
        document.getElementById('typeName').value = type.name || '';
        document.getElementById('typeSlug').value = type.slug || '';
        document.getElementById('typeDataType').value = type.data_type || 'content';
        document.getElementById('typeSortOrder').value = type.sort_order || 0;
        document.getElementById('typeIcon').value = type.icon || '';
        document.getElementById('typeColor').value = type.color || '';
        document.getElementById('typeDescription').value = type.description || '';
        document.getElementById('typeAiEnabled').checked = !!type.ai_enabled;
        document.getElementById('typeAiPrompt').value = type.ai_system_prompt || '';
        document.getElementById('typeAiTemp').value = type.ai_temperature || 0.10;
        document.getElementById('typeAiTokens').value = type.ai_max_tokens || 2000;
        toggleAiConfig();

        new bootstrap.Modal(document.getElementById('typeModal')).show();
    }

    async function saveType(event) {
        event.preventDefault();

        const formData = new FormData(event.target);
        const typeId = formData.get('id');
        const isEdit = typeId && typeId !== '';

        const payload = {
            name: formData.get('name'),
            slug: formData.get('slug'),
            description: formData.get('description'),
            data_type: formData.get('data_type'),
            icon: formData.get('icon'),
            color: formData.get('color'),
            ai_enabled: formData.get('ai_enabled') === 'on',
            ai_system_prompt: formData.get('ai_system_prompt'),
            ai_temperature: formData.get('ai_temperature'),
            ai_max_tokens: formData.get('ai_max_tokens'),
            sort_order: formData.get('sort_order')
        };

        const url = isEdit ? `/api/v1/knowledge-types/${typeId}` : '/api/v1/knowledge-types';
        const method = isEdit ? 'PUT' : 'POST';

        try {
            const response = await fetch(url, {
                method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                },
                body: JSON.stringify(payload)
            });

            const result = await response.json();
            if (result.success) {
                bootstrap.Modal.getInstance(document.getElementById('typeModal')).hide();
                loadTypes();
            } else {
                alert(result.message || 'Error al guardar');
            }
        } catch (error) {
            console.error('Error saving type:', error);
        }
    }

    async function deleteType(id) {
        if (!confirm('¿Eliminar este tipo?')) return;

        try {
            const response = await fetch(`/api/v1/knowledge-types/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                }
            });
            const result = await response.json();
            if (result.success) {
                loadTypes();
            } else {
                alert(result.message || 'Error al eliminar');
            }
        } catch (error) {
            console.error('Error deleting type:', error);
        }
    }

    document.getElementById('typeModal').addEventListener('hidden.bs.modal', function () {
        document.getElementById('typeModalLabel').textContent = 'Nuevo Tipo';
        document.getElementById('typeForm').reset();
        document.getElementById('typeId').value = '';
        document.getElementById('aiConfig').style.display = 'none';
    });
</script>
@endpush