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)

def create_landing_view():
    """Crea la vista de landing con header y distribución 25-75"""
    # Para el logo
    logo_path = get_asset_path('Logo_300x300.png', 'img_logo')
    
    with gr.Blocks(
        css="""
            /* Variables de color corporativo */
            :root {
                --color-primary: rgb(174, 0, 37);    /* Rojo corporativo */
                --color-secondary: rgb(7, 60, 99);   /* Azul corporativo */
            }

            /* Estilos del header */
            #header-logo {
                text-align: center;
                padding: 2rem 0;
                margin-bottom: 2rem;
            }
            #header-logo img {
                max-width: 200px;
                height: auto;
            }

            /* Contenedor principal */
            .container {
                max-width: 1400px;
                margin: 0 auto;
                padding: 0 1rem;
            }

            /* Estilos de formularios */
            .gr-form {
                border: 1px solid #e0e0e0;
                padding: 20px;
                border-radius: 8px;
                background-color: #ffffff;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            /* Estilos de botones */
            .primary-btn {
                background-color: var(--color-primary) !important;
                color: white !important;
            }
            .secondary-btn {
                background-color: var(--color-secondary) !important;
                color: white !important;
            }

            /* Tabs personalizados */
            .tabs {
                border-bottom-color: var(--color-secondary);
            }
            .tab-selected {
                color: var(--color-primary) !important;
                border-color: var(--color-primary) !important;
            }
        """
    ) as view:
        # 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 - Tabs de Login y Registro (25%)
            with gr.Column(scale=1):  # scale=1 de 4 = 25%
                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 - Videos (75%)
            with gr.Column(scale=3):  # scale=3 de 4 = 75%
                with gr.Tabs():
                    with gr.TabItem("Introducción"):
                        # Contenedor para imágenes/videos con mejor estilo
                        with gr.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ñ
                    
                    with gr.TabItem("Tutorial"):
                        gr.Markdown("""
                        ### Cómo usar AIdeaText
                        Aprende a utilizar todas las funcionalidades de AIdeaText
                        para mejorar tu escritura académica.
                        """)
                        
                    with gr.TabItem("Ejemplos"):
                        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