compose.php

<?php
require_once 'config/config.php';
require_once 'classes/ImapClient.php';
require_once 'classes/SmtpClient.php';
require_once 'classes/UserProfile.php';

Config::load();

// Inicializar sistema de traducciones
$i18n = I18n::getInstance();

// Función helper para parsear direcciones de email
function parseEmailAddresses($emailString) {
    if (empty($emailString)) {
        return [];
    }
    
    $emails = array_map('trim', explode(',', $emailString));
    $validEmails = [];
    
    foreach ($emails as $email) {
        // Extraer email de formato "Name <email@domain.com>" o usar email directo
        if (preg_match('/<([^>]+)>/', $email, $matches)) {
            $cleanEmail = trim($matches[1]);
        } else {
            $cleanEmail = trim($email);
        }
        
        if (!empty($cleanEmail) && filter_var($cleanEmail, FILTER_VALIDATE_EMAIL)) {
            $validEmails[] = $cleanEmail;
        }
    }
    
    return $validEmails;
}

// Verificar autenticación
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    header('Location: index.php');
    exit;
}

$error = '';
$success = '';
$isReply = isset($_GET['reply']);
$isReplyAll = isset($_GET['reply_all']);
$replyMessageId = intval($_GET['reply'] ?? $_GET['reply_all'] ?? 0);
$currentFolder = $_GET['folder'] ?? 'INBOX';

// Cargar perfil de usuario para acceso a contactos
$userProfile = new UserProfile($_SESSION['email'], $_SESSION['current_server'] ?? null);
$contacts = $userProfile->getContacts();

// Datos por defecto
$to = '';
$cc = '';
$bcc = '';
$subject = '';
$body = '';

// Si es una respuesta, cargar datos del mensaje original
if (($isReply || $isReplyAll) && $replyMessageId) {
    try {
        $imapClient = new ImapClient($_SESSION['email'], $_SESSION['password'], $_SESSION['current_server'] ?? null);
        $imapClient->selectFolder($currentFolder);
        $originalMessage = $imapClient->getMessage($replyMessageId);
        
        // Configurar destinatario(s) según el tipo de respuesta
        if ($isReplyAll) {
            // Reply All: incluir remitente original y todos los destinatarios CC/TO (excepto el usuario actual)
            $replyTo = $originalMessage['reply_to'] ?: $originalMessage['from'];
            $originalTo = $originalMessage['to'];
            $originalCc = $originalMessage['cc'];
            $currentUser = $_SESSION['email'];
            
            // Procesar direcciones para reply-all
            $allRecipients = [];
            
            // Agregar reply-to o from
            if (!empty($replyTo)) {
                $allRecipients[] = $replyTo;
            }
            
            // Procesar TO original (excluir usuario actual)
            if (!empty($originalTo)) {
                $toAddresses = parseEmailAddresses($originalTo);
                foreach ($toAddresses as $addr) {
                    if (strtolower(trim($addr)) !== strtolower($currentUser) && !in_array($addr, $allRecipients)) {
                        $allRecipients[] = $addr;
                    }
                }
            }
            
            // Configurar TO y CC para reply-all
            $to = !empty($allRecipients) ? $allRecipients[0] : $replyTo;
            
            // El resto va a CC (incluyendo CC original, excluyendo usuario actual)
            $ccRecipients = array_slice($allRecipients, 1);
            if (!empty($originalCc)) {
                $ccAddresses = parseEmailAddresses($originalCc);
                foreach ($ccAddresses as $addr) {
                    if (strtolower(trim($addr)) !== strtolower($currentUser) && !in_array($addr, $ccRecipients)) {
                        $ccRecipients[] = $addr;
                    }
                }
            }
            $cc = implode(', ', $ccRecipients);
            
        } else {
            // Reply simple: solo al remitente
            $to = $originalMessage['reply_to'] ?: $originalMessage['from'];
        }
        
        $subject = 'Re: ' . preg_replace('/^Re:\s*/', '', $originalMessage['subject']);
        
        // Formatear mensaje original
        $originalBody = $originalMessage['body'];
        
        // Si el mensaje original es HTML, mantenemos el formato HTML
        if (strpos($originalBody, '<') !== false) {
            $body = "<br><br><hr><strong>--- Mensaje original ---</strong><br>";
            $body .= "<strong>De:</strong> " . htmlspecialchars($originalMessage['from']) . "<br>";
            $body .= "<strong>Fecha:</strong> " . htmlspecialchars($originalMessage['date']) . "<br>";
            $body .= "<strong>Asunto:</strong> " . htmlspecialchars($originalMessage['subject']) . "<br><br>";
            $body .= "<blockquote style='border-left: 3px solid #ccc; padding-left: 10px; margin: 10px 0; color: #666;'>";
            $body .= $originalBody;
            $body .= "</blockquote>";
        } else {
            // Mensaje original en texto plano
            $originalBody = strip_tags($originalBody);
            $originalBody = preg_replace('/\n+/', "\n", $originalBody);
            $body = "\n\n--- Mensaje original ---\n";
            $body .= "De: " . $originalMessage['from'] . "\n";
            $body .= "Fecha: " . $originalMessage['date'] . "\n";
            $body .= "Asunto: " . $originalMessage['subject'] . "\n\n";
            $body .= $originalBody;
        }
        
    } catch (Exception $e) {
        $error = 'Error al cargar el mensaje original: ' . $e->getMessage();
    }
}

// Agregar firma automáticamente si está habilitada
$signatureHtml = $userProfile->getSignatureHtml(!$isReply && !$isReplyAll);
if (!empty($signatureHtml) && empty($_POST)) { // Solo en carga inicial, no al procesar formulario
    if (empty($body)) {
        // Mensaje nuevo
        $body = $signatureHtml;
    } else {
        // Respuesta - agregar firma al inicio
        if (strpos($body, '<') !== false) {
            // Es HTML
            $body = $signatureHtml . "<br><br>" . $body;
        } else {
            // Es texto plano, convertir firma de HTML a texto
            $signatureText = strip_tags(str_replace(['<br>', '<br/>', '<br />'], "\n", $signatureHtml));
            $body = $signatureText . "\n\n" . $body;
        }
    }
}

// Procesar envío
if ($_POST) {
    $to = trim($_POST['to'] ?? '');
    $cc = trim($_POST['cc'] ?? '');
    $bcc = trim($_POST['bcc'] ?? '');
    $subject = trim($_POST['subject'] ?? '');
    $body = $_POST['body'] ?? '';
    $isHtml = isset($_POST['is_html']) && $_POST['is_html'] === 'true';
    
    // Procesar archivos adjuntos
    $attachments = [];
    $uploadErrors = [];
    
    if (!empty($_FILES['attachments']['name'][0])) {
        $uploadDir = __DIR__ . '/uploads/';
        
        // Asegurar que el directorio existe
        if (!is_dir($uploadDir)) {
            mkdir($uploadDir, 0755, true);
        }
        
        $maxFileSize = 2 * 1024 * 1024; // 2MB máximo por archivo (límite de PHP)
        $allowedTypes = [
            'image/jpeg', 'image/png', 'image/gif', 'image/webp',
            'application/pdf', 'application/msword', 
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            'application/vnd.ms-excel',
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'text/plain', 'text/csv',
            'application/zip', 'application/x-zip-compressed'
        ];
        
        for ($i = 0; $i < count($_FILES['attachments']['name']); $i++) {
            if ($_FILES['attachments']['error'][$i] === UPLOAD_ERR_OK) {
                $fileName = $_FILES['attachments']['name'][$i];
                $fileSize = $_FILES['attachments']['size'][$i];
                $fileType = $_FILES['attachments']['type'][$i];
                $fileTmpName = $_FILES['attachments']['tmp_name'][$i];
                
                // Validar tamaño
                if ($fileSize > $maxFileSize) {
                    $uploadErrors[] = "El archivo '$fileName' excede el tamaño máximo permitido (2MB).";
                    continue;
                }
                
                // Validar tipo de archivo
                $finfo = finfo_open(FILEINFO_MIME_TYPE);
                $actualFileType = finfo_file($finfo, $fileTmpName);
                finfo_close($finfo);
                
                if (!in_array($actualFileType, $allowedTypes)) {
                    $uploadErrors[] = "El tipo de archivo '$fileName' no está permitido.";
                    continue;
                }
                
                // Generar nombre único para evitar conflictos
                $safeFileName = uniqid() . '_' . preg_replace('/[^a-zA-Z0-9._-]/', '', $fileName);
                $uploadPath = $uploadDir . $safeFileName;
                
                if (move_uploaded_file($fileTmpName, $uploadPath)) {
                    $attachments[] = [
                        'path' => $uploadPath,
                        'name' => $fileName,
                        'type' => $actualFileType
                    ];
                } else {
                    $uploadErrors[] = "Error al subir el archivo '$fileName'.";
                }
            } elseif ($_FILES['attachments']['error'][$i] !== UPLOAD_ERR_NO_FILE) {
                $uploadErrors[] = "Error en el archivo '" . $_FILES['attachments']['name'][$i] . "': " . $_FILES['attachments']['error'][$i];
            }
        }
    }
    
    if (!empty($uploadErrors)) {
        $error = implode('<br>', $uploadErrors);
    } elseif (empty($to) || empty($subject) || empty($body)) {
        $error = 'Por favor, complete todos los campos obligatorios (Para, Asunto y Mensaje).';
    } else {
        // Validar direcciones de email usando la función parseEmailAddresses
        $emailErrors = [];
        
        // Función helper para validar un campo de email
        function validateEmailField($fieldValue, $fieldName) {
            if (empty($fieldValue)) {
                return [];
            }
            
            $errors = [];
            $inputEmails = array_map('trim', explode(',', $fieldValue));
            $validEmails = parseEmailAddresses($fieldValue);
            
            // Verificar si hay emails que no pudieron ser parseados (inválidos)
            foreach ($inputEmails as $inputEmail) {
                if (empty($inputEmail)) continue;
                
                // Extraer el email limpio para comparar
                $cleanEmail = $inputEmail;
                if (preg_match('/<([^>]+)>/', $inputEmail, $matches)) {
                    $cleanEmail = trim($matches[1]);
                }
                
                // Si el email limpio no está en la lista de válidos, es inválido
                if (!in_array($cleanEmail, $validEmails)) {
                    $errors[] = "Dirección inválida en '$fieldName': $inputEmail";
                }
            }
            
            return $errors;
        }
        
        // Validar campo TO (obligatorio)
        if (empty($to)) {
            $emailErrors[] = "El campo 'Para' es obligatorio";
        } else {
            $toErrors = validateEmailField($to, 'Para');
            $emailErrors = array_merge($emailErrors, $toErrors);
            
            // Verificar que al menos hay un email válido en TO
            $validToEmails = parseEmailAddresses($to);
            if (empty($validToEmails)) {
                $emailErrors[] = "Debe especificar al menos una dirección válida en 'Para'";
            }
        }
        
        // Validar campo CC (opcional)
        if (!empty($cc)) {
            $ccErrors = validateEmailField($cc, 'CC');
            $emailErrors = array_merge($emailErrors, $ccErrors);
        }
        
        // Validar campo BCC (opcional)
        if (!empty($bcc)) {
            $bccErrors = validateEmailField($bcc, 'BCC');
            $emailErrors = array_merge($emailErrors, $bccErrors);
        }
        
        if (!empty($emailErrors)) {
            $error = implode('<br>', $emailErrors);
        } else {
            try {
                $smtpClient = new SmtpClient($_SESSION['email'], $_SESSION['password'], $_SESSION['current_server'] ?? null);
                
                // Si el contenido contiene tags HTML, tratarlo como HTML
                if (!$isHtml && (strpos($body, '<') !== false || strpos($body, '>') !== false)) {
                    $isHtml = true;
                }
                
                $smtpClient->sendMail($to, $subject, $body, $isHtml, null, $attachments, $cc, $bcc);
                
                $attachmentInfo = !empty($attachments) ? ' con ' . count($attachments) . ' archivo(s) adjunto(s)' : '';
                $ccInfo = !empty($cc) ? ' y copia a ' . $cc : '';
                $bccInfo = !empty($bcc) ? ' con copia oculta' : '';
                $success = 'Mensaje enviado correctamente vía SMTP' . ($isHtml ? ' (formato HTML)' : ' (texto plano)') . $attachmentInfo . $ccInfo . $bccInfo . '.';
                
                // Limpiar archivos temporales después del envío exitoso
                foreach ($attachments as $attachment) {
                    if (file_exists($attachment['path'])) {
                        unlink($attachment['path']);
                    }
                }
                
                $to = '';
                $cc = '';
                $bcc = '';
                $subject = '';
                $body = '';
            } catch (Exception $e) {
                $error = 'Error SMTP al enviar el mensaje: ' . $e->getMessage();
                error_log('SMTP Error: ' . $e->getMessage()); // Log para debugging
                
                // Limpiar archivos temporales en caso de error
                foreach ($attachments as $attachment) {
                    if (file_exists($attachment['path'])) {
                        unlink($attachment['path']);
                    }
                }
            }
        }
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo Config::get('APP_NAME', 'IMAP Client'); ?> - Redactar</title>
    <link rel="stylesheet" href="assets/style.css">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
    <link rel="icon" type="image/png" href="assets/favicon.png">
    <link rel="apple-touch-icon" href="assets/favicon.png">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#764ba2">
    
    <!-- Quill Editor -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    
    <style>
        .attachment-controls {
            margin-bottom: 10px;
        }
        
        .attachment-controls input[type="file"] {
            margin-bottom: 5px;
        }
        
        .form-help {
            color: #666;
            font-size: 0.85em;
            display: block;
            margin-top: 5px;
        }
        
        .attachment-preview {
            margin-top: 10px;
        }
        
        .attachment-item {
            display: flex;
            align-items: center;
            padding: 8px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            margin-bottom: 5px;
        }
        
        .attachment-info {
            flex: 1;
            margin-left: 10px;
        }
        
        .attachment-name {
            font-weight: 500;
            color: #333;
        }
        
        .attachment-size {
            font-size: 0.85em;
            color: #666;
        }
        
        .attachment-remove {
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 3px;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 0.8em;
        }
        
        .attachment-remove:hover {
            background: #c82333;
        }
        
        .attachment-icon {
            font-size: 1.2em;
            min-width: 24px;
        }
        
        .drag-over {
            border-color: #007bff !important;
            background-color: #e3f2fd !important;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #333;
        }
        
        .form-group input[type="text"],
        .form-group input[type="email"] {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        
        .form-group input[type="text"]:focus,
        .form-group input[type="email"]:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }
        
        .email-field-toggle {
            margin-top: 10px;
        }
        
        .toggle-button {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 4px 8px;
            font-size: 0.85em;
            color: #6c757d;
            cursor: pointer;
            border-radius: 3px;
            transition: background-color 0.2s;
        }
        
        .toggle-button:hover {
            background: #e9ecef;
        }
        
        .cc-bcc-fields {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <img src="assets/favicon.svg" alt="Logo" class="logo-icon">
                    <div class="logo-text">
                        <span class="logo-main"><?php echo Config::get('APP_NAME', 'IMAP Client'); ?></span>
                        <span class="logo-sub">Cliente de Correo</span>
                    </div>
                </div>
                <div class="user-info">
                    <span><?php echo htmlspecialchars($_SESSION['email']); ?></span>
                    <a href="profile.php" class="profile-btn" title="<?php echo __('navigation.profile'); ?>">👤</a>
                    <a href="contacts.php" class="profile-btn" title="<?php echo __('navigation.contacts'); ?>">📇</a>
                    <a href="logout.php" class="logout-btn"><?php echo __('navigation.logout'); ?></a>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="main-layout">
            <aside class="sidebar">
                <a href="mailbox.php" class="btn">← <?php echo __('navigation.back_to_inbox'); ?></a>
                <a href="search.php" class="btn">🔍 <?php echo __('navigation.search'); ?></a>
                
                <?php if ($isReply || $isReplyAll): ?>
                    <a href="message.php?folder=<?php echo urlencode($currentFolder); ?>&id=<?php echo $replyMessageId; ?>" 
                       class="btn">Ver mensaje original</a>
                <?php endif; ?>
            </aside>

            <main class="content">
                <h2><?php 
                    if ($isReplyAll) {
                        echo 'Responder a todos';
                    } elseif ($isReply) {
                        echo 'Responder mensaje'; 
                    } else {
                        echo 'Redactar nuevo mensaje';
                    }
                ?></h2>

                <?php if ($error): ?>
                    <div class="alert alert-error"><?php echo htmlspecialchars($error); ?></div>
                <?php endif; ?>
                
                <?php if ($success): ?>
                    <div class="alert alert-success"><?php echo htmlspecialchars($success); ?></div>
                <?php endif; ?>

                <form class="compose-form" method="POST" enctype="multipart/form-data">
                    <input type="hidden" id="is_html" name="is_html" value="true">
                    
                    <div class="form-group">
                        <label for="to">Para:</label>
                        <input type="text" id="to" name="to" required 
                               value="<?php echo htmlspecialchars($to); ?>"
                               placeholder="email@ejemplo.com, Nombre <email@ejemplo.com>">
                        <small class="form-help">Separe múltiples direcciones con comas. Formatos: email@ejemplo.com o "Nombre &lt;email@ejemplo.com&gt;"</small>
                        
                        <div class="email-field-toggle">
                            <button type="button" id="toggle-cc" class="toggle-button">+ CC</button>
                            <button type="button" id="toggle-bcc" class="toggle-button">+ BCC</button>
                        </div>
                    </div>
                    
                    <div class="cc-bcc-fields">
                        <div class="form-group" id="cc-field" style="display: none;">
                            <label for="cc">CC (Copia):</label>
                            <input type="text" id="cc" name="cc" 
                                   value="<?php echo htmlspecialchars($cc ?? ''); ?>"
                                   placeholder="email@ejemplo.com, Nombre <email@ejemplo.com>">
                            <small class="form-help">Los destinatarios verán estas direcciones</small>
                        </div>
                        
                        <div class="form-group" id="bcc-field" style="display: none;">
                            <label for="bcc">BCC (Copia oculta):</label>
                            <input type="text" id="bcc" name="bcc" 
                                   value="<?php echo htmlspecialchars($bcc ?? ''); ?>"
                                   placeholder="email@ejemplo.com, Nombre <email@ejemplo.com>">
                            <small class="form-help">Los destinatarios NO verán estas direcciones</small>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="subject">Asunto:</label>
                        <input type="text" id="subject" name="subject" required 
                               value="<?php echo htmlspecialchars($subject); ?>">
                    </div>
                    
                    <div class="form-group">
                        <label for="body">Mensaje:</label>
                        <div class="editor-controls">
                            <button type="button" id="toggle-editor" class="btn btn-sm">🔧 Cambiar modo editor</button>
                            <button type="button" id="templates-btn" class="btn btn-sm">📄 Plantillas</button>
                            <span id="editor-mode" class="editor-mode-indicator">Modo: Visual</span>
                        </div>
                        <div id="quill-editor" style="height: 400px; display: block;"></div>
                        <textarea id="body" name="body" style="display: none;"><?php echo htmlspecialchars($body); ?></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="attachments">Archivos adjuntos:</label>
                        <div class="attachment-controls">
                            <input type="file" id="attachments" name="attachments[]" multiple 
                                   accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip">
                            <small class="form-help">
                                Archivos permitidos: Imágenes, PDF, Word, Excel, texto y ZIP. Máximo 2MB por archivo.
                            </small>
                        </div>
                        <div id="attachment-preview" class="attachment-preview"></div>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn">📤 Enviar</button>
                        <a href="mailbox.php" class="btn" style="background: #6c757d;">Cancelar</a>
                    </div>
                </form>
            </main>
        </div>
    </div>

    <script>
        let quillEditor = null;
        let isVisualMode = true;
        let selectedFiles = [];

        // Función global para remover adjuntos
        function removeAttachment(index) {
            selectedFiles.splice(index, 1);
            updateAttachmentPreview();
            updateFileInput();
        }

        // Plantillas de correo
        const emailTemplates = {
            formal: {
                title: "Correo Formal",
                content: `<p>Estimado/a [Nombre],</p>
                         <p>Espero que este mensaje le encuentre bien.</p>
                         <p>[Su mensaje aquí]</p>
                         <p>Atentamente,<br>
                         [Su nombre]</p>`
            },
            informal: {
                title: "Correo Informal",
                content: `<p>Hola [Nombre],</p>
                         <p>¡Espero que estés bien!</p>
                         <p>[Su mensaje aquí]</p>
                         <p>Saludos,<br>
                         [Su nombre]</p>`
            },
            agradecimiento: {
                title: "Agradecimiento",
                content: `<p>Hola [Nombre],</p>
                         <p>Quería tomarme un momento para agradecerte por [motivo].</p>
                         <p>[Detalles adicionales]</p>
                         <p>¡Muchas gracias!</p>
                         <p>Saludos cordiales,<br>
                         [Su nombre]</p>`
            },
            seguimiento: {
                title: "Seguimiento",
                content: `<p>Hola [Nombre],</p>
                         <p>Escribo para hacer seguimiento sobre [tema].</p>
                         <p>[Detalles del seguimiento]</p>
                         <p>Quedo atento/a a su respuesta.</p>
                         <p>Saludos,<br>
                         [Su nombre]</p>`
            }
        };

        // Configuración del editor Quill
        const quillConfig = {
            theme: 'snow',
            placeholder: 'Escriba su mensaje aquí...',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'align': [] }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['blockquote', 'code-block'],
                    ['link'],
                    ['clean']
                ]
            }
        };

        // Función para alternar entre modo visual y texto plano
        function toggleEditorMode() {
            const quillContainer = document.getElementById('quill-editor');
            const textarea = document.getElementById('body');
            
            if (isVisualMode) {
                // Cambiar a modo texto plano
                if (quillEditor) {
                    const htmlContent = quillEditor.root.innerHTML;
                    
                    // Convertir HTML a texto plano
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = htmlContent;
                    const textContent = tempDiv.textContent || tempDiv.innerText || '';
                    
                    textarea.value = textContent;
                    document.getElementById('is_html').value = 'false';
                }
                
                quillContainer.style.display = 'none';
                textarea.style.display = 'block';
                textarea.style.height = '400px';
                textarea.setAttribute('required', 'required');
                isVisualMode = false;
            } else {
                // Cambiar a modo visual
                const textContent = textarea.value;
                
                quillContainer.style.display = 'block';
                textarea.style.display = 'none';
                textarea.removeAttribute('required');
                
                if (quillEditor) {
                    // Convertir texto plano a HTML básico
                    const htmlContent = textContent.replace(/\n/g, '<br>');
                    quillEditor.root.innerHTML = htmlContent;
                }
                
                document.getElementById('is_html').value = 'true';
                isVisualMode = true;
            }
            updateModeIndicator();
        }

        // Actualizar indicador de modo
        function updateModeIndicator() {
            const indicator = document.getElementById('editor-mode');
            indicator.textContent = isVisualMode ? 'Modo: Visual' : 'Modo: Texto';
            indicator.className = isVisualMode ? 'editor-mode-indicator visual' : 'editor-mode-indicator text';
        }

        // Función para mostrar plantillas
        function showTemplates() {
            const template = prompt(
                "Seleccione una plantilla:\n" +
                "1 - Correo Formal\n" +
                "2 - Correo Informal\n" +
                "3 - Agradecimiento\n" +
                "4 - Seguimiento\n\n" +
                "Ingrese el número (1-4):"
            );

            const templates = ['formal', 'informal', 'agradecimiento', 'seguimiento'];
            const selectedTemplate = templates[parseInt(template) - 1];

            if (selectedTemplate && emailTemplates[selectedTemplate]) {
                if (isVisualMode && quillEditor) {
                    quillEditor.root.innerHTML = emailTemplates[selectedTemplate].content;
                } else {
                    // Convertir HTML a texto plano para modo texto
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = emailTemplates[selectedTemplate].content;
                    const textContent = tempDiv.textContent || tempDiv.innerText || '';
                    document.getElementById('body').value = textContent;
                }
            }
        }

        // Event listeners
        document.getElementById('toggle-editor').addEventListener('click', toggleEditorMode);
        document.getElementById('templates-btn').addEventListener('click', showTemplates);
        
        // Manejar toggle de campos CC y BCC
        document.getElementById('toggle-cc').addEventListener('click', function() {
            const ccField = document.getElementById('cc-field');
            const button = this;
            
            if (ccField.style.display === 'none') {
                ccField.style.display = 'block';
                button.textContent = '- CC';
                button.style.background = '#e9ecef';
                document.getElementById('cc').focus();
            } else {
                ccField.style.display = 'none';
                button.textContent = '+ CC';
                button.style.background = '#f8f9fa';
                document.getElementById('cc').value = '';
            }
        });
        
        document.getElementById('toggle-bcc').addEventListener('click', function() {
            const bccField = document.getElementById('bcc-field');
            const button = this;
            
            if (bccField.style.display === 'none') {
                bccField.style.display = 'block';
                button.textContent = '- BCC';
                button.style.background = '#e9ecef';
                document.getElementById('bcc').focus();
            } else {
                bccField.style.display = 'none';
                button.textContent = '+ BCC';
                button.style.background = '#f8f9fa';
                document.getElementById('bcc').value = '';
            }
        });
        
        // Manejar adjuntos
        const attachmentInput = document.getElementById('attachments');
        
        attachmentInput.addEventListener('change', handleFileSelection);
        
        function handleFileSelection(event) {
            const files = Array.from(event.target.files);
            selectedFiles = selectedFiles.concat(files);
            updateAttachmentPreview();
        }
        
        function updateAttachmentPreview() {
            const attachmentPreview = document.getElementById('attachment-preview');
            attachmentPreview.innerHTML = '';
            
            selectedFiles.forEach((file, index) => {
                const item = document.createElement('div');
                item.className = 'attachment-item';
                
                const icon = getFileIcon(file.type);
                const size = formatFileSize(file.size);
                
                item.innerHTML = `
                    <span class="attachment-icon">${icon}</span>
                    <div class="attachment-info">
                        <div class="attachment-name">${escapeHtml(file.name)}</div>
                        <div class="attachment-size">${size}</div>
                    </div>
                    <button type="button" class="attachment-remove" onclick="removeAttachment(${index})">✕</button>
                `;
                
                attachmentPreview.appendChild(item);
            });
        }
        
        function updateFileInput() {
            // Crear un nuevo DataTransfer para actualizar el input file
            const dt = new DataTransfer();
            selectedFiles.forEach(file => dt.items.add(file));
            attachmentInput.files = dt.files;
        }
        
        function getFileIcon(mimeType) {
            if (mimeType.startsWith('image/')) return '🖼️';
            if (mimeType === 'application/pdf') return '📄';
            if (mimeType.includes('word') || mimeType.includes('document')) return '📝';
            if (mimeType.includes('excel') || mimeType.includes('sheet')) return '📊';
            if (mimeType.includes('zip')) return '📦';
            if (mimeType.startsWith('text/')) return '📄';
            return '📎';
        }
        
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        
        // Drag and drop para adjuntos
        const attachmentArea = document.querySelector('.attachment-controls');
        
        attachmentArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            e.stopPropagation();
            this.classList.add('drag-over');
        });
        
        attachmentArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            e.stopPropagation();
            this.classList.remove('drag-over');
        });
        
        attachmentArea.addEventListener('drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
            this.classList.remove('drag-over');
            
            const files = Array.from(e.dataTransfer.files);
            selectedFiles = selectedFiles.concat(files);
            updateAttachmentPreview();
            updateFileInput();
        });

        // Inicializar editor al cargar la página
        document.addEventListener('DOMContentLoaded', function() {
            const textarea = document.getElementById('body');
            
            // Remover required del textarea ya que usaremos validación personalizada
            textarea.removeAttribute('required');
            
            quillEditor = new Quill('#quill-editor', quillConfig);
            
            // Añadir validación visual en tiempo real
            quillEditor.on('text-change', function() {
                const textContent = quillEditor.getText().trim();
                const editorContainer = document.getElementById('quill-editor');
                
                if (textContent.length === 0) {
                    editorContainer.style.borderColor = '#dc3545';
                } else {
                    editorContainer.style.borderColor = '#ced4da';
                }
            });
            
            // Cargar contenido inicial si existe
            const initialContent = textarea.value;
            if (initialContent) {
                quillEditor.root.innerHTML = initialContent.replace(/\n/g, '<br>');
            }
            
            document.getElementById('is_html').value = 'true';
            updateModeIndicator();
            
            // Mostrar campos CC/BCC si tienen valores
            const ccInput = document.getElementById('cc');
            const bccInput = document.getElementById('bcc');
            
            if (ccInput.value.trim()) {
                document.getElementById('toggle-cc').click();
            }
            
            if (bccInput.value.trim()) {
                document.getElementById('toggle-bcc').click();
            }
            
            // Agregar validación en tiempo real para campos de email
            function validateEmailField(inputElement) {
                inputElement.addEventListener('blur', function() {
                    const emailValue = this.value.trim();
                    if (!emailValue) {
                        this.style.borderColor = '#ced4da';
                        this.style.boxShadow = 'none';
                        return;
                    }
                    
                    const emails = emailValue.split(',').map(email => email.trim()).filter(email => email);
                    let hasInvalidEmail = false;
                    
                    for (let email of emails) {
                        if (email) {
                            // Extraer email de formato "Name <email@domain.com>"
                            let cleanEmail = email;
                            const match = email.match(/<([^>]+)>/);
                            if (match) {
                                cleanEmail = match[1].trim();
                            }
                            
                            if (!isValidEmail(cleanEmail)) {
                                hasInvalidEmail = true;
                                break;
                            }
                        }
                    }
                    
                    if (hasInvalidEmail) {
                        this.style.borderColor = '#dc3545';
                        this.style.boxShadow = '0 0 0 2px rgba(220, 53, 69, 0.25)';
                    } else {
                        this.style.borderColor = '#28a745';
                        this.style.boxShadow = '0 0 0 2px rgba(40, 167, 69, 0.25)';
                    }
                });
                
                inputElement.addEventListener('focus', function() {
                    this.style.borderColor = '#007bff';
                    this.style.boxShadow = '0 0 0 2px rgba(0, 123, 255, 0.25)';
                });
            }
            
            function isValidEmail(email) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailRegex.test(email);
            }
            
            validateEmailField(document.getElementById('to'));
            validateEmailField(document.getElementById('cc'));
            validateEmailField(document.getElementById('bcc'));
        });

        // Manejar envío del formulario
        document.querySelector('.compose-form').addEventListener('submit', function(e) {
            if (isVisualMode && quillEditor) {
                // Sincronizar contenido del editor con el textarea
                const content = quillEditor.root.innerHTML;
                document.getElementById('body').value = content;
                
                // Validar que hay contenido
                const textContent = quillEditor.getText().trim();
                if (!textContent || textContent.length === 0) {
                    e.preventDefault();
                    alert('Por favor, escriba un mensaje antes de enviar.');
                    return false;
                }
            } else {
                // Modo texto: validar textarea
                const textarea = document.getElementById('body');
                if (!textarea.value.trim()) {
                    e.preventDefault();
                    alert('Por favor, escriba un mensaje antes de enviar.');
                    textarea.focus();
                    return false;
                }
            }
        });
        
        // Autocompletado de contactos
        const contacts = <?php echo json_encode($contacts); ?>;
        
        function setupAutocomplete(inputElement) {
            const suggestionBox = document.createElement('div');
            suggestionBox.className = 'autocomplete-suggestions';
            suggestionBox.style.cssText = `
                position: absolute;
                background: white;
                border: 1px solid #ccc;
                border-top: none;
                max-height: 200px;
                overflow-y: auto;
                z-index: 1000;
                width: 100%;
                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                display: none;
            `;
            
            inputElement.parentElement.style.position = 'relative';
            inputElement.parentElement.appendChild(suggestionBox);
            
            inputElement.addEventListener('input', function() {
                const value = this.value;
                const cursorPos = this.selectionStart;
                
                // Encontrar el último email/parte que se está escribiendo
                const beforeCursor = value.substring(0, cursorPos);
                const parts = beforeCursor.split(',');
                const currentPart = parts[parts.length - 1].trim();
                
                if (currentPart.length < 2) {
                    suggestionBox.style.display = 'none';
                    return;
                }
                
                // Filtrar contactos que coincidan
                const matches = contacts.filter(contact => 
                    contact.name.toLowerCase().includes(currentPart.toLowerCase()) ||
                    contact.email.toLowerCase().includes(currentPart.toLowerCase())
                );
                
                if (matches.length === 0) {
                    suggestionBox.style.display = 'none';
                    return;
                }
                
                // Crear sugerencias
                suggestionBox.innerHTML = '';
                matches.slice(0, 5).forEach(contact => {
                    const suggestion = document.createElement('div');
                    suggestion.style.cssText = `
                        padding: 10px;
                        cursor: pointer;
                        border-bottom: 1px solid #eee;
                        display: flex;
                        justify-content: space-between;
                    `;
                    
                    suggestion.innerHTML = `
                        <div>
                            <strong>${escapeHtml(contact.name)}</strong><br>
                            <small style="color: #666;">${escapeHtml(contact.email)}</small>
                        </div>
                    `;
                    
                    suggestion.addEventListener('click', function() {
                        // Reemplazar la parte actual con el contacto seleccionado
                        const beforeCurrentPart = parts.slice(0, -1).join(', ');
                        const afterCursor = value.substring(cursorPos);
                        const replacement = `${contact.name} <${contact.email}>`;
                        
                        const newValue = beforeCurrentPart + 
                                       (beforeCurrentPart ? ', ' : '') + 
                                       replacement + 
                                       afterCursor;
                        
                        inputElement.value = newValue;
                        suggestionBox.style.display = 'none';
                        inputElement.focus();
                    });
                    
                    suggestion.addEventListener('mouseenter', function() {
                        this.style.backgroundColor = '#f0f0f0';
                    });
                    
                    suggestion.addEventListener('mouseleave', function() {
                        this.style.backgroundColor = 'white';
                    });
                    
                    suggestionBox.appendChild(suggestion);
                });
                
                suggestionBox.style.display = 'block';
            });
            
            // Ocultar sugerencias al hacer clic fuera
            document.addEventListener('click', function(e) {
                if (!inputElement.contains(e.target) && !suggestionBox.contains(e.target)) {
                    suggestionBox.style.display = 'none';
                }
            });
            
            // Manejar teclas de navegación
            inputElement.addEventListener('keydown', function(e) {
                if (suggestionBox.style.display === 'none') return;
                
                const suggestions = suggestionBox.children;
                let selected = suggestionBox.querySelector('.selected');
                
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    if (!selected) {
                        suggestions[0]?.classList.add('selected');
                        suggestions[0]?.style.setProperty('background-color', '#007bff', 'important');
                        suggestions[0]?.style.setProperty('color', 'white', 'important');
                    } else {
                        selected.classList.remove('selected');
                        selected.style.backgroundColor = 'white';
                        selected.style.color = 'black';
                        const next = selected.nextElementSibling || suggestions[0];
                        next.classList.add('selected');
                        next.style.setProperty('background-color', '#007bff', 'important');
                        next.style.setProperty('color', 'white', 'important');
                    }
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    if (!selected) {
                        suggestions[suggestions.length - 1]?.classList.add('selected');
                        suggestions[suggestions.length - 1]?.style.setProperty('background-color', '#007bff', 'important');
                        suggestions[suggestions.length - 1]?.style.setProperty('color', 'white', 'important');
                    } else {
                        selected.classList.remove('selected');
                        selected.style.backgroundColor = 'white';
                        selected.style.color = 'black';
                        const prev = selected.previousElementSibling || suggestions[suggestions.length - 1];
                        prev.classList.add('selected');
                        prev.style.setProperty('background-color', '#007bff', 'important');
                        prev.style.setProperty('color', 'white', 'important');
                    }
                } else if (e.key === 'Enter' && selected) {
                    e.preventDefault();
                    selected.click();
                } else if (e.key === 'Escape') {
                    suggestionBox.style.display = 'none';
                }
            });
        }
        
        // Configurar autocompletado en los campos de email
        setupAutocomplete(document.getElementById('to'));
        setupAutocomplete(document.getElementById('cc'));
        setupAutocomplete(document.getElementById('bcc'));
    </script>
</body>
</html>