# 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')
    
    # Definir los estilos como una cadena separada para mejor manejo
    custom_css = """
        /* Reset y variables */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* Variables de color corporativo */
        :root {
            --color-primary: rgb(174, 0, 37);
            --color-secondary: rgb(7, 60, 99);
            --color-background: #ffffff;
            --color-border: #e0e0e0;
        }
        
        /* Layout principal */
        #header-logo {
            text-align: center;
            padding: 2rem 0;
            margin-bottom: 2rem;
            background-color: var(--color-background);
        }
        
        #header-logo img {
            max-width: 200px;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        /* Formularios */
        .gr-form {
            border: 1px solid var(--color-border);
            padding: 1.5rem;
            border-radius: 8px;
            background-color: var(--color-background);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 1rem;
        }
        
        /* Botones */
        .primary-btn {
            background-color: var(--color-primary) !important;
            color: white !important;
            border: none !important;
            padding: 0.5rem 1rem !important;
            border-radius: 4px !important;
            cursor: pointer !important;
            transition: opacity 0.3s ease !important;
        }
        
        .primary-btn:hover {
            opacity: 0.9 !important;
        }
        
        .secondary-btn {
            background-color: var(--color-secondary) !important;
            color: white !important;
            border: none !important;
            padding: 0.5rem 1rem !important;
            border-radius: 4px !important;
            cursor: pointer !important;
            transition: opacity 0.3s ease !important;
        }
        
        .secondary-btn:hover {
            opacity: 0.9 !important;
        }
        
        /* Tabs */
        .tabs {
            border-bottom: 2px solid var(--color-secondary) !important;
            margin-bottom: 1rem !important;
        }
        
        .tab-selected {
            color: var(--color-primary) !important;
            border-bottom: 2px solid var(--color-primary) !important;
            font-weight: bold !important;
        }
        
        /* Contenido multimedia */
        .media-box {
            padding: 1.5rem;
            background-color: var(--color-background);
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    """
    
    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="ejemplo@dominio.com"
                            )
                            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