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

@push('css')
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">

<!-- Conversation Modal CSS -->
<link rel="stylesheet" href="{{ asset('css/conversation-modal.css') }}">

<style>

/* WhatsApp Message Bubbles */
.msg-bubble {
    max-width: 65%;
    padding: 8px 12px 5px 12px;
    margin: 2px;
    border-radius: 7.5px;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 0.5px rgba(0,0,0,.13);
    font-size: 14.2px;
    line-height: 1.4;
    display: inline-block;
}

.msg-sent {
    background: #dcf8c6 !important;
    border-bottom-right-radius: 2px;
    margin-right: 8px;
}

.msg-received {
    background: #ffffff !important;
    border-bottom-left-radius: 2px;
    margin-left: 8px;
}

.msg-text {
    margin-bottom: 2px;
    word-wrap: break-word;
    white-space: pre-wrap;
    color: #111b21;
    font-size: 14.2px;
    line-height: 1.4;
}

.msg-time {
    font-size: 11px;
    color: rgba(0,0,0,.45);
    margin-top: 1px;
    text-align: right;
    user-select: none;
    font-weight: 400;
}

.msg-received .msg-time {
    color: #667781;
}

.msg-sender {
    font-size: 12.8px;
    font-weight: 500;
    margin-bottom: 3px;
    color: #00a884;
    cursor: pointer;
}

.msg-received .msg-sender {
    color: #667781;
}

/* Date Divider Styles */
.date-divider {
    text-align: center;
    margin: 15px 0;
    clear: both;
    display: block;
    width: 100%;
}

.date-divider span {
    background: rgba(255,255,255,0.95);
    padding: 5px 12px;
    border-radius: 7.5px;
    font-size: 12.5px;
    color: #667781;
    box-shadow: 0 1px 1px rgba(0,0,0,.06);
    font-weight: 400;
    display: inline-block;
}

/* Messages Container */
.messages-container {
    padding: 12px 0;
    position: relative;
    z-index: 1;
}

/* Message Group Styles */
.message-group {
    margin-bottom: 2px;
    clear: both;
    width: 100%;
}

.message-group.new-group {
    margin-top: 8px;
}

/* Ensure proper message alignment */
.message-group > div {
    width: 100%;
    display: flex;
    margin-bottom: 2px;
}

/* User messages (left side) */
.message-group > div[style*="flex-start"] .msg-bubble {
    background: #ffffff;
    border-bottom-left-radius: 2px;
    margin-left: 8px;
    margin-right: auto;
}

/* Bot/Agent messages (right side) */
.message-group > div[style*="flex-end"] .msg-bubble {
    background: #dcf8c6;
    border-bottom-right-radius: 2px;
    margin-right: 8px;
    margin-left: auto;
}

/* DataTable Styles */
.table-hover-effect {
    background-color: #f8f9fa !important;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.conversation-cell {
    transition: all 0.2s ease;
}

/* DataTables Dashboard Integration */
.dataTables_wrapper {
    font-size: 0.875rem;
}

/* Length (Show entries) selector */
.dataTables_wrapper .dataTables_length {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length label {
    color: #67748e;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #495057;
    background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center/16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 80px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.075);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: #5e72e4;
    box-shadow: 0 0 0 0.2rem rgba(94, 114, 228, 0.25);
    outline: 0;
}

/* Search input */
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_filter label {
    color: #67748e;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataTables_wrapper .dataTables_filter input[type="search"] {
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #495057;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.075);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    min-width: 250px;
    -webkit-appearance: none;
}

.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
    border-color: #5e72e4;
    box-shadow: 0 0 0 0.2rem rgba(94, 114, 228, 0.25);
    outline: 0;
}

.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder {
    color: #adb5bd;
    opacity: 1;
}

/* Info text */
.dataTables_wrapper .dataTables_info {
    font-size: 0.875rem;
    color: #67748e;
    margin-bottom: 0;
    padding: 0.5rem 0;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    justify-content: center;
    margin-bottom: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid #dee2e6;
    color: #67748e !important;
    padding: 0.5rem;
    margin: 0 2px;
    border-radius: 50%;
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    line-height: 1;
    background: white;
    min-width: 36px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: #f8f9fa !important;
    border-color: #adb5bd;
    color: #495057 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #5e72e4 !important;
    border-color: #5e72e4 !important;
    color: white !important;
    box-shadow: 0 4px 6px rgba(94, 114, 228, 0.3);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #4c63d2 !important;
    border-color: #4c63d2 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 10px rgba(94, 114, 228, 0.4);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #adb5bd !important;
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Processing indicator */
.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 60px;
    margin-left: -100px;
    margin-top: -30px;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.95);
    color: #67748e;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    z-index: 1000;
}

/* Table styling improvements */
.dataTables_wrapper table.table {
    margin-bottom: 0;
}

.dataTables_wrapper .table thead th {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    color: #67748e;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 0.75rem;
}

/* Responsive controls */
.dataTables_wrapper .dt-buttons {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dt-buttons .btn {
    margin-right: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Custom wrapper layout */
.dataTables_wrapper .row {
    margin: 0;
}

.dataTables_wrapper .row .col-sm-12.col-md-6 {
    padding: 0;
    margin-bottom: 1rem;
}

.dataTables_wrapper .row:last-child .col-sm-12.col-md-5,
.dataTables_wrapper .row:last-child .col-sm-12.col-md-7 {
    padding: 0;
    display: flex;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_filter input[type="search"] {
        min-width: 200px;
    }
    
    .dataTables_wrapper .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
    }
    
    .dataTables_wrapper .d-flex.justify-content-between {
        align-items: center !important;
    }
    
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 0.5rem;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.8rem;
        margin: 0 1px;
        padding: 0.375rem;
    }
}

/* Navigation buttons (previous/next) styling */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: 1rem;
    font-weight: 700;
}

/* First and Last buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.first,
.dataTables_wrapper .dataTables_paginate .paginate_button.last {
    font-size: 0.9rem;
    font-weight: 700;
}

/* Custom placeholder for search */
.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder {
    color: #adb5bd;
    font-style: italic;
}

/* Hide any remaining fixed-plugin elements */
.fixed-plugin {
    display: none !important;
}
</style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Gestión de Conversaciones'])
    <div class="container-fluid py-4">
        <!-- Filtros -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <h6>Filtros de Búsqueda</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="form-group mb-0">
                                    <label for="category-filter">Categoría</label>
                                    <select class="form-control filter-select" id="category-filter">
                                        <option value="">Todas las categorías</option>
                                        <option value="tandeo">Tandeo</option>
                                        <option value="adeudos">Adeudos</option>
                                        <option value="eventos">Eventos</option>
                                        <option value="tramites">Trámites</option>
                                        <option value="consultas_generales">Consultas Generales</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <label for="channel-filter">Canal</label>
                                    <select class="form-control filter-select" id="channel-filter">
                                        <option value="">Todos</option>
                                        <option value="call">Conversación</option>
                                        <option value="whatsapp">WhatsApp</option>
                                        <option value="unknown">Desconocido</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group mb-0">
                                    <label for="direction-filter">Dirección</label>
                                    <select class="form-control filter-select" id="direction-filter">
                                        <option value="">Todas</option>
                                        <option value="inbound">Entrante</option>
                                        <option value="outbound">Saliente</option>
                                        <option value="unknown">Desconocida</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group mb-0">
                                    <label for="date-range-filter">Rango de fecha</label>
                                    <select class="form-control filter-select" id="date-range-filter">
                                        <option value="">Todo</option>
                                        <option value="today">Hoy</option>
                                        <option value="this_week" selected>Esta semana</option>
                                        <option value="this_month">Este mes</option>
                                        <option value="this_year">Este año</option>
                                        <option value="custom">Personalizado</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2" id="custom-date-from-container" style="display: none;">
                                <div class="form-group mb-0">
                                    <label for="date-from">Fecha desde</label>
                                    <input type="date" class="form-control filter-input" id="date-from">
                                </div>
                            </div>
                            <div class="col-md-2" id="custom-date-to-container" style="display: none;">
                                <div class="form-group mb-0">
                                    <label for="date-to">Fecha hasta</label>
                                    <input type="date" class="form-control filter-input" id="date-to">
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="form-group mb-0">
                                    <label for="search-filter">Buscar</label>
                                    <input type="text" class="form-control filter-input" id="search-filter" placeholder="Buscar en conversaciones...">
                                </div>
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <button class="btn btn-primary btn-filter mb-0 w-100" onclick="loadConversations()">
                                        <i class="fas fa-search"></i> Buscar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Lista de Conversaciones - DataTable -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Lista de Conversaciones</h6>
                            <div class="d-flex align-items-center">
                                <span class="badge bg-gradient-info me-2" id="total-count">Cargando...</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div>
                            <table class="table table-flush" id="conversations-datatable" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Conversación</th>
                                        <th>Categoría</th>
                                        <th>Estado</th>
                                        <th>Canal</th>
                                        <th>Actividad</th>
                                        <th>Última Actividad</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- DataTable will populate this -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

    {{-- Conversation Modal Component --}}
    <x-conversation-modal modalId="messagesModal" :showFooter="false" />
@endsection

@push('js')
    <!-- jQuery (required for DataTables) -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    
    <!-- Table Actions -->
    <script src="{{ asset('js/table-actions.js') }}"></script>

    <!-- Conversation Modal -->
    <script src="{{ asset('js/conversation-modal.js') }}"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
    
    <script>
        let conversationsTable;
        let currentConversationId = null;

        // Wait for jQuery to be available
        function initializeApp() {
            console.log('Initializing app...');
            console.log('jQuery available:', typeof jQuery !== 'undefined');
            console.log('$ available:', typeof $ !== 'undefined');
            
            if (typeof jQuery !== 'undefined') {
                jQuery(document).ready(function($) {
                    console.log('jQuery ready, initializing components...');
                    loadClients();
                    
                    // Simple timeout to ensure everything is loaded
                    setTimeout(() => {
                        initializeDataTable();
                    }, 500);
                    
                    // Add event listeners to filters with error handling
                    try {
                        // Category filter
                        document.getElementById('category-filter')?.addEventListener('change', () => {
                            if (conversationsTable && conversationsTable.ajax) {
                                conversationsTable.ajax.reload();
                            }
                        });

                        // Outcome filter
                        // Date range filter
                        document.getElementById('date-range-filter')?.addEventListener('change', function() {
                            const customFromContainer = document.getElementById('custom-date-from-container');
                            const customToContainer = document.getElementById('custom-date-to-container');

                            if (this.value === 'custom') {
                                customFromContainer.style.display = 'block';
                                customToContainer.style.display = 'block';
                            } else {
                                customFromContainer.style.display = 'none';
                                customToContainer.style.display = 'none';

                                if (conversationsTable && conversationsTable.ajax) {
                                    conversationsTable.ajax.reload();
                                }
                            }
                        });

                        // Custom date inputs
                        document.getElementById('date-from')?.addEventListener('change', () => {
                            if (conversationsTable && conversationsTable.ajax) {
                                conversationsTable.ajax.reload();
                            }
                        });

                        document.getElementById('date-to')?.addEventListener('change', () => {
                            if (conversationsTable && conversationsTable.ajax) {
                                conversationsTable.ajax.reload();
                            }
                        });

                        // Search filter
                        document.getElementById('search-filter')?.addEventListener('keyup', function() {
                            if (conversationsTable && conversationsTable.search) {
                                conversationsTable.search(this.value).draw();
                            }
                        });
                    } catch (error) {
                        console.error('Error setting up event listeners:', error);
                    }
                });
            } else {
                console.error('jQuery not loaded. DataTables cannot initialize.');
                // Fallback to simple table if needed
                document.addEventListener('DOMContentLoaded', function() {
                    console.log('DOM loaded, loading clients only...');
                    loadClients();
                    showConversationsError('jQuery no disponible - DataTable no puede inicializarse');
                });
            }
        }

        // Initialize when script loads
        initializeApp();

        // Debug function to test API endpoint
        async function testConversationsAPI() {
            try {
                console.log('Testing conversations API...');
                const response = await fetch('/api/v1/conversations', {
                    credentials: 'same-origin',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                console.log('API Response:', data);
                return data;
            } catch (error) {
                console.error('API Test Error:', error);
                return null;
            }
        }

        // Cargar lista de clientes para el filtro (DISABLED - Single-tenant system)
        async function loadClients() {
            // Single-tenant architecture - no client selection needed
            console.log('Single-tenant mode - skipping client filter');
            return;

            /* DISABLED - Multi-tenant code
            try {
                console.log('Loading clients for filter...');
                const response = await fetch('/api/v1/clients', {
                    credentials: 'same-origin',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                console.log('Clients data received:', data);

                if (data.success) {
                    const select = document.getElementById('client-filter');
                    if (select) {
                        data.data.forEach(client => {
                            const option = document.createElement('option');
                            option.value = client.id;
                            option.textContent = client.client_name || `Cliente ${client.id}`;
                            select.appendChild(option);
                        });
                    } else {
                        console.log('client-filter element not found - user may not have permission to see all clients');
                    }
                } else {
                    throw new Error('API returned success: false');
                }
            } catch (error) {
                console.error('Error loading clients:', error);
            }
            */
        }

        // Initialize DataTable
        function initializeDataTable() {
            console.log('Initializing DataTable...');
            
            // First test if table element exists
            if (!document.getElementById('conversations-datatable')) {
                console.error('Table element #conversations-datatable not found!');
                return;
            }
            
            // Test API endpoint first
            testConversationsAPI().then(testData => {
                if (!testData) {
                    console.error('API test failed, cannot initialize DataTable');
                    showConversationsError('Error: No se puede conectar con la API de conversaciones');
                    return;
                }
                
                console.log('API test passed, initializing DataTable with data:', testData);
                
                try {
                    // Destroy existing table if it exists
                    if (jQuery.fn.DataTable.isDataTable('#conversations-datatable')) {
                        jQuery('#conversations-datatable').DataTable().destroy();
                        jQuery('#conversations-datatable').empty();
                    }
                    
                    console.log('Creating new DataTable instance...');
                    conversationsTable = jQuery('#conversations-datatable').DataTable({
                        processing: true,
                        serverSide: true,
                        responsive: true,
                        destroy: true,
                        language: {
                            processing: 'Procesando...',
                            loadingRecords: 'Cargando...',
                            emptyTable: 'No hay conversaciones disponibles',
                            info: 'Mostrando _START_ a _END_ de _TOTAL_ conversaciones',
                            infoEmpty: 'Mostrando 0 a 0 de 0 conversaciones',
                            infoFiltered: '(filtrado de _MAX_ conversaciones totales)',
                            search: 'Buscar:',
                            paginate: {
                                first: 'Primera',
                                last: 'Última',
                                next: 'Siguiente',
                                previous: 'Anterior'
                            }
                        },
                        ajax: {
                            url: '/api/v1/conversations',
                            type: 'GET',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Accept': 'application/json',
                                'Content-Type': 'application/json'
                            },
                            xhrFields: {
                                withCredentials: true
                            },
                            data: function(d) {
                                console.log('DataTable requesting data with params:', d);

                                // Add custom filters
                                const categoryFilter = document.getElementById('category-filter')?.value;
                                const channelFilter = document.getElementById('channel-filter')?.value;
                                const directionFilter = document.getElementById('direction-filter')?.value;
                                const dateRangeFilter = document.getElementById('date-range-filter')?.value;
                                const dateFrom = document.getElementById('date-from')?.value;
                                const dateTo = document.getElementById('date-to')?.value;

                                if (categoryFilter) d.category = categoryFilter;
                                if (channelFilter) d.channel = channelFilter;
                                if (directionFilter) d.direction = directionFilter;
                                if (dateRangeFilter) d.date_range = dateRangeFilter;
                                if (dateRangeFilter === 'custom') {
                                    if (dateFrom) d.date_from = dateFrom;
                                    if (dateTo) d.date_to = dateTo;
                                }

                                // Map DataTable pagination parameters to Laravel format
                                d.page = Math.floor(d.start / d.length) + 1;
                                d.per_page = d.length;

                                // Handle DataTable search parameter
                                if (d.search && d.search.value) {
                                    d.search = d.search.value;
                                } else {
                                    delete d.search;
                                }

                                // Remove DataTables default parameters we don't need for Laravel API
                                delete d.columns;
                                delete d.order;
                                delete d.start;
                                delete d.length;
                                // Keep draw for DataTables server-side processing

                                console.log('Final request data:', d);
                                return d;
                            },
                            dataSrc: function(json) {
                                console.log('Received data from API:', json);
                                
                                if (!json || !json.success) {
                                    console.error('API response indicates failure:', json);
                                    showConversationsError('Error en la API: ' + (json?.message || 'Respuesta inválida'));
                                    return [];
                                }
                                
                                // For server-side processing, set the total records info
                                const paginationData = json.data;
                                if (paginationData && typeof paginationData === 'object' && paginationData.total !== undefined) {
                                    json.recordsTotal = paginationData.total;
                                    json.recordsFiltered = paginationData.total;
                                    
                                    // Update total count display
                                    const totalElement = document.getElementById('total-count');
                                    if (totalElement) {
                                        totalElement.textContent = `${paginationData.total} conversaciones`;
                                    }
                                    
                                    // Return the conversations array from paginated response
                                    console.log('Processed paginated conversations for DataTable:', paginationData.data);
                                    return paginationData.data || [];
                                } else {
                                    // Fallback for non-paginated response
                                    const conversations = Array.isArray(json.data) ? json.data : [];
                                    json.recordsTotal = conversations.length;
                                    json.recordsFiltered = conversations.length;
                                    
                                    const totalElement = document.getElementById('total-count');
                                    if (totalElement) {
                                        totalElement.textContent = `${conversations.length} conversaciones`;
                                    }
                                    
                                    console.log('Processed conversations for DataTable:', conversations);
                                    return conversations;
                                }
                            },
                            error: function(xhr, error, thrown) {
                                console.error('DataTable AJAX error:', error, thrown, xhr.responseText);
                                showConversationsError('Error al cargar conversaciones: ' + error);
                            }
                        },
                columns: [
                    {
                        data: null,
                        name: 'conversation',
                        orderable: true,
                        render: function(data, type, row) {
                            const userName = row.contact?.name || 'Contacto Anónimo';
                            const userPhone = row.contact?.phone || 'Sin teléfono';
                            const contactId = row.contact?.id;
                            const nameHtml = contactId
                                ? `<a href="/contacts/${contactId}" class="text-sm text-primary fw-semibold">${userName}</a>`
                                : `<span class="text-sm">${userName}</span>`;
                            const avatar = userName.charAt(0).toUpperCase();

                            return `
                                <div class="d-flex px-2 py-1">
                                    <div class="avatar avatar-sm me-3 bg-gradient-primary">
                                        <span class="text-white text-xs">${avatar}</span>
                                    </div>
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="mb-0">${nameHtml}</h6>
                                        <p class="text-xs text-secondary mb-0">${userPhone}</p>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'category',
                        name: 'category',
                        className: 'text-center',
                        orderable: true,
                        render: function(data, type, row) {
                            const category = row.category || 'Sin categoría';
                            const categoryColors = {
                                'ventas': 'success',
                                'soporte': 'info',
                                'informacion': 'primary',
                                'queja': 'warning',
                                'consultas_generales': 'secondary'
                            };
                            const colorClass = categoryColors[category] || 'secondary';

                            return `<span class="badge bg-gradient-${colorClass}">${category}</span>`;
                        }
                    },
                    {
                        data: 'status',
                        name: 'status',
                        className: 'text-center',
                        orderable: true,
                        render: function(data, type, row) {
                            const status = row.status || 'unknown';
                            switch(status) {
                                case 'active':
                                    return '<span class="badge bg-gradient-success">Activa</span>';
                                case 'pending':
                                    return '<span class="badge bg-gradient-warning">Pendiente</span>';
                                case 'resolved':
                                    return '<span class="badge bg-gradient-info">Resuelta</span>';
                                case 'closed':
                                    return '<span class="badge bg-gradient-secondary">Cerrada</span>';
                                default:
                                    return '<span class="badge bg-gradient-secondary">Desconocido</span>';
                            }
                        }
                    },
                    {
                        data: 'channel',
                        name: 'channel',
                        className: 'text-center',
                        orderable: true,
                        render: function(data, type, row) {
                            const label = row.channel_label || row.channel || 'Sin canal';
                            return `<span class="text-xs text-secondary font-weight-bold">${label}</span>`;
                        }
                    },
                    {
                        data: null,
                        name: 'activity',
                        className: 'text-center',
                        orderable: false,
                        render: function(data, type, row) {
                            if (row.channel === 'call') {
                                return `<span class="text-xs text-secondary font-weight-bold">N/D</span>`;
                            }
                            const total = row.total_messages || 0;
                            return `<span class="text-xs text-secondary font-weight-bold">${total} mensajes</span>`;
                        }
                    },
                    {
                        data: null,
                        name: 'last_activity',
                        className: 'text-center',
                        orderable: true,
                        render: function(data, type, row) {
                            const date = row.updated_at || row.last_message_at;
                            return `<span class="text-secondary text-xs font-weight-bold">${formatDate(date)}</span>`;
                        }
                    },
                    {
                        data: null,
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                                <div class="d-flex align-items-center justify-content-center gap-1">
                                    <button class="btn btn-sm btn-outline-primary mb-0"
                                            onclick="viewConversationMessages(${row.id})"
                                            title="Ver conversación">
                                        Ver conversación
                                    </button>
                                </div>
                            `;
                        }
                    }
                ],
                dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex align-items-center"f>>rt<"d-flex justify-content-between align-items-center mt-3"<"text-muted"i><"d-flex"p>>',
                language: {
                    "lengthMenu": "Mostrar _MENU_ conversaciones",
                    "search": "Buscar conversaciones:",
                    "searchPlaceholder": "Escriba para buscar...",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ conversaciones",
                    "infoEmpty": "Mostrando 0 a 0 de 0 conversaciones",
                    "infoFiltered": "(filtrado de _MAX_ conversaciones totales)",
                    "paginate": {
                        "first": "«",
                        "last": "»",
                        "next": "›",
                        "previous": "‹"
                    },
                    "processing": "Cargando conversaciones...",
                    "emptyTable": "No hay conversaciones disponibles",
                    "zeroRecords": "No se encontraron conversaciones que coincidan con la búsqueda"
                },
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
                order: [[5, 'desc']], // Order by last activity desc
                drawCallback: function(settings) {
                    // Add hover effects after table draw
                    jQuery('.conversation-cell').hover(
                        function() { jQuery(this).closest('tr').addClass('table-hover-effect'); },
                        function() { jQuery(this).closest('tr').removeClass('table-hover-effect'); }
                    );
                },
                initComplete: function() {
                    // Add placeholder to search input
                    jQuery('.dataTables_filter input[type="search"]').attr('placeholder', 'Buscar por cliente, teléfono...');
                    
                    // Add tooltips to navigation buttons
                    jQuery('.dataTables_paginate .paginate_button.previous').attr('title', 'Página anterior');
                    jQuery('.dataTables_paginate .paginate_button.next').attr('title', 'Página siguiente');
                    jQuery('.dataTables_paginate .paginate_button.first').attr('title', 'Primera página');
                    jQuery('.dataTables_paginate .paginate_button.last').attr('title', 'Última página');
                }
            });
            
                } catch (error) {
                    console.error('Error initializing DataTable:', error);
                    showConversationsError('Error al inicializar la tabla de conversaciones');
                }
            }).catch(error => {
                console.error('Error testing API:', error);
                showConversationsError('Error al conectar con la API');
            });
        }

        // Show conversations error (for DataTable)
        function showConversationsError(message) {
            console.error('DataTable error:', message);
            
            // Show error in the table container
            const tableContainer = document.getElementById('conversations-datatable_wrapper') || document.getElementById('conversations-datatable').parentElement;
            if (tableContainer) {
                const errorDiv = document.createElement('div');
                errorDiv.className = 'alert alert-danger mt-3';
                errorDiv.innerHTML = `
                    <i class="ni ni-fat-remove me-2"></i>
                    <strong>Error:</strong> ${message}
                    <button type="button" class="btn-close float-end" onclick="this.parentElement.remove()"></button>
                `;
                tableContainer.insertBefore(errorDiv, tableContainer.firstChild);
            }
        }


        // Mostrar error en el modal de conversación
        function showConversationError(message) {
            const body = document.getElementById('conversation-details');
            if (body) {
                body.innerHTML = `
                    <div class="text-center py-5">
                        <i class="ni ni-fat-remove text-danger" style="font-size: 3rem;"></i>
                        <p class="text-danger mt-3 mb-0">${message}</p>
                        <small class="text-muted">Intenta recargar la conversación</small>
                    </div>
                `;
            }
        }

        // Actualizar detalles de conversación en modal
        function updateConversationDetails(conversation) {
            // Actualizar header del modal
            const title = document.getElementById('conversationModalLabel');
            const subtitle = document.getElementById('conversation-subtitle');
            const avatar = document.getElementById('conversation-avatar');
            
            title.textContent = `${conversation.customer?.name || 'Cliente Anónimo'}`;
            subtitle.textContent = `${conversation.customer?.phone || 'Sin teléfono'}`;
            avatar.textContent = (conversation.customer?.name || 'C').charAt(0).toUpperCase();
            
            // Actualizar contenido del modal
            const detailsDiv = document.getElementById('conversation-details');
            
            let html = `
                <!-- Header con información principal -->
                <div class="bg-gradient-light p-4 border-bottom">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar-lg me-3 bg-gradient-primary shadow">
                                    <span class="text-white text-sm font-weight-bold">${(conversation.customer?.name || 'C').charAt(0).toUpperCase()}</span>
                                </div>
                                <div>
                                    <h5 class="mb-0">${conversation.customer?.name || 'Cliente Anónimo'}</h5>
                                    <p class="text-muted mb-0">${conversation.customer?.phone || 'Sin teléfono'}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2">
                                ${getStatusBadge(conversation.status)}
                                ${getPriorityBadge(conversation.priority)}
                            </div>
                            <small class="text-muted">ID: #${conversation.id}</small>
                        </div>
                    </div>
                </div>

                <!-- Métricas principales -->
                <div class="p-4 border-bottom">
                    <h6 class="mb-3"><i class="ni ni-chart-bar-32 me-2"></i>Métricas de la Conversación</h6>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="icon icon-shape icon-sm bg-gradient-primary mx-auto mb-2">
                                    <i class="ni ni-chat-round text-white"></i>
                                </div>
                                <h4 class="text-primary mb-0">${conversation.total_messages || 0}</h4>
                                <p class="text-sm text-muted mb-0">Mensajes</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="icon icon-shape icon-sm bg-gradient-success mx-auto mb-2">
                                    <i class="ni ni-time-alarm text-white"></i>
                                </div>
                                <h4 class="text-success mb-0">${conversation.avg_response_time || '0 min'}</h4>
                                <p class="text-sm text-muted mb-0">Tiempo Respuesta</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="icon icon-shape icon-sm bg-gradient-warning mx-auto mb-2">
                                    <i class="ni ni-satisfied text-white"></i>
                                </div>
                                <h4 class="text-warning mb-0">${conversation.analytics ? (parseFloat(conversation.analytics.satisfaction_score) || 0).toFixed(1) : '—'}/5</h4>
                                <p class="text-sm text-muted mb-0">Satisfacción</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center p-3 bg-light rounded">
                                <div class="icon icon-shape icon-sm bg-gradient-info mx-auto mb-2">
                                    <i class="ni ni-bulb-61 text-white"></i>
                                </div>
                                <h4 class="text-info mb-0">${conversation.analytics?.sentiment || '—'}</h4>
                                <p class="text-sm text-muted mb-0">Sentimiento</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Información detallada -->
                <div class="p-4 border-bottom">
                    <h6 class="mb-3"><i class="ni ni-single-copy-04 me-2"></i>Información Detallada</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item mb-3">
                                <label class="form-label text-sm font-weight-bold">Categoría</label>
                                <p class="text-sm">${conversation.category || 'Sin categoría'}</p>
                            </div>
                            <div class="info-item mb-3">
                                <label class="form-label text-sm font-weight-bold">Fecha de Inicio</label>
                                <p class="text-sm">${formatDate(conversation.created_at)}</p>
                            </div>
                            <div class="info-item mb-3">
                                <label class="form-label text-sm font-weight-bold">Última Actividad</label>
                                <p class="text-sm">${formatDate(conversation.updated_at || conversation.last_message_at)}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item mb-3">
                                <label class="form-label text-sm font-weight-bold">Puntuación de Calidad</label>
                                <p class="text-sm">${(conversation.quality_score || 0).toFixed(1)}/10</p>
                            </div>
                            <div class="info-item mb-3">
                                <label class="form-label text-sm font-weight-bold">Complejidad</label>
                                <p class="text-sm">${conversation.complexity_level || 'No determinada'}</p>
                            </div>
                            <div class="info-item mb-3">
                                <label class="form-label text-sm font-weight-bold">Duración</label>
                                <p class="text-sm">${conversation.duration_minutes || 0} minutos</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notas y comentarios -->
                <div class="p-4">
                    <h6 class="mb-3"><i class="ni ni-paper-diploma me-2"></i>Notas y Comentarios</h6>
                    ${conversation.notes ? `
                        <div class="alert alert-info">
                            <i class="ni ni-notification-70 me-2"></i>
                            ${conversation.notes}
                        </div>
                    ` : `
                        <p class="text-muted text-sm">No hay notas adicionales para esta conversación.</p>
                    `}
                </div>
            `;
            
            detailsDiv.innerHTML = html;
        }

        // Helper functions
        function getStatusBadge(status) {
            const badges = {
                'active': '<span class="badge badge-sm bg-gradient-success">Activa</span>',
                'closed': '<span class="badge badge-sm bg-gradient-secondary">Cerrada</span>',
                'archived': '<span class="badge badge-sm bg-gradient-dark">Archivada</span>'
            };
            return badges[status] || '<span class="badge badge-sm bg-gradient-warning">Desconocido</span>';
        }

        function getPriorityBadge(priority) {
            const badges = {
                'low': '<span class="badge badge-sm bg-gradient-info">Baja</span>',
                'normal': '<span class="badge badge-sm bg-gradient-primary">Normal</span>',
                'high': '<span class="badge badge-sm bg-gradient-warning">Alta</span>',
                'urgent': '<span class="badge badge-sm bg-gradient-danger">Urgente</span>'
            };
            return badges[priority] || '<span class="badge badge-sm bg-gradient-secondary">Sin prioridad</span>';
        }

        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('es-ES', {
                day: '2-digit',
                month: '2-digit',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        function updatePriority(conversationId) {
            // Simple priority update using prompt for now
            const currentPriority = prompt('Nueva prioridad (low, normal, high, urgent):', 'normal');
            if (currentPriority && ['low', 'normal', 'high', 'urgent'].includes(currentPriority)) {
                updateConversationPriority(conversationId, currentPriority);
            } else if (currentPriority !== null) {
                alert('Prioridad inválida. Use: low, normal, high, o urgent');
            }
        }

        // Update conversation priority
        async function updateConversationPriority(conversationId, priority) {
            try {
                const response = await fetch(`/api/v1/conversations/${conversationId}/priority`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                    },
                    body: JSON.stringify({ priority: priority })
                });

                if (response.ok) {
                    const data = await response.json();
                    if (data.success) {
                        alert('Prioridad actualizada correctamente');
                        conversationsTable.ajax.reload(null, false); // Reload DataTable
                    } else {
                        throw new Error(data.message || 'Error al actualizar prioridad');
                    }
                } else {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
            } catch (error) {
                console.error('Error updating priority:', error);
                alert('Error al actualizar la prioridad: ' + error.message);
            }
        }

        // View conversation messages
        // View conversation statistics (kept - not in modal module)
        function viewConversationStats(conversationId) {
            alert(`Estadísticas para conversación ${conversationId} (funcionalidad pendiente)`);
            console.log('View stats for conversation:', conversationId);
            // TODO: Implement conversation statistics modal
        }

        // Export conversation (kept - not in modal module)
        function exportConversation(conversationId) {
            alert(`Exportar conversación ${conversationId} (funcionalidad pendiente)`);
            console.log('Export conversation:', conversationId);
            // TODO: Implement conversation export functionality
        }

        // Get time ago in Spanish (kept - used in table, not in modal)
        function getTimeAgo(dateString) {
            if (!dateString) return 'Desconocido';

            const now = new Date();
            const date = new Date(dateString);
            const diffInSeconds = Math.floor((now - date) / 1000);

            if (diffInSeconds < 60) {
                return 'Hace unos momentos';
            } else if (diffInSeconds < 3600) {
                const minutes = Math.floor(diffInSeconds / 60);
                return `Hace ${minutes} minuto${minutes > 1 ? 's' : ''}`;
            } else if (diffInSeconds < 86400) {
                const hours = Math.floor(diffInSeconds / 3600);
                return `Hace ${hours} hora${hours > 1 ? 's' : ''}`;
            } else if (diffInSeconds < 2592000) {
                const days = Math.floor(diffInSeconds / 86400);
                return `Hace ${days} día${days > 1 ? 's' : ''}`;
            } else {
                return date.toLocaleDateString('es-ES');
            }
        }

        // Get status text in Spanish (kept - used in table, not in modal)
        function getStatusText(status) {
            const statusMap = {
                'active': 'Activa',
                'closed': 'Cerrada',
                'archived': 'Archivada'
            };
            return statusMap[status] || 'Desconocido';
        }

    </script>
@endpush