<?php
// ===========================================================================
// Pagina central de contratacion (paso 1: resumen del plan + datos del
// producto) y montaje del Embedded Checkout de Stripe (paso 2). Branded para
// sentirse como extension de cada landing (Bootstrap 5.3 + Poppins/Roboto +
// paleta del producto). Sin BD: delega todo a la API del producto.
// ===========================================================================

require_once __DIR__ . '/bootstrap.php';

// Página dinámica: evita que el navegador sirva HTML/JS cacheado (viejo).
header('Cache-Control: no-store, max-age=0');

$productoClave = isset($_GET['producto']) ? preg_replace('/[^a-z0-9_]/', '', strtolower($_GET['producto'])) : '';
$planClave     = isset($_GET['plan']) ? preg_replace('/[^a-z0-9_]/', '', strtolower($_GET['plan'])) : '';
$periodo       = isset($_GET['periodo']) ? preg_replace('/[^a-z]/', '', strtolower($_GET['periodo'])) : 'mensual';
$cantidad      = isset($_GET['cantidad']) ? max(1, intval($_GET['cantidad'])) : 1;

$prod = getProducto($productoClave);

// Errores tempranos: producto desconocido.
if (!$prod) {
    http_response_code(404);
    $color = '#061c6b';
    $titulo = 'Producto no disponible';
    $mensaje = 'El producto solicitado no existe o no esta disponible para contratacion.';
    include __DIR__ . '/_error.php';
    exit;
}

$catalogo = catalogoPlanes($productoClave);

if (!$catalogo) {
    http_response_code(503);
    $color = $prod['color'];
    $titulo = 'No se pudo cargar el catálogo';
    $mensaje = 'No pudimos leer los planes del producto en este momento. Inténtalo de nuevo en unos minutos.';
    include __DIR__ . '/_error.php';
    exit;
}

$plan = buscarPlan($catalogo, $planClave, $periodo);

// Normaliza periodo cuando el plan es de pago unico (vitalicio).
if ($plan && $plan['periodo'] == 'unico') {
    $periodo = 'unico';
}

if (!$plan) {
    http_response_code(404);
    $color = $prod['color'];
    $titulo = 'Plan no disponible';
    $mensaje = 'El plan seleccionado no existe en el catálogo. Vuelve a la página de planes e intenta de nuevo.';
    include __DIR__ . '/_error.php';
    exit;
}

// Descriptor de campos (lo define el producto). Fallback minimo si la API no responde.
$camposResp = camposProducto($productoClave);
$campos = ($camposResp && !empty($camposResp['campos'])) ? $camposResp['campos'] : array(
    array('name' => 'empresa',  'label' => 'Nombre de la empresa', 'tipo' => 'text',     'required' => true, 'max' => 255),
    array('name' => 'nombre',   'label' => 'Tu nombre',            'tipo' => 'text',     'required' => true, 'max' => 150),
    array('name' => 'correo',   'label' => 'Correo electronico',   'tipo' => 'email',    'required' => true),
    array('name' => 'password', 'label' => 'Contrasena',           'tipo' => 'password', 'required' => true, 'min' => 8, 'help' => 'Minimo 8 caracteres.'),
);
$cantidadCfg = ($camposResp && isset($camposResp['cantidad'])) ? $camposResp['cantidad'] : null;

$color = $prod['color'];
$nombreProd = $prod['nombre'];
$pk = env('STRIPE_PUBLISHABLE_KEY', '');
$periodoTxt = $periodo == 'anual' ? 'MXN / año' : ($periodo == 'unico' ? 'MXN / pago único' : 'MXN / mes');

function inputCampo($c)
{
    $name = htmlspecialchars($c['name']);
    $label = htmlspecialchars($c['label']);
    $tipo = isset($c['tipo']) ? $c['tipo'] : 'text';
    $req = !empty($c['required']) ? 'required' : '';
    $attrs = '';
    if (isset($c['min'])) {
        $attrs .= ($tipo == 'number') ? ' min="' . intval($c['min']) . '"' : ' minlength="' . intval($c['min']) . '"';
    }
    if (isset($c['max'])) {
        $attrs .= ($tipo == 'number') ? ' max="' . intval($c['max']) . '"' : ' maxlength="' . intval($c['max']) . '"';
    }
    if (!empty($c['placeholder'])) {
        $attrs .= ' placeholder="' . htmlspecialchars($c['placeholder']) . '"';
    }
    $help = !empty($c['help']) ? '<small class="text-muted">' . htmlspecialchars($c['help']) . '</small>' : '';
    $html = '<div class="mb-3"><label class="form-label fw-semibold">' . $label . '</label>';
    if ($tipo == 'select' && !empty($c['opciones'])) {
        $html .= '<select name="' . $name . '" class="form-select" ' . $req . '>';
        foreach ($c['opciones'] as $op) {
            $val = htmlspecialchars(is_array($op) ? $op['valor'] : $op);
            $txt = htmlspecialchars(is_array($op) ? $op['texto'] : $op);
            $html .= '<option value="' . $val . '">' . $txt . '</option>';
        }
        $html .= '</select>';
    } else {
        $html .= '<input type="' . htmlspecialchars($tipo) . '" name="' . $name . '" class="form-control" ' . $req . $attrs . '>';
    }
    $html .= $help . '</div>';
    return $html;
}
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex,nofollow">
    <title>Contratar <?php echo htmlspecialchars($nombreProd); ?> — <?php echo htmlspecialchars($plan['nombre']); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/checkout.css">
    <script src="https://js.stripe.com/v3/"></script>
    <style>
        :root { --brand: <?php echo $color; ?>; --accent: #07ba86; }
        .stepper { max-width: 640px; margin: 0 auto 1.75rem; display: flex; align-items: flex-start; }
        .stepper .step { display: flex; flex-direction: column; align-items: center; }
        .stepper .dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #d7dbe7; color: #9aa1b4; font-weight: 600; font-family: 'Poppins', sans-serif; transition: .25s; }
        .stepper .lbl { font-size: .82rem; margin-top: .4rem; color: #9aa1b4; white-space: nowrap; }
        .stepper .step.active .dot, .stepper .step.done .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
        .stepper .step.active .lbl, .stepper .step.done .lbl { color: var(--brand); font-weight: 600; }
        .stepper .bar { flex: 1 1 auto; height: 2px; background: #d7dbe7; margin: 17px .4rem 0; transition: .25s; }
        .stepper .bar.done { background: var(--brand); }
        .wizard-card { max-width: 620px; margin: 0 auto; }
        @media (max-width: 480px) { .stepper .lbl { font-size: .68rem; } .stepper .dot { width: 30px; height: 30px; } .stepper .bar { margin-top: 14px; } }
    </style>
</head>

<body>
    <div class="checkout-wrap">
        <div class="container py-4 py-lg-5">
            <div class="text-center mb-4">
                <span class="badge-marca" style="background: var(--brand);">
                    <i class="bi bi-shield-lock-fill me-1"></i> Contratación segura
                </span>
                <h1 class="h3 fw-bold mt-3 mb-1" style="color: var(--brand);">Contratar <?php echo htmlspecialchars($nombreProd); ?></h1>
                <p class="text-muted">Completa tus datos y realiza el primer pago para activar tu cuenta.</p>
            </div>

            <!-- Stepper -->
            <div class="stepper" id="stepper">
                <div class="step active" data-step="1"><div class="dot">1</div><div class="lbl">Plan</div></div>
                <div class="bar"></div>
                <div class="step" data-step="2"><div class="dot">2</div><div class="lbl">Cuenta</div></div>
                <div class="bar"></div>
                <div class="step" data-step="3"><div class="dot">3</div><div class="lbl">Pago</div></div>
                <div class="bar"></div>
                <div class="step" data-step="4"><div class="dot">4</div><div class="lbl">Confirmación</div></div>
            </div>

            <div class="wizard-card">
                <!-- Paso 1: Plan elegido -->
                <div id="step-1" class="wizard-step">
                    <div class="card datos-card">
                        <div class="card-body p-4">
                            <h6 class="fw-bold mb-3"><i class="bi bi-bag-check me-1"></i> Este es el plan que elegiste</h6>
                            <h5 class="fw-bold mb-1" style="color: var(--brand);"><?php echo htmlspecialchars($plan['nombre']); ?></h5>
                            <div class="precio mb-3">
                                <span class="moneda">$</span><span class="monto"><?php echo numeroMoneda($plan['precio']); ?></span>
                                <span class="periodo"><?php echo $periodoTxt; ?></span>
                            </div>
                            <?php if ($cantidadCfg) { ?>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold"><?php echo htmlspecialchars($cantidadCfg['label']); ?></label>
                                    <input type="number" id="cantidad" class="form-control" min="<?php echo intval($cantidadCfg['min']); ?>"
                                        value="<?php echo $cantidad; ?>">
                                    <small class="text-muted">El total se calcula por dispositivo. El prorrateo se ajusta luego desde el panel.</small>
                                </div>
                            <?php } else { ?>
                                <input type="hidden" id="cantidad" value="1">
                            <?php } ?>
                            <ul class="feature-list list-unstyled">
                                <?php foreach ($plan['caracteristicas'] as $c) { ?>
                                    <li class="d-flex align-items-start mb-2">
                                        <i class="bi <?php echo htmlspecialchars($c['icono']); ?> me-2 mt-1" style="color: var(--accent);"></i>
                                        <div><strong><?php echo htmlspecialchars($c['titulo']); ?></strong>
                                            <?php if (!empty($c['descripcion'])) { ?><small class="d-block text-muted"><?php echo htmlspecialchars($c['descripcion']); ?></small><?php } ?>
                                        </div>
                                    </li>
                                <?php } ?>
                            </ul>
                            <button type="button" id="btn-siguiente-1" class="btn btn-pagar w-100 fw-bold mt-2">
                                Siguiente <i class="bi bi-arrow-right ms-1"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Paso 2: Crear cuenta -->
                <div id="step-2" class="wizard-step d-none">
                    <div class="card datos-card">
                        <div class="card-body p-4">
                            <h6 class="fw-bold mb-3"><i class="bi bi-person-vcard me-1"></i> Crea tu cuenta de administrador</h6>
                            <div id="form-errores" class="alert alert-danger d-none"></div>
                            <form id="form-datos" autocomplete="off" novalidate>
                                <?php foreach ($campos as $c) {
                                    echo inputCampo($c);
                                } ?>
                                <div class="form-text mb-3">
                                    <i class="bi bi-tag me-1"></i> ¿Tienes un código promocional? Podrás aplicarlo en el paso de pago.
                                </div>
                                <div class="d-flex gap-2">
                                    <button type="button" id="btn-atras-2" class="btn btn-outline-secondary">
                                        <i class="bi bi-arrow-left me-1"></i> Atrás
                                    </button>
                                    <button type="submit" id="btn-siguiente-2" class="btn btn-pagar flex-grow-1 fw-bold">
                                        Continuar <i class="bi bi-arrow-right ms-1"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Paso 3: Pago -->
                <div id="step-3" class="wizard-step d-none">
                    <div class="card datos-card">
                        <div class="card-body p-4">
                            <button type="button" id="btn-atras-3" class="btn btn-sm btn-link px-0 mb-2">
                                <i class="bi bi-arrow-left"></i> Cambiar datos
                            </button>
                            <div id="checkout"><div class="text-center py-5"><div class="spinner-border" role="status"></div><p class="mt-2 text-muted">Cargando pago seguro…</p></div></div>
                        </div>
                    </div>
                </div>

                <!-- Paso 4: Confirmación -->
                <div id="step-4" class="wizard-step d-none">
                    <div class="card datos-card">
                        <div class="card-body p-4 p-md-5 text-center" id="confirmacion">
                            <div class="spinner-border" style="color: var(--brand);" role="status"></div>
                            <h2 class="h5 fw-bold mt-3">Verificando tu pago…</h2>
                            <p class="text-muted mb-0">Un momento, por favor.</p>
                        </div>
                    </div>
                </div>
            </div>

            <p class="text-center text-muted mt-4 small">
                <i class="bi bi-lock-fill me-1"></i> Pago procesado por Stripe. No almacenamos los datos de tu tarjeta.
            </p>
        </div>
    </div>

    <script>
        var PK = <?php echo json_encode($pk); ?>;
        var PRODUCTO = <?php echo json_encode($productoClave); ?>;
        var PLAN = <?php echo json_encode($planClave); ?>;
        var PERIODO = <?php echo json_encode($periodo); ?>;
        var CAMPOS = <?php echo json_encode(array_map(function ($c) { return $c['name']; }, $campos)); ?>;
        var stripe = Stripe(PK);
        var URL_PANEL = <?php echo json_encode($prod['url_panel']); ?>;
        var NOMBRE = <?php echo json_encode($nombreProd); ?>;
        var checkout = null;
        var sessionId = null;
        var current = 1;

        function recolectarDatos() {
            var datos = {};
            CAMPOS.forEach(function (n) {
                var el = document.querySelector('#form-datos [name="' + n + '"]');
                datos[n] = el ? el.value.trim() : '';
            });
            return datos;
        }

        function validar(datos) {
            var faltan = [];
            CAMPOS.forEach(function (n) {
                var el = document.querySelector('#form-datos [name="' + n + '"]');
                if (el && el.hasAttribute('required') && datos[n] === '') faltan.push(el.previousElementSibling ? el.previousElementSibling.textContent : n);
            });
            if (datos.correo !== undefined && datos.correo !== '' && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(datos.correo)) faltan.push('Correo válido');
            if (datos.password !== undefined && datos.password.length > 0 && datos.password.length < 8) faltan.push('Contraseña de 8+ caracteres');
            return faltan;
        }

        function mostrarErrores(lista) {
            var box = document.getElementById('form-errores');
            if (!lista.length) { box.classList.add('d-none'); return; }
            box.innerHTML = 'Revisa: ' + lista.join(', ');
            box.classList.remove('d-none');
        }

        // Navegación entre pasos del wizard.
        function goStep(n) {
            current = n;
            [1, 2, 3, 4].forEach(function (i) {
                document.getElementById('step-' + i).classList.toggle('d-none', i !== n);
            });
            document.querySelectorAll('.stepper .step').forEach(function (el) {
                var s = parseInt(el.getAttribute('data-step'), 10);
                el.classList.toggle('active', s === n);
                el.classList.toggle('done', s < n);
            });
            document.querySelectorAll('.stepper .bar').forEach(function (el, idx) {
                el.classList.toggle('done', idx < n - 1);
            });
            window.scrollTo(0, 0);
        }

        document.getElementById('btn-siguiente-1').addEventListener('click', function () { goStep(2); });
        document.getElementById('btn-atras-2').addEventListener('click', function () { mostrarErrores([]); goStep(1); });
        document.getElementById('btn-atras-3').addEventListener('click', function () {
            if (checkout) { checkout.destroy(); checkout = null; }
            sessionId = null;
            goStep(2);
        });

        // Paso 2 -> 3: valida, crea la sesión y monta el pago. Los errores de
        // validación (correo/empresa ya registrados) se muestran aquí, sin
        // avanzar al paso de pago.
        document.getElementById('form-datos').addEventListener('submit', function (e) {
            e.preventDefault();
            var datos = recolectarDatos();
            var faltan = validar(datos);
            if (faltan.length) { mostrarErrores(faltan); return; }
            mostrarErrores([]);

            var cantidadEl = document.getElementById('cantidad');
            var payload = {
                producto: PRODUCTO, plan: PLAN, periodo: PERIODO,
                cantidad: cantidadEl ? parseInt(cantidadEl.value || '1', 10) : 1,
                datos: datos
            };

            var btn = document.getElementById('btn-siguiente-2');
            btn.disabled = true;
            fetch('api/crear-sesion.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            }).then(function (r) { return r.json(); }).then(function (d) {
                btn.disabled = false;
                if (!d.ok || !d.client_secret) { mostrarErrores([d.error || 'No se pudo iniciar el pago.']); return; }
                sessionId = d.session_id || null;
                goStep(3);
                var secret = d.client_secret;
                stripe.initEmbeddedCheckout({
                    fetchClientSecret: function () { return Promise.resolve(secret); },
                    onComplete: function () { goStep(4); confirmar(); }
                }).then(function (c) {
                    checkout = c;
                    document.getElementById('checkout').innerHTML = '';
                    checkout.mount('#checkout');
                }).catch(function (err) {
                    goStep(2);
                    mostrarErrores([err.message || 'No se pudo iniciar el pago.']);
                });
            }).catch(function () {
                btn.disabled = false;
                mostrarErrores(['No se pudo conectar. Intenta de nuevo.']);
            });
        });

        // Paso 4: confirmación (el aprovisionamiento lo hace el webhook).
        var intentosConf = 0;
        function pintarConf(html) { document.getElementById('confirmacion').innerHTML = html; }
        function confExito() {
            pintarConf(
                '<i class="bi bi-check-circle-fill" style="font-size:3rem;color:var(--brand)"></i>' +
                '<h2 class="h4 fw-bold mt-3 mb-2">¡Pago confirmado!</h2>' +
                '<p class="text-muted">Estamos activando tu cuenta de ' + NOMBRE + ' y te enviamos un correo de bienvenida. ' +
                'Si el acceso aún no funciona, espera un minuto e inténtalo de nuevo.</p>' +
                '<a href="' + URL_PANEL + '" class="btn btn-pagar w-100 fw-bold mt-2"><i class="bi bi-box-arrow-in-right me-1"></i> Entrar a ' + NOMBRE + '</a>'
            );
        }
        function confPendiente() {
            pintarConf(
                '<i class="bi bi-hourglass-split" style="font-size:3rem;color:var(--brand)"></i>' +
                '<h2 class="h5 fw-bold mt-3 mb-2">Procesando tu pago…</h2>' +
                '<p class="text-muted">Recibirás un correo en cuanto tu cuenta esté lista.</p>' +
                '<a href="' + URL_PANEL + '" class="btn btn-pagar w-100 fw-bold mt-2">Ir al acceso</a>'
            );
        }
        function confirmar() {
            if (!sessionId) { confExito(); return; }
            fetch('api/estado-sesion.php?session_id=' + encodeURIComponent(sessionId))
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    if (d.ok && (d.payment_status === 'paid' || d.payment_status === 'no_payment_required')) { confExito(); return; }
                    intentosConf++;
                    if (intentosConf > 4) { confPendiente(); return; }
                    setTimeout(confirmar, 2000);
                })
                .catch(function () { intentosConf++; if (intentosConf > 4) { confPendiente(); } else { setTimeout(confirmar, 2000); } });
        }
    </script>
</body>

</html>
