<?php
/**
 * ASISMA CRM - Listado de Leads
 */
?>
<!-- Header -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight">Leads</h1>
        <p class="text-slate-400 text-sm mt-1">Gestión de leads.</p>
    </div>
    
    <div class="flex gap-3">
        <a href="<?php echo APP_URL; ?>/leads/tablero"
           class="flex items-center justify-center gap-2 px-5 py-3 bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-200 rounded-xl text-sm font-semibold transition-colors">
            <i data-lucide="kanban" class="w-4 h-4 text-blue-400"></i>
            <span>Tablero</span>
        </a>
        <a href="<?php echo APP_URL; ?>/leads/crear"
           class="flex items-center justify-center gap-2 px-5 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl text-sm font-semibold shadow-lg shadow-blue-600/10 hover:shadow-blue-600/25 transition-all">
            <i data-lucide="plus-circle" class="w-4 h-4"></i>
            <span>Ingresar Nuevo Lead</span>
        </a>
    </div>
</div>

<!-- Filtros (compartido con el tablero: leads/_filtros.php) -->
<!-- Contadores del embudo: cuantos leads hay en cada estado (respetan los
     demas filtros activos). Pinchar un estado filtra por el; pinchar el activo
     o "Todos" quita el filtro de estado. Colores centrales de arr_estados_embudo. -->
<?php
$qsBase = array();
foreach (array('q', 'origen', 'vertical_id', 'marca_id', 'producto_id', 'franquiciado_id') as $claveQs) {
    if (!empty($filters[$claveQs])) $qsBase[$claveQs] = $filters[$claveQs];
}
$urlConEstado = function($estado) use ($qsBase) {
    $qs = $qsBase;
    if ($estado !== '') $qs['estado'] = $estado;
    return APP_URL . '/leads' . ($qs ? '?' . http_build_query($qs) : '');
};
// "Todos" excluye los PERDIDOS: por defecto la lista no los muestra (solo
// aparecen pinchando su card o filtrando por estado)
$cuentaPerdidos = isset($conteoEstados[ESTADO_PERDIDO]) ? $conteoEstados[ESTADO_PERDIDO] : 0;
$totalEmbudo = array_sum($conteoEstados) - $cuentaPerdidos;
?>
<!-- Las cards se reparten todo el ancho (flex-1) -->
<div class="flex flex-wrap items-stretch gap-2 mb-5">
    <a href="<?php echo $urlConEstado(''); ?>" title="Ver todos los estados (sin perdidos)"
       class="flex-1 min-w-[92px] flex flex-col justify-center gap-0.5 rounded-xl border bg-slate-900 px-3.5 py-2 transition-colors <?php echo $filters['estado'] === '' ? 'border-slate-500 bg-slate-800/60 ring-1 ring-slate-500' : 'border-slate-800 hover:border-slate-600'; ?>">
        <span class="text-lg font-bold leading-none text-slate-100 font-mono"><?php echo $totalEmbudo; ?></span>
        <span class="text-[10px] uppercase tracking-wide font-semibold text-slate-500">Todos</span>
    </a>
    <?php foreach (arr_estados_embudo() as $estadoKey => $estInfo):
        $cuenta = isset($conteoEstados[$estadoKey]) ? $conteoEstados[$estadoKey] : 0;
        $activo = $filters['estado'] === $estadoKey;
        // En la card el label va corto: la parte antes de la barra
        $labelCorto = trim(strtok($estInfo['label'], '/'));
    ?>
    <a href="<?php echo $urlConEstado($activo ? '' : $estadoKey); ?>"
       title="<?php echo $activo ? 'Quitar el filtro de este estado' : 'Filtrar por este estado'; ?>"
       class="flex-1 min-w-[92px] flex flex-col justify-center gap-0.5 rounded-xl border bg-slate-900 px-3.5 py-2 transition-colors <?php echo $activo ? 'border-slate-500 bg-slate-800/60 ring-1 ring-slate-500' : 'border-slate-800 hover:border-slate-600'; ?>">
        <span class="text-lg font-bold leading-none font-mono <?php echo $estInfo['texto']; ?>"><?php echo $cuenta; ?></span>
        <span class="text-[10px] uppercase tracking-wide font-semibold text-slate-500"><?php echo $labelCorto; ?></span>
    </a>
    <?php endforeach; ?>
</div>

<?php $filtrosAction = APP_URL . '/leads'; include __DIR__ . '/_filtros.php'; ?>

<!-- Table Card -->
<div class="bg-slate-900 border border-slate-800/80 rounded-2xl overflow-hidden shadow-xl">
    <div class="overflow-x-auto">
        <table class="w-full text-left text-sm border-collapse">
            <thead>
                <tr class="bg-slate-950 border-b border-slate-800 text-slate-400 uppercase text-xs tracking-wider">
                    <th class="px-6 py-4 font-semibold">Lead</th>
                    <th class="px-6 py-4 font-semibold">Interés</th>
                    <th class="px-6 py-4 font-semibold">Origen</th>
                    <th class="px-6 py-4 font-semibold">Estado</th>
                    <th class="px-6 py-4 font-semibold">Franquiciado</th>
                    <th class="px-6 py-4 font-semibold">Fecha de Creación</th>
                    <th class="px-6 py-4 font-semibold text-right">Acciones</th>
                </tr>
            </thead>
            <!-- OJO: sin divide-y aqui — divide-* pinta border-color en los 4
                 lados de cada fila (menos la primera) y taparia de gris la
                 marca de color del borde izquierdo. Separador: border-b por fila. -->
            <tbody class="text-slate-300">
                <?php if (empty($leads)): ?>
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-slate-500">
                            <div class="w-12 h-12 rounded-xl bg-slate-950 border border-slate-850 flex items-center justify-center mx-auto mb-3">
                                <i data-lucide="inbox" class="w-6 h-6"></i>
                            </div>
                            <span class="text-sm font-semibold">No se encontraron leads</span>
                            <p class="text-xs text-slate-600 mt-1">Pruebe ajustando los filtros o ingrese uno nuevo.</p>
                        </td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($leads as $lead):
                        $esAdmin = SessionHelper::isAdmin();
                        $datosVisibles = $lead['datos_liberados'] || $esAdmin;
                        $telMostrar    = $datosVisibles ? $lead['telefono_real'] : (isset($lead['telefono_enmascarado']) && $lead['telefono_enmascarado'] ? $lead['telefono_enmascarado'] : '****');
                        $correoMostrar = $datosVisibles ? (isset($lead['correo_real']) ? $lead['correo_real'] : '') : (isset($lead['correo_enmascarado']) && $lead['correo_enmascarado'] ? $lead['correo_enmascarado'] : '');
                        $_estados = arr_estados_embudo();
                        $estData  = isset($_estados[$lead['estado_embudo']]) ? $_estados[$lead['estado_embudo']] : array('label' => $lead['estado_embudo'], 'texto' => 'text-slate-400', 'fila' => 'border-l-slate-500/60');
                    ?>
                        <tr class="fila-lead hover:bg-slate-800/30 transition-colors cursor-pointer border-b border-b-slate-850 border-l-4 <?php echo $estData['fila']; ?>" data-lead="<?php echo $lead['id']; ?>">
                            <!-- Contact / Empresa -->
                            <td class="px-6 py-4">
                                <div class="font-bold text-slate-100"><?php echo htmlspecialchars($lead['contacto_nombre']); ?></div>
                                <?php if (!empty($lead['empresa_razon_social'])): ?>
                                <div class="text-xs text-slate-500 mt-0.5"><?php echo htmlspecialchars($lead['empresa_razon_social']); ?></div>
                                <?php endif; ?>
                                <div class="text-xs text-slate-400 mt-1 flex items-center gap-2">
                                    <span class="flex items-center gap-0.5">
                                        <i data-lucide="<?php echo $datosVisibles ? 'phone' : 'eye-off'; ?>" class="w-3 h-3 <?php echo $datosVisibles ? 'text-slate-500' : 'text-amber-500'; ?>"></i>
                                        <?php echo htmlspecialchars($telMostrar); ?>
                                        <?php if ($datosVisibles && $lead['telefono_real']): ?>
                                        <button type="button" onclick="copiarTexto('<?php echo htmlspecialchars($lead['telefono_real']); ?>', this)" title="Copiar teléfono"
                                                class="p-0.5 rounded text-slate-500 hover:text-white hover:bg-slate-800 transition-colors">
                                            <i data-lucide="copy" class="w-3 h-3"></i>
                                        </button>
                                        <?php endif; ?>
                                    </span>
                                    <?php if ($correoMostrar): ?>
                                    <span class="w-1 h-1 rounded-full bg-slate-700"></span>
                                    <span class="flex items-center gap-0.5"><i data-lucide="mail" class="w-3 h-3 text-slate-500"></i>
                                        <?php if ($datosVisibles): ?>
                                        <a href="mailto:<?php echo htmlspecialchars($correoMostrar); ?>" class="hover:text-blue-400 hover:underline transition-colors"><?php echo htmlspecialchars($correoMostrar); ?></a>
                                        <button type="button" onclick="copiarTexto(this.getAttribute('data-correo'), this)" data-correo="<?php echo htmlspecialchars($correoMostrar); ?>" title="Copiar correo"
                                                class="p-0.5 rounded text-slate-500 hover:text-white hover:bg-slate-800 transition-colors">
                                            <i data-lucide="copy" class="w-3 h-3"></i>
                                        </button>
                                        <?php else: ?>
                                        <?php echo htmlspecialchars($correoMostrar); ?>
                                        <?php endif; ?>
                                    </span>
                                    <?php endif; ?>
                                    <?php if (!$datosVisibles): ?>
                                    <span class="text-amber-400 text-[10px] font-semibold">pendiente liberar</span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            
                            <!-- Interest (Vertical, Marca, Producto) -->
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center rounded-md bg-slate-850 px-2 py-0.5 text-xs font-semibold text-slate-300 border border-slate-700"><?php echo htmlspecialchars($lead['vertical_nombre']); ?></span>
                                <?php if (!empty($lead['marca_nombre'])): ?>
                                    <div class="text-xs font-medium text-slate-400 mt-1 flex items-center gap-1">
                                        <i data-lucide="tag" class="w-3 h-3 text-slate-500"></i>
                                        <span><?php echo htmlspecialchars($lead['marca_nombre']); ?></span>
                                    </div>
                                <?php endif; ?>
                                <?php if (!empty($lead['producto_nombre'])): ?>
                                    <div class="text-xs text-slate-500 mt-0.5"><?php echo htmlspecialchars($lead['producto_nombre']); ?></div>
                                <?php endif; ?>
                            </td>

                            <!-- Origin -->
                            <td class="px-6 py-4">
                                <div class="text-xs font-semibold text-slate-300 capitalize"><?php $_orig = arr_origenes_lead(); echo isset($_orig[$lead['origen']]) ? $_orig[$lead['origen']] : $lead['origen']; ?></div>
                                <div class="text-[10px] text-slate-500 mt-0.5 font-mono"><?php echo htmlspecialchars($lead['region_nombre']); ?></div>
                            </td>

                            <!-- Embudo State (texto simple; el color marca la fila entera) -->
                            <td class="px-6 py-4">
                                <span class="text-xs font-semibold <?php echo $estData['texto']; ?>">
                                    <?php echo $estData['label']; ?>
                                </span>
                            </td>

                            <!-- Assigned User -->
                            <td class="px-6 py-4 text-xs">
                                <?php if (!empty($lead['usuario_asignado_nombre'])): ?>
                                    <div>
                                        <div class="font-bold text-slate-200"><?php echo htmlspecialchars($lead['usuario_asignado_nombre']); ?></div>
                                        <div class="text-[10px] text-slate-500 mt-0.5 truncate max-w-[150px]"><?php echo htmlspecialchars(isset($lead['franquiciado_nombre']) ? $lead['franquiciado_nombre'] : 'Matriz'); ?></div>
                                    </div>
                                <?php else: ?>
                                    <span class="text-slate-500 font-medium italic flex items-center gap-1">
                                        <i data-lucide="alert-circle" class="w-3.5 h-3.5 text-amber-500"></i>
                                        <span>Sin Asignar</span>
                                    </span>
                                <?php endif; ?>
                            </td>

                            <!-- Created At -->
                            <td class="px-6 py-4 text-xs text-slate-400 font-mono">
                                <?php echo date('d-m-Y H:i', strtotime($lead['created_at'])); ?>
                            </td>

                            <!-- Action buttons -->
                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end gap-2">
                                    <a href="<?php echo APP_URL; ?>/leads/ver?id=<?php echo $lead['id']; ?>" 
                                       class="p-2 bg-slate-850 hover:bg-slate-800 text-slate-300 rounded-lg hover:text-white transition-colors border border-slate-700/60"
                                       title="Ver Ficha">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                    </a>
                                    <a href="<?php echo APP_URL; ?>/leads/editar?id=<?php echo $lead['id']; ?>" 
                                       class="p-2 bg-slate-850 hover:bg-slate-800 text-slate-400 hover:text-white rounded-lg transition-colors border border-slate-700/60"
                                       title="Editar">
                                        <i data-lucide="edit" class="w-4 h-4"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <script>
    // Toda la fila abre la ficha del lead (los botones internos siguen aparte)
    $(document).on('click', '.fila-lead', function(e) {
        if ($(e.target).closest('a, button').length) return;
        window.location = '<?php echo APP_URL; ?>/leads/ver?id=' + $(this).data('lead');
    });
    </script>

    <!-- Pagination -->
    <?php if ($totalPages > 1): ?>
        <div class="bg-slate-950 border-t border-slate-800 px-6 py-4 flex items-center justify-between">
            <span class="text-xs text-slate-500">Mostrando página <?php echo $page; ?> de <?php echo $totalPages; ?></span>
            <div class="flex gap-2">
                <a href="<?php echo $page > 1 ? APP_URL . '/leads?' . http_build_query(array_merge($_GET, ['page' => $page - 1])) : '#'; ?>" 
                   class="px-3 py-1.5 bg-slate-900 border border-slate-800 text-slate-400 hover:text-white text-xs font-semibold rounded-lg transition-colors <?php echo $page <= 1 ? 'opacity-50 pointer-events-none' : ''; ?>">
                    Anterior
                </a>
                <a href="<?php echo $page < $totalPages ? APP_URL . '/leads?' . http_build_query(array_merge($_GET, ['page' => $page + 1])) : '#'; ?>" 
                   class="px-3 py-1.5 bg-slate-900 border border-slate-800 text-slate-400 hover:text-white text-xs font-semibold rounded-lg transition-colors <?php echo $page >= $totalPages ? 'opacity-50 pointer-events-none' : ''; ?>">
                    Siguiente
                </a>
            </div>
        </div>
    <?php endif; ?>
</div>
