<?php
require_once __DIR__ . '/../../shared/bootstrap.php';

// El bootstrap.php ya maneja la autenticación
if (!hasPermission('view_logs', 'discord')) {
    die('No tienes permiso para ver esta página.');
}
?>
<!DOCTYPE html>
<html lang="<?php echo $userData->idioma ?? 'es'; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Funciones del Bot de Discord</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --discord-color: #5865F2;
            --discord-dark: #4752C4;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, var(--discord-color) 0%, var(--discord-dark) 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .header {
            background: white; border-radius: 15px; padding: 20px 30px;
            margin-bottom: 30px; display: flex; justify-content: space-between;
            align-items: center; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        .header h1 { color: var(--discord-color); font-size: 24px; }
        .btn-back {
            background: #6c757d; color: white; padding: 10px 20px;
            border-radius: 8px; text-decoration: none; transition: transform 0.2s;
        }
        .btn-back:hover { transform: translateY(-2px); }
        .container { max-width: 1000px; margin: 0 auto; }
        .card {
            background: white; border-radius: 15px; padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); margin-bottom: 20px;
        }
        .feature {
            border-bottom: 1px solid #eee;
            padding: 20px 0;
        }
        .feature:last-child { border-bottom: none; }
        .feature-title { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 8px; }
        .feature-event { font-size: 14px; color: var(--discord-color); font-family: monospace; margin-bottom: 8px; }
        .feature-description { font-size: 15px; color: #666; line-height: 1.6; }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-robot"></i> Funciones del Bot de Discord</h1>
        <a href="/discord/dashboard_discord.php" class="btn-back">← Volver al Dashboard</a>
    </div>

    <div class="container">
        <div class="card">

            <div class="feature">
                <div class="feature-title">Mensajes de Bienvenida a Nuevos Miembros</div>
                <div class="feature-event">Evento: Un nuevo usuario se une al servidor</div>
                <p class="feature-description">
                    Cuando un nuevo miembro se une, el bot le da la bienvenida en un canal específico. Este mensaje es totalmente configurable desde el panel de administración, permitiendo cambiar el texto, añadir una imagen y habilitar botones para que el usuario seleccione su idioma preferido.
                </p>
            </div>

            <div class="feature">
                <div class="feature-title">Sistema de Plantillas y Comandos</div>
                <div class="feature-event">Evento: Un usuario escribe un comando como #ayuda o /comandos</div>
                <p class="feature-description">
                    El bot puede responder a comandos que empiezan con <code>#</code>. Cada comando está asociado a una plantilla de texto predefinida.
                    <br>- <strong>Comandos de Plantilla:</strong> Al usar un comando como <code>#reglas</code>, el bot envía el contenido de esa plantilla al canal.
                    <br>- <strong>Traducción de Plantillas:</strong> Junto con la plantilla, el bot añade botones para que los usuarios puedan traducirla instantáneamente a los idiomas activos.
                    <br>- <strong>Listar Comandos:</strong> El comando <code>/comandos</code> muestra una lista de todos los comandos de plantilla disponibles.
                </p>
            </div>

            <div class="feature">
                <div class="feature-title">Traducción Automática de Mensajes</div>
                <div class="feature-event">Evento: Al recibir un mensaje que no es un comando</div>
                <p class="feature-description">
                    Para romper las barreras del idioma, el bot añade un botón <strong>"Traducir / Translate"</strong> debajo de los mensajes que no son comandos. Al hacer clic, el bot traduce el mensaje original al idioma que el usuario haya configurado y se lo envía como un mensaje privado (efímero) que solo él puede ver.
                </p>
            </div>
            
            <div class="feature">
                <div class="feature-title">Gestión de Preferencias de Idioma</div>
                <div class="feature-event">Evento: Clic en un botón de selección de idioma</div>
                <p class="feature-description">
                    El bot permite a los usuarios establecer su idioma preferido.
                    <br>- <strong>Botones de Bienvenida:</strong> Al hacer clic en los botones de idioma del mensaje de bienvenida, el bot guarda la preferencia del usuario.
                    <br>- <strong>Traducciones Personalizadas:</strong> Esta preferencia se usa para saber a qué idioma traducir cuando el usuario utiliza una función de traducción.
                </p>
            </div>

            <div class="feature">
                <div class="feature-title">Registro de Usuarios para Mejor Interacción</div>
                <div class="feature-event">Evento: Al unirse un miembro o interactuar por primera vez</div>
                <p class="feature-description">
                    Para personalizar la experiencia, el bot guarda información básica de los usuarios.
                    <br>- <strong>Al unirse al servidor:</strong> Si está activado en la configuración de bienvenida, el bot registra al nuevo miembro.
                    <br>- <strong>Al seleccionar un idioma:</strong> El bot registra o actualiza al usuario que interactúa con los botones de idioma para guardar su preferencia.
                </p>
            </div>

        </div>
    </div>
</body>
</html>
