<?php
/**
 * ASISMA CRM - Tablero Kanban de Leads (estilo Pipedrive)
 * Arrastra una tarjeta a otra columna para cambiar el estado del embudo.
 */
$_estados = arr_estados_embudo();
$_motivos = arr_motivos_perdida();
?>
<!-- Header -->
<div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight">Tablero de Leads</h1>
        <p class="text-slate-400 text-sm mt-1">Arrastra las tarjetas entre etapas para avanzar el embudo.</p>
    </div>
    <div class="flex gap-3">
        <a href="<?php echo APP_URL; ?>/leads"
           class="px-4 py-2.5 bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-200 rounded-xl text-sm font-semibold transition-colors flex items-center gap-1.5">
            <i data-lucide="list" class="w-4 h-4 text-slate-400"></i>
            <span>Vista Lista</span>
        </a>
        <a href="<?php echo APP_URL; ?>/leads/crear"
           class="px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl text-sm font-semibold transition-all shadow-md shadow-blue-600/10 flex items-center gap-1.5">
            <i data-lucide="plus" class="w-4 h-4"></i>
            <span>Nuevo Lead</span>
        </a>
    </div>
</div>

<!-- Filtros (compartido con el listado: leads/_filtros.php) -->
<?php $filtrosAction = APP_URL . '/leads/tablero'; include __DIR__ . '/_filtros.php'; ?>

<!-- Tablero -->
<div class="overflow-x-auto pb-4" id="tableroWrap">
    <div class="flex gap-4 min-w-max" style="min-height: calc(100vh - 240px);">
        <?php foreach ($_estados as $estadoKey => $est): ?>
            <?php $cards = isset($columnas[$estadoKey]) ? $columnas[$estadoKey] : array(); ?>
            <div class="w-72 flex-shrink-0 flex flex-col bg-slate-900/50 border border-slate-800/60 rounded-2xl kanban-col"
                 data-estado="<?php echo $estadoKey; ?>">
                <!-- Cabecera de columna -->
                <div class="px-4 py-3 border-b border-slate-800/60 flex items-center justify-between sticky top-0">
                    <div class="flex items-center gap-2 min-w-0">
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold border <?php echo $est['color']; ?>"><?php echo $est['label']; ?></span>
                    </div>
                    <span class="text-xs font-bold text-slate-500 col-contador"><?php echo count($cards); ?></span>
                </div>

                <!-- Tarjetas -->
                <div class="flex-1 overflow-y-auto p-2.5 space-y-2.5 kanban-drop" data-estado="<?php echo $estadoKey; ?>">
                    <?php foreach ($cards as $lead): ?>
                        <?php
                        $tel = ($lead['datos_liberados'] || SessionHelper::isAdmin())
                            ? $lead['telefono_real']
                            : ($lead['telefono_enmascarado'] ? $lead['telefono_enmascarado'] : '****');
                        $estancado = (int)$lead['dias_sin_movimiento'] >= 5 && !in_array($estadoKey, array('ganado', 'perdido', 'invalido'));
                        ?>
                        <div class="kanban-card bg-slate-900 border <?php echo $estancado ? 'border-amber-600/40' : 'border-slate-800'; ?> rounded-xl p-3 cursor-grab active:cursor-grabbing hover:border-blue-500/50 transition-colors shadow-sm"
                             draggable="true" data-lead="<?php echo $lead['id']; ?>">
                            <div class="flex items-start justify-between gap-2">
                                <a href="<?php echo APP_URL; ?>/leads/ver?id=<?php echo $lead['id']; ?>"
                                   class="text-sm font-bold text-slate-200 hover:text-blue-400 leading-snug" draggable="false">
                                    <?php echo htmlspecialchars($lead['contacto_nombre']); ?>
                                </a>
                                <?php if ($estancado): ?>
                                    <span class="text-[9px] font-bold text-amber-400 bg-amber-500/10 px-1.5 py-0.5 rounded shrink-0" title="<?php echo (int)$lead['dias_sin_movimiento']; ?> días sin movimiento">
                                        <?php echo (int)$lead['dias_sin_movimiento']; ?>d 💤
                                    </span>
                                <?php endif; ?>
                            </div>

                            <?php if ($lead['empresa_nombre']): ?>
                                <p class="text-[11px] text-slate-400 mt-0.5 truncate"><?php echo htmlspecialchars($lead['empresa_nombre']); ?></p>
                            <?php endif; ?>

                            <div class="flex items-center gap-2 mt-2 flex-wrap">
                                <?php if ($lead['vertical_nombre']): ?>
                                    <span class="text-[9px] font-semibold text-blue-400 bg-blue-500/10 border border-blue-500/20 px-1.5 py-0.5 rounded"><?php echo htmlspecialchars($lead['vertical_nombre']); ?></span>
                                <?php endif; ?>
                                <?php if ((int)$lead['total_cotizaciones'] > 0): ?>
                                    <span class="text-[9px] font-semibold text-purple-400 bg-purple-500/10 border border-purple-500/20 px-1.5 py-0.5 rounded" title="Cotizaciones">
                                        📄 <?php echo (int)$lead['total_cotizaciones']; ?><?php echo $lead['monto_cotizado'] ? ' · $' . number_format((float)$lead['monto_cotizado'], 0, ',', '.') : ''; ?>
                                    </span>
                                <?php endif; ?>
                            </div>

                            <div class="flex items-center justify-between mt-2.5 pt-2 border-t border-slate-800/60">
                                <span class="text-[10px] font-mono text-slate-500 flex items-center gap-1">
                                    <?php echo htmlspecialchars($tel); ?>
                                    <?php if ($lead['datos_liberados'] || SessionHelper::isAdmin()): ?>
                                    <button type="button" onclick="copiarTexto('<?php echo htmlspecialchars($lead['telefono_real']); ?>', this)" title="Copiar teléfono" draggable="false"
                                            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 ($lead['vendedor_nombre']): ?>
                                    <span class="text-[9px] font-bold text-slate-400 bg-slate-800/80 px-1.5 py-0.5 rounded-full" title="<?php echo htmlspecialchars($lead['vendedor_nombre']); ?><?php echo $lead['franquiciado_nombre'] ? ' · ' . htmlspecialchars($lead['franquiciado_nombre']) : ''; ?>">
                                        <?php
                                        $iniciales = '';
                                        foreach (explode(' ', $lead['vendedor_nombre']) as $w) { if ($w !== '') $iniciales .= mb_substr($w, 0, 1); }
                                        echo strtoupper(mb_substr($iniciales, 0, 2));
                                        ?>
                                    </span>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                    <?php if (empty($cards)): ?>
                        <div class="kanban-vacio text-center text-slate-600 text-[11px] py-8 border border-dashed border-slate-800 rounded-xl">Sin leads</div>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<!-- Modal motivo de pérdida -->
<div id="modalPerdida" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl w-full max-w-md p-6">
        <h3 class="text-lg font-bold text-white mb-1">Marcar como Perdido</h3>
        <p class="text-xs text-slate-400 mb-4" id="perdidaLeadNombre"></p>
        <div class="space-y-4">
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Motivo *</label>
                <select id="perdidaMotivo" class="w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                    <option value="">-- Seleccionar --</option>
                    <?php foreach ($_motivos as $k => $label): ?>
                        <option value="<?php echo $k; ?>"><?php echo $label; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Nota</label>
                <textarea id="perdidaNota" rows="2" class="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="Detalle del motivo..."></textarea>
            </div>
        </div>
        <div class="flex justify-end gap-4 mt-5">
            <button onclick="cancelarPerdida()" class="px-4 py-2.5 border border-red-500/40 hover:border-red-500/70 hover:bg-red-500/10 text-red-400 rounded-xl text-sm font-semibold transition-colors">Cancelar</button>
            <button onclick="confirmarPerdida()" class="px-5 py-2.5 bg-red-600 hover:bg-red-500 text-white rounded-xl text-sm font-semibold transition-colors">Confirmar Pérdida</button>
        </div>
    </div>
</div>

<style>
    .kanban-card.arrastrando { opacity: .4; transform: rotate(2deg); }
    .kanban-drop.sobre { background: rgba(59, 130, 246, .08); border-radius: 1rem; outline: 2px dashed rgba(59, 130, 246, .4); outline-offset: -4px; }
    html.light .kanban-drop.sobre { background: rgba(59, 130, 246, .06); }
</style>

<script>
$(document).ready(function() {
    var leadArrastrado = null;
    var perdidaPendiente = null; // {leadId, card, colOrigen}

    // ── Drag & Drop nativo ──
    // Toda la card abre la ficha del lead (igual que en el listado). El clic se
    // ignora si viene de un arrastre recien terminado o de un boton/enlace interno.
    var finUltimoArrastre = 0;
    $(document).on('click', '.kanban-card', function(e) {
        if ($(e.target).closest('a, button').length) return;
        if (Date.now() - finUltimoArrastre < 300) return;
        window.location = '<?php echo APP_URL; ?>/leads/ver?id=' + $(this).data('lead');
    });

    $(document).on('dragstart', '.kanban-card', function(e) {
        leadArrastrado = { id: $(this).data('lead'), card: this, colOrigen: $(this).closest('.kanban-drop')[0] };
        $(this).addClass('arrastrando');
        e.originalEvent.dataTransfer.effectAllowed = 'move';
        e.originalEvent.dataTransfer.setData('text/plain', $(this).data('lead'));
    });

    $(document).on('dragend', '.kanban-card', function() {
        finUltimoArrastre = Date.now();
        $(this).removeClass('arrastrando');
        $('.kanban-drop').removeClass('sobre');
    });

    $(document).on('dragover', '.kanban-drop', function(e) {
        e.preventDefault();
        e.originalEvent.dataTransfer.dropEffect = 'move';
        $(this).addClass('sobre');
    });

    $(document).on('dragleave', '.kanban-drop', function() { $(this).removeClass('sobre'); });

    $(document).on('drop', '.kanban-drop', function(e) {
        e.preventDefault();
        $(this).removeClass('sobre');
        if (!leadArrastrado) return;

        var nuevoEstado = $(this).data('estado');
        var estadoOrigen = $(leadArrastrado.colOrigen).data('estado');
        if (nuevoEstado === estadoOrigen) return;

        if (nuevoEstado === 'perdido') {
            // Pedir motivo antes de mover
            perdidaPendiente = { leadId: leadArrastrado.id, card: leadArrastrado.card, colDestino: this, colOrigen: leadArrastrado.colOrigen };
            $('#perdidaLeadNombre').text($(leadArrastrado.card).find('a').first().text().trim());
            $('#perdidaMotivo').val('');
            $('#perdidaNota').val('');
            $('#modalPerdida').removeClass('hidden');
            return;
        }

        moverLead(leadArrastrado.id, nuevoEstado, leadArrastrado.card, this, leadArrastrado.colOrigen, {});
    });

    function moverLead(leadId, estado, card, colDestino, colOrigen, extra) {
        var datos = $.extend({ lead_id: leadId, estado: estado }, extra);

        // Mover visualmente de inmediato (optimista)
        $(colDestino).find('.kanban-vacio').remove();
        $(colDestino).prepend(card);
        actualizarContadores();

        $.post('<?php echo APP_URL; ?>/leads/cambiar-estado', datos, function(res) {
            if (res.success) {
                var msg = res.message || 'Estado actualizado.';
                Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: msg.split(' Avisos:')[0],
                            showConfirmButton: false, timer: 1800 });
                if (res.avisos && res.avisos.length) {
                    Swal.fire({ icon: 'info', title: 'Avisos de integración', html: res.avisos.join('<br><br>'), confirmButtonColor: '#3b82f6' });
                }
            } else {
                // Revertir
                $(colOrigen).prepend(card);
                actualizarContadores();
                Swal.fire({ icon: 'error', title: 'No se pudo mover', text: res.message, confirmButtonColor: '#ef4444' });
            }
        }, 'json').fail(function() {
            $(colOrigen).prepend(card);
            actualizarContadores();
        });
    }

    function actualizarContadores() {
        $('.kanban-col').each(function() {
            $(this).find('.col-contador').text($(this).find('.kanban-card').length);
        });
    }

    // ── Modal de pérdida ──
    window.cancelarPerdida = function() {
        $('#modalPerdida').addClass('hidden');
        perdidaPendiente = null;
    };

    window.confirmarPerdida = function() {
        if (!perdidaPendiente) return;
        var motivo = $('#perdidaMotivo').val();
        if (!motivo) {
            Swal.fire({ icon: 'warning', title: 'Falta el motivo', text: 'Selecciona el motivo de la pérdida.', confirmButtonColor: '#d97706' });
            return;
        }
        $('#modalPerdida').addClass('hidden');
        moverLead(perdidaPendiente.leadId, 'perdido', perdidaPendiente.card, perdidaPendiente.colDestino, perdidaPendiente.colOrigen,
                  { motivo_perdida: motivo, nota_perdida: $('#perdidaNota').val() });
        perdidaPendiente = null;
    };

    $('#modalPerdida').on('click', function(e) { if (e.target === this) cancelarPerdida(); });
});
</script>
