{% extends 'layouts/base.html' %}

{% block title %}Cuentas Madres{% endblock %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Cuentas Madres</h1>
        <p class="text-gray-500">Gestiona las cuentas de streaming e IA de {{ vendedor.nombre_negocio }}.</p>
    </div>
    <button onclick="toggleModal('modalNuevaCuenta')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium shadow-sm flex items-center transition-colors">
        <i class="ph ph-plus-circle mr-2 text-lg"></i> Agregar Cuenta
    </button>
</div>

<!-- BARRA DE FILTROS ESTILO EXCEL -->
<div class="px-6 py-3 bg-white border border-gray-100 flex gap-2 overflow-x-auto rounded-t-xl mb-0 border-b-0">
    <button onclick="filtrarCuenta('todas', this)" class="filtro-btn px-4 py-1.5 rounded-full text-xs font-bold bg-blue-600 text-white transition-colors">Todas</button>
    {% for cat in categorias %}
        <button onclick="filtrarCuenta('{{ cat.nombre|lower|replace(' ', '-') }}', this)" class="filtro-btn px-4 py-1.5 rounded-full text-xs font-medium bg-white border border-gray-200 text-gray-600 hover:bg-gray-100 transition-colors">{{ cat.nombre }}</button>
    {% endfor %}
</div>

<!-- Tabla de Cuentas Reales -->
<div class="bg-white rounded-b-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-gray-50 border-b border-gray-100 text-xs text-gray-500 uppercase tracking-wider">
                    <th class="px-6 py-4 font-semibold">Servicio / Correo</th>
                    <th class="px-6 py-4 font-semibold">Contraseña</th>
                    <th class="px-6 py-4 font-semibold">Tipo</th>
                    <th class="px-6 py-4 font-semibold">Renovación</th>
                    <th class="px-6 py-4 font-semibold">Costo</th>
                    <th class="px-6 py-4 font-semibold">Estado</th>
                    <th class="px-6 py-4 font-semibold text-center">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% if cuentas %}
                    {% for cuenta in cuentas %}
                    <tr class="hover:bg-gray-50 transition-colors cuenta-row" data-categoria="{{ cuenta.producto.categoria.nombre|lower|replace(' ', '-') if cuenta.producto and cuenta.producto.categoria else 'sin-categoria' }}">
                        <td class="px-6 py-4">
                            <div class="font-bold text-gray-900">{{ cuenta.producto.nombre if cuenta.producto else 'Sin Asignar' }}</div>
                            <div class="text-sm text-gray-500">{{ cuenta.correo_cuenta }}</div>
                        </td>
                        <td class="px-6 py-4 text-gray-600 font-mono text-sm">{{ cuenta.password_cuenta }}</td>
                        <td class="px-6 py-4">
                            <span class="text-xs text-gray-500 uppercase">{{ cuenta.tipo_cuenta | replace('_', ' ') }}</span>
                        </td>
                        <td class="px-6 py-4 text-gray-600">
                            {{ cuenta.fecha_facturacion.strftime('%d/%m/%Y') if cuenta.fecha_facturacion else 'No definida' }}
                        </td>
                        <td class="px-6 py-4 font-semibold text-gray-900">S/ {{ cuenta.costo_adquisicion }}</td>
                        <td class="px-6 py-4">
                            {% if cuenta.estado == 'activa' %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Activa</span>
                            {% elif cuenta.estado == 'caida' %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Caída</span>
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">Suspendida</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-center">
                            <button onclick="abrirModalDividir({{ cuenta.id }}, '{{ cuenta.correo_cuenta }}')" class="text-purple-600 hover:text-purple-800 bg-purple-50 hover:bg-purple-100 px-2 py-1 rounded-md text-xs font-semibold mr-2 transition-colors" title="Dividir en Perfiles">
                                <i class="ph ph-users-three text-lg align-middle mr-1"></i> Dividir
                            </button>

                            <!-- Contenedor oculto con los datos de los perfiles -->
                            <div id="data-perfiles-{{ cuenta.id }}" class="hidden">
                                {% for p in cuenta.perfiles_asociados %}
                                    <span class="perfil-item" data-nombre="{{ p.nombre_perfil }}" data-pin="{{ p.pin_perfil or '' }}" data-estado="{{ p.estado }}"></span>
                                {% endfor %}
                            </div>
                            
                            <!-- BOTÓN DE EDITAR ACTUALIZADO -->
                            <button type="button" onclick="abrirEditarCuenta(this)"
                                    data-id="{{ cuenta.id }}"
                                    data-correo="{{ cuenta.correo_cuenta }}"
                                    data-pass="{{ cuenta.password_cuenta }}"
                                    data-renovacion="{{ cuenta.fecha_facturacion.strftime('%Y-%m-%d') if cuenta.fecha_facturacion else '' }}"
                                    data-costo="{{ cuenta.costo_adquisicion }}"
                                    data-estado="{{ cuenta.estado }}"
                                    class="text-blue-500 hover:text-blue-700 mr-2" title="Editar Cuenta">
                                <i class="ph ph-pencil-simple text-lg"></i>
                            </button>
                            <button class="text-red-500 hover:text-red-700"><i class="ph ph-trash text-lg"></i></button>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="7" class="px-6 py-10 text-center text-gray-500">
                            <i class="ph ph-monitor-play text-4xl mb-2 text-gray-300"></i>
                            <p>No tienes cuentas registradas.</p>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal: Nueva Cuenta (Creación) -->
<div id="modalNuevaCuenta" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="text-lg font-bold text-gray-900">Registrar Cuenta y Stock</h3>
            <button onclick="toggleModal('modalNuevaCuenta')" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
        </div>
        
        <form action="{{ url_for('inventario.cuentas') }}" method="POST" class="p-6">
            <input type="hidden" name="tipo_form" value="nueva_cuenta">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Producto / Servicio</label>
                    <select name="producto_id" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <option value="" disabled selected>Selecciona producto...</option>
                        {% for prod in productos %}
                            <option value="{{ prod.id }}">{{ prod.nombre }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Cuenta</label>
                    <select name="tipo_cuenta" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <option value="alquilada_proveedor">Alquilada (Proveedor)</option>
                        <option value="propia_dominio">Propia (Dominio Personal)</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Correo de la Cuenta</label>
                    <input type="email" name="correo_cuenta" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="correo@proveedor.com">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Contraseña</label>
                    <input type="text" name="password_cuenta" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Contraseña de acceso">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Proveedor (Opcional)</label>
                    <input type="text" name="proveedor_original" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500" placeholder="Ej. Proveedor X">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Costo de Compra (S/)</label>
                    <input type="number" step="0.01" name="costo_adquisicion" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500" placeholder="0.00">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Fecha Renovación</label>
                    <input type="date" name="fecha_facturacion" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500">
                </div>
            </div>

            <!-- SECCIÓN DE PRECIOS MOVIDA AL CATÁLOGO (Se deja oculta o se elimina) -->
            <!-- Puedes borrar los inputs de precio_cuenta y precio_perfil si ya los pasaste al catálogo -->
            <input type="hidden" name="precio_cuenta" value="0.00">
            <input type="hidden" name="precio_perfil" value="0.00">

            <div class="flex justify-end gap-3 border-t border-gray-100 pt-4">
                <button type="button" onclick="toggleModal('modalNuevaCuenta')" class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md text-sm">Cancelar</button>
                <button type="submit" class="px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium">Guardar Cuenta</button>
            </div>
        </form>
    </div>
</div>

<!-- NUEVO: Modal Editar Cuenta -->
<div id="modalEditarCuenta" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="text-lg font-bold text-gray-900">Editar Datos de la Cuenta</h3>
            <button onclick="toggleModal('modalEditarCuenta')" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
        </div>
        
        <form action="{{ url_for('inventario.cuentas') }}" method="POST" class="p-6">
            <input type="hidden" name="tipo_form" value="editar_cuenta">
            <input type="hidden" name="cuenta_id" id="edit_cuenta_id">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Correo de la Cuenta</label>
                    <input type="email" name="correo_cuenta" id="edit_correo" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Contraseña</label>
                    <input type="text" name="password_cuenta" id="edit_password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Fecha Renovación</label>
                    <input type="date" name="fecha_facturacion" id="edit_renovacion" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Costo de Adquisición (S/)</label>
                    <input type="number" step="0.01" name="costo_adquisicion" id="edit_costo" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500">
                </div>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-1">Estado Operativo</label>
                <select name="estado" id="edit_estado" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500">
                    <option value="activa">Activa (Funcionando bien)</option>
                    <option value="caida">Caída (Requiere revisión)</option>
                    <option value="suspendida">Suspendida (Baneada o inactiva)</option>
                </select>
            </div>

            <div class="flex justify-end gap-3 border-t border-gray-100 pt-4">
                <button type="button" onclick="toggleModal('modalEditarCuenta')" class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md text-sm">Cancelar</button>
                <button type="submit" class="px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium">Actualizar Cuenta</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Dividir Cuenta en Perfiles -->
<div id="modalDividirCuenta" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[90vh]">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
            <div>
                <h3 class="text-lg font-bold text-gray-900">Generar Perfiles</h3>
                <p class="text-xs text-gray-500" id="textoCuentaDividir">Cuenta: ...</p>
            </div>
            <button onclick="cerrarModalDividir()" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
        </div>
        
        <div class="p-6 overflow-y-auto bg-white">
            <form action="{{ url_for('inventario.dividir_cuenta') }}" method="POST" id="formDividirCuenta">
                <input type="hidden" name="cuenta_id" id="hidden_cuenta_id">
                
                <div class="bg-blue-50 border border-blue-100 rounded-lg p-3 mb-4 flex items-start gap-3">
                    <i class="ph ph-info text-blue-600 text-xl mt-0.5"></i>
                    <p class="text-xs text-blue-800">Registra los espacios/perfiles de esta cuenta. Deja el PIN en blanco para servicios que no lo requieran. El estado inicial será <b>Libre</b>.</p>
                </div>

                <!-- Contenedor Dinámico de Filas -->
                <div id="contenedorPerfiles" class="space-y-3 mb-4">
                    <!-- Las filas se inyectan con JS -->
                </div>

                <button type="button" onclick="agregarFilaPerfil()" class="w-full py-2 border-2 border-dashed border-gray-300 rounded-lg text-sm font-medium text-gray-600 hover:border-blue-500 hover:text-blue-600 transition-colors flex items-center justify-center gap-2">
                    <i class="ph ph-plus-circle text-lg"></i> Añadir otro perfil
                </button>
            </form>
        </div>
        
        <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-end gap-3">
            <button type="button" onclick="cerrarModalDividir()" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md text-sm font-medium transition-colors">Cancelar</button>
            <button type="submit" form="formDividirCuenta" class="px-6 py-2 text-white bg-purple-600 hover:bg-purple-700 rounded-md text-sm font-medium transition-colors shadow-sm">
                <i class="ph ph-users-three mr-1"></i> Guardar Perfiles
            </button>
        </div>
    </div>
</div>

<script>
    function toggleModal(modalID) {
        document.getElementById(modalID).classList.toggle('hidden');
    }

    function abrirEditarCuenta(btn) {
        document.getElementById('edit_cuenta_id').value = btn.dataset.id;
        document.getElementById('edit_correo').value = btn.dataset.correo;
        document.getElementById('edit_password').value = btn.dataset.pass;
        document.getElementById('edit_renovacion').value = btn.dataset.renovacion;
        document.getElementById('edit_costo').value = btn.dataset.costo;
        document.getElementById('edit_estado').value = btn.dataset.estado;
        
        toggleModal('modalEditarCuenta');
    }

    const modalDividir = document.getElementById('modalDividirCuenta');
    const contenedorPerfiles = document.getElementById('contenedorPerfiles');

    function abrirModalDividir(cuentaId, correoCuenta) {
        document.getElementById('hidden_cuenta_id').value = cuentaId;
        document.getElementById('textoCuentaDividir').innerText = `Cuenta: ${correoCuenta}`;
        
        contenedorPerfiles.innerHTML = '';
        
        // Buscar si ya hay perfiles creados
        const perfilesData = document.querySelectorAll(`#data-perfiles-${cuentaId} .perfil-item`);
        
        if (perfilesData.length > 0) {
            perfilesData.forEach(p => {
                agregarFilaPerfil(p.dataset.nombre, p.dataset.pin, p.dataset.estado);
            });
        } else {
            // Si no hay ninguno, pone uno vacío por defecto
            agregarFilaPerfil('', '', 'libre');
        }
        
        modalDividir.classList.remove('hidden');
    }

    function cerrarModalDividir() {
        document.getElementById('modalDividirCuenta').classList.add('hidden');
    }

    function agregarFilaPerfil(nombre = '', pin = '', estado = 'libre') {
        const bgClase = estado === 'ocupado' ? 'bg-green-50' : (estado === 'caido' ? 'bg-red-50' : 'bg-white');
        const estadoTag = estado === 'ocupado' ? '<span class="text-xs font-bold text-green-600">Vendido</span>' : '';
        
        const filaHtml = `
            <div class="flex items-end gap-3 fila-perfil ${bgClase} p-2 rounded-lg border border-gray-100">
                <div class="flex-grow">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Nombre / Alias ${estadoTag}</label>
                    <input type="text" name="nombre_perfil[]" value="${nombre}" required class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
                </div>
                <div class="w-1/3">
                    <label class="block text-xs font-medium text-gray-700 mb-1">PIN</label>
                    <input type="text" name="pin_perfil[]" value="${pin}" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm font-mono">
                </div>
                <button type="button" onclick="eliminarFila(this)" class="px-3 py-2 text-red-500 hover:bg-red-100 rounded-md transition-colors mb-px" title="Eliminar fila">
                    <i class="ph ph-trash text-lg"></i>
                </button>
            </div>
        `;
        contenedorPerfiles.insertAdjacentHTML('beforeend', filaHtml);
    }

    function eliminarFila(btnElement) {
        const fila = btnElement.closest('.fila-perfil');
        if (document.querySelectorAll('.fila-perfil').length > 1) {
            fila.remove();
        } else {
            alert("Debes mantener al menos un perfil en la lista.");
        }
    }

    function filtrarCuenta(categoria, boton) {
        document.querySelectorAll('.filtro-btn').forEach(btn => {
            btn.classList.remove('bg-blue-600', 'text-white', 'font-bold');
            btn.classList.add('bg-white', 'text-gray-600', 'font-medium');
        });
        boton.classList.remove('bg-white', 'text-gray-600', 'font-medium');
        boton.classList.add('bg-blue-600', 'text-white', 'font-bold');

        document.querySelectorAll('.cuenta-row').forEach(fila => {
            fila.style.display = (categoria === 'todas' || fila.getAttribute('data-categoria') === categoria) ? '' : 'none';
        });
    }
</script>
{% endblock %}