<?php
// ===== MODO DEBUG - COMENTAR EN PRODUCCIÓN =====
error_reporting(E_ALL);
ini_set('display_errors', '1');
ini_set('log_errors', '1');
// ================================================

require_once __DIR__ . '/../../config/bootstrap.php';
require_once __DIR__ . '/../../includes/require-auth.php';

use App\Services\AuthService;
use App\Services\ContractService;
use App\Services\SecurityService;
use App\Services\EmailService;
use App\Services\TemplateService;

$auth = new AuthService();
$contractService = new ContractService();
$security = new SecurityService();
$emailService = new EmailService();
$templateService = new TemplateService();

// Verificar si el email está habilitado
$mailEnabled = $emailService->isEnabled();

$user = requireAuth($auth);
$rol = $user['rol'] ?? 'asesor';
$error = null;
$success = null;
$contractLink = null;

// Cargar plantillas disponibles
$templates = $templateService->list();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!$security->verifyCSRFToken($_POST['csrf_token'] ?? '')) {
        $error = 'Token de seguridad inválido.';
    } else {
        try {
            // Combinar indicativo + número de teléfono
            $telefonoIndicativo = preg_replace('/\D/', '', $_POST['phone_indicativo'] ?? '57');
            $telefonoNumero     = preg_replace('/\D/', '', $_POST['cliente_telefono_numero'] ?? '');
            $telefonoFull       = !empty($telefonoNumero) ? $telefonoIndicativo . $telefonoNumero : '';

            $data = [
                'admin_id'         => $user['id'],
                'titulo'           => $_POST['titulo'] ?? '',
                'contenido'        => $_POST['contenido'] ?? '',
                'logo_path'        => $_POST['logo_path'] ?? null,
                'cliente_nombre'   => $_POST['cliente_nombre'] ?? '',
                'cliente_email'    => $_POST['cliente_email'] ?? '',
                'cliente_telefono' => $telefonoFull,
                'expiration_hours' => $_POST['expiration_hours'] ?? 24,
                'company_name'     => $_POST['company_name'] ?? null,
                'company_nit'      => $_POST['company_nit'] ?? null,
                'company_address'  => $_POST['company_address'] ?? null,
                'company_phone'    => $_POST['company_phone'] ?? null,
                'company_email'    => $_POST['company_email'] ?? null,
                'company_website'  => $_POST['company_website'] ?? null,
                'company_city'     => $_POST['company_city'] ?? null
            ];

            $result = $contractService->create($data);

            if ($result['success']) {
                // Enviar email (opcional)
                if (!empty($_POST['enviar_email']) && $emailService->isEnabled()) {
                    $contract = $contractService->getById($result['contract_id']);
                    $emailService->sendSignatureLink($contract);
                }

                // Redirigir a ver contrato
                header("Location: " . base_url("admin/ver-contrato") . "?id={$result['contract_id']}&created=1");
                exit;
            } else {
                $error = $result['message'];
            }
        } catch (Exception $e) {
            // ===== ERROR DETALLADO - SOLO EN DEBUG =====
            $error = "<div style='background:#fee; border:2px solid #c00; padding:20px; margin:20px 0;'>";
            $error .= "<h3 style='color:#c00; margin:0 0 10px 0;'>❌ Error al Crear Contrato</h3>";
            $error .= "<p><strong>Mensaje:</strong> " . htmlspecialchars($e->getMessage()) . "</p>";
            $error .= "<p><strong>Archivo:</strong> " . htmlspecialchars($e->getFile()) . ":" . $e->getLine() . "</p>";
            $error .= "<details><summary>Stack Trace</summary><pre style='overflow:auto; background:#fff; padding:10px;'>" . htmlspecialchars($e->getTraceAsString()) . "</pre></details>";
            $error .= "</div>";
            // ============================================
        }
    }
}

$csrfToken = $security->generateCSRFToken();
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crear Contrato - Sistema de Contratos</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- TinyMCE Editor desde jsDelivr (CDN permitido por CSP) -->
    <script src="https://cdn.jsdelivr.net/npm/tinymce@7.0.1/tinymce.min.js"></script>

    <style>
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            letter-spacing: -0.011em;
        }

        /* Estilos del editor TinyMCE */
        .tox-tinymce {
            border-radius: 0.5rem !important;
            border-color: #d1d5db !important;
        }

        .tox .tox-toolbar,
        .tox .tox-toolbar__overflow,
        .tox .tox-toolbar__primary {
            background: #f9fafb !important;
        }

        .tox .tox-edit-area__iframe {
            background-color: #ffffff !important;
        }

        /* Ajustar el statusbar */
        .tox-statusbar {
            border-top: 1px solid #e5e7eb !important;
        }
    </style>
</head>

<body class="bg-gray-50 flex flex-col min-h-screen">
    <?php include __DIR__ . '/../../includes/admin-nav.php'; ?>

    <main class="flex-1 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full">
        <div class="mb-6">
            <a href="<?= base_url('admin/dashboard') ?>" class="text-indigo-600 hover:text-indigo-700 text-sm font-medium">
                ← Volver al Dashboard
            </a>
        </div>

        <div class="bg-white rounded-lg shadow p-8">
            <h1 class="text-2xl font-bold text-gray-900 mb-6">Crear Nuevo Contrato</h1>

            <?php if ($error): ?>
                <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded">
                    <p class="text-sm text-red-700"><?= htmlspecialchars($error) ?></p>
                </div>
            <?php endif; ?>

            <?php if ($success): ?>
                <div class="mb-6 bg-green-50 border-l-4 border-green-500 p-4 rounded">
                    <p class="text-sm text-green-700 font-semibold mb-2"><?= htmlspecialchars($success) ?></p>
                    <div class="mt-3 flex items-center gap-2">
                        <input
                            type="text"
                            readonly
                            value="<?= htmlspecialchars($contractLink) ?>"
                            id="contract-link"
                            class="flex-1 px-3 py-2 text-sm border rounded bg-white">
                        <button onclick="copyLink()" class="px-4 py-2 bg-indigo-600 text-white text-sm rounded hover:bg-indigo-700">
                            Copiar Link
                        </button>
                    </div>
                </div>
            <?php endif; ?>

            <form method="POST" action="" class="space-y-6">
                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken) ?>">
                <input type="hidden" name="logo_path" id="logo_path" value="">

                <!-- Título -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Título del Contrato *</label>
                    <input
                        type="text"
                        name="titulo"
                        required
                        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                        placeholder="Ej: Contrato de Servicios Profesionales"
                        value="<?= htmlspecialchars($_POST['titulo'] ?? '') ?>">
                </div>

                <!-- Selector de Plantilla (Opcional) -->
                <?php if (!empty($templates)): ?>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Usar Plantilla (Opcional)</label>
                        <div class="flex items-center gap-2">
                            <select id="template-selector" class="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white">
                                <option value="">-- Selecciona una plantilla --</option>
                                <?php foreach ($templates as $template): ?>
                                    <option value="<?= $template['id'] ?>"
                                        data-titulo="<?= htmlspecialchars($template['nombre']) ?>"
                                        data-descripcion="<?= htmlspecialchars($template['descripcion'] ?? '') ?>">
                                        <?= htmlspecialchars($template['nombre']) ?>
                                        <?php if ($template['categoria'] !== 'general'): ?>
                                            · <?= htmlspecialchars(ucfirst($template['categoria'])) ?>
                                        <?php endif; ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                            <button type="button" onclick="loadTemplate()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                Cargar
                            </button>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">Selecciona una plantilla predefinida para empezar más rápido. Podrás editarla después de cargarla.</p>
                    </div>
                <?php endif; ?>

                <!-- Logo de Empresa (Opcional) -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Logo de Empresa (Opcional)</label>
                    <div class="flex items-start gap-4">
                        <div class="flex-1">
                            <div class="flex items-center gap-2">
                                <label for="logo-upload" class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer transition-colors">
                                    <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    Seleccionar Logo
                                    <input type="file" id="logo-upload" accept="image/png,image/jpeg,image/jpg,image/svg+xml" class="hidden" onchange="uploadLogo(this)">
                                </label>
                                <button type="button" id="remove-logo-btn" onclick="removeLogo()" class="hidden px-3 py-2 text-sm text-red-600 hover:text-red-700">
                                    Eliminar
                                </button>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">Formatos: PNG, JPG, SVG. Máximo 5MB. Aparecerá en el PDF generado.</p>
                            <div id="logo-status" class="hidden mt-2 px-3 py-2 rounded-lg text-sm"></div>
                        </div>
                        <div id="logo-preview" class="hidden w-32 h-32 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center bg-gray-50 overflow-hidden">
                            <img id="logo-preview-img" src="" alt="Logo preview" class="max-w-full max-h-full object-contain">
                        </div>
                    </div>
                </div>

                <!-- Datos de la Empresa -->
                <div class="border-t pt-6">
                    <h3 class="text-lg font-semibold mb-4">Datos de la Empresa</h3>
                    <p class="text-sm text-gray-600 mb-4">Estos datos aparecerán en el PDF del contrato. Si no los completas, se usarán los datos por defecto del sistema.</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Nombre de la Empresa</label>
                            <input
                                type="text"
                                name="company_name"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                                placeholder="<?= htmlspecialchars(COMPANY_NAME) ?>"
                                value="<?= htmlspecialchars($_POST['company_name'] ?? '') ?>">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">NIT / RUT</label>
                            <input
                                type="text"
                                name="company_nit"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                                placeholder="<?= htmlspecialchars(COMPANY_NIT) ?>"
                                value="<?= htmlspecialchars($_POST['company_nit'] ?? '') ?>">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Teléfono</label>
                            <input
                                type="text"
                                name="company_phone"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                                placeholder="<?= htmlspecialchars(COMPANY_PHONE) ?>"
                                value="<?= htmlspecialchars($_POST['company_phone'] ?? '') ?>">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                            <input
                                type="email"
                                name="company_email"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                                placeholder="<?= htmlspecialchars(COMPANY_EMAIL) ?>"
                                value="<?= htmlspecialchars($_POST['company_email'] ?? '') ?>">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Sitio Web</label>
                            <input
                                type="text"
                                name="company_website"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                                placeholder="<?= htmlspecialchars(COMPANY_WEBSITE) ?>"
                                value="<?= htmlspecialchars($_POST['company_website'] ?? '') ?>">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Ciudad</label>
                            <input
                                type="text"
                                name="company_city"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                                placeholder="<?= htmlspecialchars(COMPANY_CITY) ?>"
                                value="<?= htmlspecialchars($_POST['company_city'] ?? '') ?>">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Dirección</label>
                            <input
                                type="text"
                                name="company_address"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                                placeholder="<?= htmlspecialchars(COMPANY_ADDRESS) ?>"
                                value="<?= htmlspecialchars($_POST['company_address'] ?? '') ?>">
                        </div>
                    </div>
                </div>

                <!-- Contenido -->
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label for="contenido" class="block text-sm font-medium text-gray-700">Contenido del Contrato *</label>
                        <!-- Botón subir archivo -->
                        <label id="upload-btn"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-indigo-700 bg-indigo-50 border border-indigo-200 rounded-lg cursor-pointer hover:bg-indigo-100 transition-colors"
                            title="Sube un archivo TXT, DOCX, PDF o RTF y su contenido se cargará en el editor">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                            </svg>
                            Importar desde archivo
                            <input type="file" id="file-import" accept=".txt,.pdf,.docx,.doc,.rtf"
                                class="hidden" onchange="importFile(this)">
                        </label>
                    </div>

                    <!-- Indicador de carga del archivo -->
                    <div id="import-status" class="hidden mb-2 px-3 py-2 rounded-lg text-sm"></div>

                    <!-- Editor TinyMCE -->
                    <textarea
                        name="contenido"
                        id="contenido"><?= htmlspecialchars($_POST['contenido'] ?? '') ?></textarea>

                    <p class="mt-2 text-xs text-gray-500">
                        Usa la barra de herramientas para dar formato al texto: negrita, cursiva, listas, imágenes, etc.
                        También puedes importar archivos DOCX, PDF, TXT o RTF.
                    </p>
                </div>

                <!-- Datos del Cliente -->
                <div class="border-t pt-6">
                    <h3 class="text-lg font-semibold mb-4">Datos del Cliente</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Nombre Completo *</label>
                            <input
                                type="text"
                                name="cliente_nombre"
                                required
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                                value="<?= htmlspecialchars($_POST['cliente_nombre'] ?? '') ?>">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Email <?= $mailEnabled ? '*' : '(opcional)' ?>
                            </label>
                            <input
                                type="email"
                                name="cliente_email"
                                <?= $mailEnabled ? 'required' : '' ?>
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500"
                                value="<?= htmlspecialchars($_POST['cliente_email'] ?? '') ?>"
                                placeholder="<?= $mailEnabled ? 'cliente@ejemplo.com' : 'Opcional - Solo si deseas enviar copia' ?>">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Teléfono</label>
                            <div class="flex gap-2">
                                <select id="phone-indicativo" name="phone_indicativo"
                                    class="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm bg-white min-w-[110px]">
                                    <option value="57" data-mask="000 000 0000" selected>🇨🇴 +57</option>
                                    <option value="1" data-mask="(000) 000-0000">🇺🇸 +1</option>
                                    <option value="52" data-mask="00 0000 0000">🇲🇽 +52</option>
                                    <option value="34" data-mask="000 000 000">🇪🇸 +34</option>
                                    <option value="54" data-mask="000 0000-0000">🇦🇷 +54</option>
                                    <option value="56" data-mask="0 0000 0000">🇨🇱 +56</option>
                                    <option value="51" data-mask="000 000 000">🇵🇪 +51</option>
                                    <option value="58" data-mask="000-000-0000">🇻🇪 +58</option>
                                    <option value="593" data-mask="00 000 0000">🇪🇨 +593</option>
                                    <option value="55" data-mask="(00) 00000-0000">🇧🇷 +55</option>
                                    <option value="44" data-mask="0000 000000">🇬🇧 +44</option>
                                    <option value="49" data-mask="000 00000000">🇩🇪 +49</option>
                                    <option value="33" data-mask="0 00 00 00 00">🇫🇷 +33</option>
                                    <option value="39" data-mask="000 000 0000">🇮🇹 +39</option>
                                    <option value="591" data-mask="0 000 0000">🇧🇴 +591</option>
                                    <option value="595" data-mask="00 000 0000">🇵🇾 +595</option>
                                    <option value="598" data-mask="0000 0000">🇺🇾 +598</option>
                                    <option value="507" data-mask="0000-0000">🇵🇦 +507</option>
                                    <option value="503" data-mask="0000-0000">🇸🇻 +503</option>
                                    <option value="502" data-mask="0000-0000">🇬🇹 +502</option>
                                </select>
                                <input
                                    type="tel"
                                    id="phone-number"
                                    name="cliente_telefono_numero"
                                    inputmode="numeric"
                                    class="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 font-mono"
                                    placeholder="300 123 4567"
                                    value="<?= htmlspecialchars(preg_replace('/^\+?\d{1,4}/', '', $_POST['cliente_telefono'] ?? '')) ?>"
                                    autocomplete="tel-national">
                                <input type="hidden" name="cliente_telefono" id="cliente_telefono_full">
                            </div>
                            <p class="mt-1 text-xs text-gray-400">Selecciona el indicativo del país y luego el número sin él.</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Expiración (horas)</label>
                            <input
                                type="number"
                                name="expiration_hours"
                                min="1"
                                max="720"
                                value="24"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                        </div>
                    </div>
                </div>

                <!-- Opciones -->
                <?php if ($mailEnabled): ?>
                    <div class="border-t pt-6">
                        <label class="flex items-center">
                            <input type="checkbox" name="enviar_email" value="1" checked class="rounded text-indigo-600">
                            <span class="ml-2 text-sm text-gray-700">Enviar link de firma por email automáticamente</span>
                        </label>
                    <?php endif; ?>
                    </div>

                    <!-- Botones -->
                    <div class="flex justify-end gap-3">
                        <a href="<?= base_url('admin/dashboard') ?>" class="px-6 py-2 border rounded-lg hover:bg-gray-50">Cancelar</a>
                        <button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
                            Crear Contrato
                        </button>
                    </div>
            </form>
        </div>
    </main>

    <script>
        // ── Inicialización de TinyMCE 7 ───────────────────────────────────────
        tinymce.init({
            selector: '#contenido',
            height: 500,
            license_key: 'gpl',
            language: 'es',
            menubar: 'file edit view insert format tools table help',

            // Plugins de TinyMCE 7
            plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code fullscreen',

            // Toolbar optimizado para contratos
            toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | ' +
                'link image media table | align lineheight | numlist bullist indent outdent | ' +
                'forecolor backcolor | emoticons charmap | removeformat code fullscreen',

            // Estilos del contenido
            content_style: 'body { font-family: Inter, Georgia, serif; font-size: 14px; line-height: 1.7; padding: 15px; }',

            // Configuración de fuentes
            font_family_formats: 'Inter=Inter,sans-serif; Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; Georgia=georgia,palatino; Times New Roman=times new roman,times',
            font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt',

            // Configuración de bloques
            block_formats: 'Párrafo=p; Título 1=h1; Título 2=h2; Título 3=h3; Código=pre',

            // Configuración de imágenes (base64)
            images_upload_handler: function(blobInfo, progress) {
                return new Promise(function(resolve, reject) {
                    const reader = new FileReader();
                    reader.onloadend = function() {
                        resolve(reader.result);
                    };
                    reader.onerror = function() {
                        reject('Error al procesar la imagen');
                    };
                    reader.readAsDataURL(blobInfo.blob());
                });
            },

            // Configuración adicional
            paste_data_images: true,
            automatic_uploads: true,
            file_picker_types: 'image',
            branding: false,
            promotion: false,
            resize: true,
            statusbar: true,

            // Mantener formato
            entity_encoding: 'raw',

            // Configuración de línea
            forced_root_block: 'p',

            // Callback cuando está listo
            setup: function(editor) {
                editor.on('init', function() {
                    console.log('✓ TinyMCE 7 inicializado correctamente');
                });
            }
        });

        // ── Teléfono: combinar indicativo + número antes de enviar ──────────
        document.addEventListener('DOMContentLoaded', function() {
            const indicativoSel = document.getElementById('phone-indicativo');
            const phoneNum = document.getElementById('phone-number');
            const phoneFull = document.getElementById('cliente_telefono_full');

            function updatePhoneFull() {
                const ind = indicativoSel ? indicativoSel.value.replace(/\D/g, '') : '57';
                const num = phoneNum ? phoneNum.value.replace(/\D/g, '') : '';
                if (phoneFull) phoneFull.value = num ? ind + num : '';
            }

            if (indicativoSel) indicativoSel.addEventListener('change', updatePhoneFull);
            if (phoneNum) phoneNum.addEventListener('input', updatePhoneFull);

            // Actualizar placeholder según país
            if (indicativoSel) {
                indicativoSel.addEventListener('change', function() {
                    const opt = this.options[this.selectedIndex];
                    const mask = (opt.dataset.mask || '').replace(/0/g, '_');
                    if (phoneNum) phoneNum.placeholder = mask || 'Número';
                });
            }
        });

        // Validación antes de enviar el formulario
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');

            form.addEventListener('submit', function(e) {
                // Combinar teléfono antes de enviar
                const ind = (document.getElementById('phone-indicativo')?.value || '57').replace(/\D/g, '');
                const num = (document.getElementById('phone-number')?.value || '').replace(/\D/g, '');
                const full = document.getElementById('cliente_telefono_full');
                if (full) full.value = num ? ind + num : '';
                // Verificar si TinyMCE está listo
                if (!tinymce.get('contenido')) {
                    e.preventDefault();
                    alert('El editor aún se está cargando. Por favor, espera un momento.');
                    return false;
                }

                // Obtener el contenido del editor
                const content = tinymce.get('contenido').getContent();
                const textContent = tinymce.get('contenido').getContent({
                    format: 'text'
                }).trim();

                if (textContent.length === 0) {
                    e.preventDefault();
                    alert('Por favor, escribe el contenido del contrato antes de continuar.');
                    tinymce.get('contenido').focus();
                    return false;
                }

                if (textContent.length < 50) {
                    if (!confirm('El contenido del contrato es muy corto (' + textContent.length + ' caracteres). ¿Deseas continuar de todos modos?')) {
                        e.preventDefault();
                        tinymce.get('contenido').focus();
                        return false;
                    }
                }
            });
        });

        // ── Importar archivo ──────────────────────────────────────────────────
        async function importFile(input) {
            const file = input.files[0];
            if (!file) return;

            const status = document.getElementById('import-status');
            const btn = document.getElementById('upload-btn');

            // Verificar que TinyMCE esté listo
            if (!tinymce.get('contenido')) {
                alert('El editor aún se está cargando. Por favor, espera un momento e intenta de nuevo.');
                input.value = '';
                return;
            }

            // Mostrar estado cargando
            status.className = 'mb-2 px-3 py-2 rounded-lg text-sm bg-blue-50 text-blue-700 border border-blue-200 flex items-center gap-2';
            status.innerHTML = `<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
            </svg> Procesando <strong>${escHtml(file.name)}</strong>…`;
            status.classList.remove('hidden');
            btn.style.pointerEvents = 'none';

            const formData = new FormData();
            formData.append('archivo', file);

            try {
                const res = await fetch('api/extract-contract.php', {
                    method: 'POST',
                    body: formData
                });
                const data = await res.json();

                if (data.success) {
                    // Cargar el HTML en TinyMCE (mantiene el formato)
                    tinymce.get('contenido').setContent(data.html);

                    const textLength = tinymce.get('contenido').getContent({
                        format: 'text'
                    }).length;

                    status.className = 'mb-2 px-3 py-2 rounded-lg text-sm bg-green-50 text-green-700 border border-green-200 flex items-center gap-2';
                    status.innerHTML = `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg> Archivo importado correctamente (${textLength.toLocaleString()} caracteres). Revisa y edita el contenido antes de continuar.
                    <button type="button" onclick="this.closest('#import-status').classList.add('hidden')"
                            class="ml-auto text-green-500 hover:text-green-700 font-bold text-lg leading-none">×</button>`;

                    // Scroll al editor y dar foco
                    setTimeout(() => {
                        const editorContainer = document.querySelector('.tox-tinymce');
                        if (editorContainer) {
                            editorContainer.scrollIntoView({
                                behavior: 'smooth',
                                block: 'center'
                            });
                        }
                        tinymce.get('contenido').focus();
                    }, 100);
                } else {
                    status.className = 'mb-2 px-3 py-2 rounded-lg text-sm bg-red-50 text-red-700 border border-red-200';
                    status.innerHTML = `<strong>Error:</strong> ${escHtml(data.message)}`;
                }
            } catch (err) {
                status.className = 'mb-2 px-3 py-2 rounded-lg text-sm bg-red-50 text-red-700 border border-red-200';
                status.textContent = 'Error de conexión al procesar el archivo.';
                console.error('Error:', err);
            } finally {
                btn.style.pointerEvents = '';
                input.value = ''; // permitir subir el mismo archivo otra vez
            }
        }

        function escHtml(str) {
            return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        }

        // ── Copiar link ───────────────────────────────────────────────────────
        function copyLink() {
            const input = document.getElementById('contract-link');
            input.select();
            document.execCommand('copy');

            // Feedback visual
            const button = event.target;
            const originalText = button.textContent;
            button.textContent = 'Copiado!';
            setTimeout(() => {
                button.textContent = originalText;
            }, 2000);
        }

        // ── Upload de Logo ─────────────────────────────────────────────────────
        async function uploadLogo(input) {
            const file = input.files[0];
            if (!file) return;

            const status = document.getElementById('logo-status');
            const preview = document.getElementById('logo-preview');
            const previewImg = document.getElementById('logo-preview-img');
            const removeBtn = document.getElementById('remove-logo-btn');
            const logoPathInput = document.getElementById('logo_path');

            // Validar tamaño (5MB)
            if (file.size > 5 * 1024 * 1024) {
                status.className = 'mt-2 px-3 py-2 rounded-lg text-sm bg-red-50 text-red-700 border border-red-200';
                status.textContent = 'El archivo es demasiado grande. Máximo 5MB.';
                status.classList.remove('hidden');
                input.value = '';
                return;
            }

            // Mostrar preview local inmediatamente (sin esperar subida)
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImg.src = e.target.result;
                preview.classList.remove('hidden');
            };
            reader.readAsDataURL(file);

            // Mostrar estado de carga
            status.className = 'mt-2 px-3 py-2 rounded-lg text-sm bg-blue-50 text-blue-700 border border-blue-200 flex items-center gap-2';
            status.innerHTML = `<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
            </svg> Subiendo logo...`;
            status.classList.remove('hidden');

            const formData = new FormData();
            formData.append('logo', file);

            try {
                const res = await fetch('api/upload-logo.php', {
                    method: 'POST',
                    body: formData
                });
                const data = await res.json();

                if (data.success) {
                    // Guardar ruta en campo oculto
                    logoPathInput.value = data.path;

                    // Ya tenemos el preview local, solo mostramos botón eliminar
                    removeBtn.classList.remove('hidden');

                    status.className = 'mt-2 px-3 py-2 rounded-lg text-sm bg-green-50 text-green-700 border border-green-200 flex items-center gap-2';
                    status.innerHTML = `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg> Logo subido exitosamente`;

                    setTimeout(() => {
                        status.classList.add('hidden');
                    }, 3000);
                } else {
                    // Limpiar preview en caso de error
                    preview.classList.add('hidden');
                    previewImg.src = '';

                    status.className = 'mt-2 px-3 py-2 rounded-lg text-sm bg-red-50 text-red-700 border border-red-200';
                    status.innerHTML = `<strong>Error:</strong> ${escHtml(data.message)}`;
                }
            } catch (err) {
                // Limpiar preview en caso de error
                preview.classList.add('hidden');
                previewImg.src = '';

                status.className = 'mt-2 px-3 py-2 rounded-lg text-sm bg-red-50 text-red-700 border border-red-200';
                status.textContent = 'Error de conexión al subir el logo.';
                console.error('Error:', err);
            } finally {
                input.value = '';
            }
        }

        function removeLogo() {
            document.getElementById('logo_path').value = '';
            document.getElementById('logo-preview').classList.add('hidden');
            document.getElementById('logo-preview-img').src = '';
            document.getElementById('remove-logo-btn').classList.add('hidden');
            document.getElementById('logo-upload').value = '';
        }

        // ── Cargar Plantilla ───────────────────────────────────────────────────
        async function loadTemplate() {
            const selector = document.getElementById('template-selector');
            const templateId = selector.value;

            if (!templateId) {
                alert('Por favor, selecciona una plantilla primero.');
                return;
            }

            // Verificar que TinyMCE esté listo
            if (!tinymce.get('contenido')) {
                alert('El editor aún se está cargando. Por favor, espera un momento.');
                return;
            }

            // Confirmar si ya hay contenido
            const currentContent = tinymce.get('contenido').getContent({
                format: 'text'
            }).trim();
            if (currentContent.length > 10) {
                if (!confirm('Ya hay contenido en el editor. ¿Deseas reemplazarlo con la plantilla seleccionada?')) {
                    return;
                }
            }

            try {
                const res = await fetch(`api/get-template.php?id=${templateId}`);
                const data = await res.json();

                if (data.success) {
                    const template = data.template;

                    // Cargar título si el campo está vacío
                    const tituloInput = document.querySelector('input[name="titulo"]');
                    if (!tituloInput.value.trim()) {
                        tituloInput.value = template.nombre;
                    }

                    // Cargar contenido en TinyMCE
                    tinymce.get('contenido').setContent(template.contenido);

                    // Mostrar notificación
                    alert(`Plantilla "${template.nombre}" cargada exitosamente. Puedes editarla ahora.`);

                    // Scroll al editor
                    setTimeout(() => {
                        const editorContainer = document.querySelector('.tox-tinymce');
                        if (editorContainer) {
                            editorContainer.scrollIntoView({
                                behavior: 'smooth',
                                block: 'center'
                            });
                        }
                        tinymce.get('contenido').focus();
                    }, 100);

                    // Resetear selector
                    selector.value = '';
                } else {
                    alert('Error: ' + data.message);
                }
            } catch (err) {
                alert('Error al cargar la plantilla. Intenta de nuevo.');
                console.error('Error:', err);
            }
        }
    </script>

    <?php include __DIR__ . '/../../includes/admin-footer.php'; ?>
</body>

</html>