modules/ui/views/landing_view.py

# modules/ui/views/landing_view.py
import gradio as gr
import os
from pathlib import Path
from ...database.sql_db import store_application_request
from datetime import datetime
import uuid

##########################################################
def get_asset_path(filename, asset_type='img_logo'):
    """
    Obtiene la ruta completa de un asset
    
    Args:
        filename (str): Nombre del archivo
        asset_type (str): Tipo de asset ('img_logo', 'img_social-media', etc.)
    
    Returns:
        str: Ruta completa al asset
    """
    current_dir = Path(__file__).parent.parent  # sube a /modules/ui
    asset_path = current_dir / 'assets' / asset_type / filename
    return str(asset_path)

    custom_css = """
        /* Variables de color corporativo */
        :root {
            --color-primary: rgb(174, 0, 37);    /* Rojo corporativo */
            --color-secondary: rgb(7, 60, 99);   /* Azul corporativo */
            --color-background: #ffffff;
            --color-border: #e0e0e0;
        }
        
        /* Sobreescribir los estilos por defecto de Gradio */
        .dark button.primary-btn,
        button.primary-btn {
            background-color: var(--color-primary) !important;
            border-color: var(--color-primary) !important;
            color: white !important;
        }
        
        .dark button.secondary-btn,
        button.secondary-btn {
            background-color: var(--color-secondary) !important;
            border-color: var(--color-secondary) !important;
            color: white !important;
        }
    
        /* Sobreescribir los estilos de los tabs */
        .tabs.svelte-1g805jl .tabitem.svelte-1g805jl.selected {
            color: var(--color-primary) !important;
            border-color: var(--color-primary) !important;
        }
    
        .tabs.svelte-1g805jl {
            border-bottom-color: var(--color-secondary) !important;
        }
    
        /* Asegurar que los botones mantengan los colores al hacer hover */
        .dark button.primary-btn:hover,
        button.primary-btn:hover {
            background-color: rgb(144, 0, 27) !important;  /* Versión más oscura del rojo */
            border-color: rgb(144, 0, 27) !important;
        }
    
        .dark button.secondary-btn:hover,
        button.secondary-btn:hover {
            background-color: rgb(5, 40, 79) !important;  /* Versión más oscura del azul */
            border-color: rgb(5, 40, 79) !important;
        }
    """
    
    # En los botones, asegúrate de que las clases se apliquen correctamente
    login_button = gr.Button(
        "Ingresar",
        elem_classes="primary-btn",
        variant="primary"
    )
    
    register_button = gr.Button(
        "Enviar Solicitud",
        elem_classes="secondary-btn",
        variant="secondary"
    )
    
    with gr.Blocks(css=custom_css) as view:
        # El resto del código permanece igual pero con algunas modificaciones en las clases
        
        # Header con logo
        with gr.Column(elem_id="header-logo"):
            gr.Image(
                value=logo_path,
                label=None,
                show_label=False,
                container=False,
                height=200
            )
        
        with gr.Row(elem_classes="container"):
            # Primera columna (25%)
            with gr.Column(scale=1):
                with gr.Tabs() as tabs:
                    # Tab de Login
                    with gr.TabItem("Iniciar Sesión", elem_classes="gr-form"):
                        with gr.Column():
                            username = gr.Textbox(
                                label="Usuario",
                                placeholder="Ingrese su usuario"
                            )
                            password = gr.Textbox(
                                label="Contraseña",
                                type="password",
                                placeholder="Ingrese su contraseña"
                            )
                            login_button = gr.Button(
                                "Ingresar",
                                variant="primary",
                                elem_classes="primary-btn"
                            )
                            login_message = gr.Markdown()

                    # Tab de Registro #####################################################################
                    with gr.TabItem("Solicitud de Acceso", elem_classes="gr-form"):
                        with gr.Column():
                            name = gr.Textbox(
                                label="Nombre Completo",
                                placeholder="Ej: Juan Pérez"
                            )
                            email = gr.Textbox(
                                label="Correo Electrónico",
                                placeholder="[email protected]"
                            )
                            institution = gr.Textbox(
                                label="Institución",
                                placeholder="Universidad, Colegio, Empresa, etc."
                            )
                            role = gr.Dropdown(
                                choices=[
                                    "Estudiante",
                                    "Profesor",
                                    "Investigador",
                                    "Otro"
                                ],
                                label="Rol",
                                value="Estudiante"
                            )
                            reason = gr.TextArea(
                                label="¿Por qué te interesa usar AIdeaText?",
                                placeholder="Describe brevemente tu interés en la plataforma...",
                                lines=4
                            )
                            register_button = gr.Button(
                                "Enviar Solicitud",
                                variant="secondary",
                                scale=0
                            )
                            register_message = gr.Markdown()

                            def handle_registration(name, email, institution, role, reason):
                                try:
                                    if not all([name, email, institution, role, reason]):
                                        return gr.Markdown("❌ Todos los campos son obligatorios")
                                    
                                    if "@" not in email or "." not in email:
                                        return gr.Markdown("❌ El correo electrónico no es válido")

                                    success = store_application_request(
                                        name=name,
                                        email=email,
                                        institution=institution,
                                        current_role=role,
                                        desired_role=role,
                                        reason=reason
                                    )

                                    if success:
                                        return gr.Markdown("✅ Solicitud enviada correctamente. Te contactaremos pronto.")
                                    else:
                                        return gr.Markdown("❌ Error al enviar la solicitud. Por favor, intenta nuevamente.")

                                except Exception as e:
                                    return gr.Markdown(f"❌ Error: {str(e)}")

                            register_button.click(
                                fn=handle_registration,
                                inputs=[name, email, institution, role, reason],
                                outputs=register_message
                            )
            
            # Segunda columna (75%)
            with gr.Column(scale=3):
                with gr.Tabs(elem_classes="content-tabs"):
                    with gr.TabItem("Introducción"):
                        # Reemplazar gr.Box con gr.Column
                        with gr.Column(elem_classes="media-box"):
                            gr.Markdown("""
                            ### ¿Qué es AIdeaText?
                            AIdeaText es una avanzada aplicación web diseñada para mejorar 
                            las habilidades de redacción y comprensión lectora a través 
                            del análisis visual de textos potenciado por distintas tecnologías 
                            de inteligencia artificial.
                            """)
                            # Aquí puedes agregar imágenes o videos con mejor diseño
                    
                    with gr.TabItem("Tutorial"):
                        with gr.Column(elem_classes="media-box"):
                            gr.Markdown("""
                            ### Cómo usar AIdeaText
                            Aprende a utilizar todas las funcionalidades de AIdeaText
                            para mejorar tu escritura académica.
                            """)
                        
                    with gr.TabItem("Ejemplos"):
                        with gr.Column(elem_classes="media-box"):
                            gr.Markdown("""
                            ### Ejemplos de Uso
                            Mira ejemplos prácticos de cómo AIdeaText puede ayudarte
                            en tus tareas de escritura.
                            """)

    # Mantener la funcionalidad de navegación existente
    start_button = gr.Button(visible=False)
    
    return view, login_button