simplified_ui_config.py

"""
Simplified UI Configuration Component
Makes the configuration form less intimidating and more compact
"""

import gradio as gr


def create_simplified_config_ui():
    """Create a simplified, user-friendly configuration interface"""
    
    with gr.Column():
        # Compact header with inline help
        with gr.Row():
            gr.Markdown("## 🚀 Quick Setup")
            with gr.Column(scale=0.3):
                gr.Markdown("[Need help?](#)", elem_id="help-link")
        
        # Simplified model selection with friendly labels
        with gr.Row():
            model = gr.Dropdown(
                label="AI Model",
                choices=[
                    ("Fast & Smart (Recommended)", "google/gemini-2.0-flash-001"),
                    ("Advanced Open Model", "google/gemma-3-27b-it"),
                    ("Deep Analysis", "anthropic/claude-3.5-haiku"),
                    ("Balanced with Search", "openai/gpt-4o-mini-search-preview"),
                    ("Lightweight", "openai/gpt-4.1-nano"),
                    ("Powerful Open Source", "nvidia/llama-3.1-nemotron-70b-instruct"),
                    ("Code Specialist", "mistralai/devstral-small")
                ],
                value="google/gemini-2.0-flash-001",
                info="Pick based on your needs",
                elem_id="model-select"
            )
        
        # Collapsible security settings with friendlier names
        with gr.Accordion("🔐 Security Settings", open=False):
            with gr.Row():
                api_key_var = gr.Textbox(
                    label="API Key Name",
                    value="MY_API_KEY",
                    info="You'll set this in HuggingFace later",
                    interactive=True,
                    elem_id="api-key-name"
                )
                
                access_code = gr.Textbox(
                    label="Access Password Name (Optional)",
                    value="ACCESS_CODE",
                    info="For private spaces only",
                    interactive=True,
                    elem_id="access-code-name"
                )
        
        # Main configuration in a clean card layout
        with gr.Group():
            gr.Markdown("### ✨ Your Assistant")
            
            # Template selector moved to top for visibility
            template_selector = gr.Radio(
                label="Quick Start Templates",
                choices=[
                    ("Custom Assistant", "None"),
                    ("Research Helper", "Research Template"),
                    ("Teaching Assistant", "Socratic Template")
                ],
                value="None",
                info="Start with a template or build your own",
                elem_id="template-selector"
            )
            
            # Simplified system prompt
            system_prompt = gr.Textbox(
                label="Assistant Instructions",
                placeholder="Tell your assistant how to behave...\nExample: You are a helpful study buddy who explains concepts clearly.",
                lines=4,
                elem_id="system-prompt"
            )
            
            # Streamlined examples section
            with gr.Row():
                examples_text = gr.Textbox(
                    label="Starter Questions",
                    placeholder="What questions should users try?\nOne per line",
                    lines=2,
                    scale=2,
                    elem_id="example-prompts"
                )
                
                # Quick example buttons
                with gr.Column(scale=1):
                    gr.Markdown("**Quick Add:**")
                    example_btn1 = gr.Button("📚 Study Help", size="sm", variant="secondary")
                    example_btn2 = gr.Button("🔬 Research", size="sm", variant="secondary")
                    example_btn3 = gr.Button("💡 General", size="sm", variant="secondary")
        
        # Simplified URL section with progressive disclosure
        with gr.Accordion("📎 Add Resources (Optional)", open=False):
            gr.Markdown("*Add websites or documents for context*")
            
            # Just show 2 URL fields initially
            url1 = gr.Textbox(
                label="Main Resource",
                placeholder="https://your-syllabus.edu",
                elem_id="url-1"
            )
            
            url2 = gr.Textbox(
                label="Additional Resource",
                placeholder="https://textbook.com/chapter",
                elem_id="url-2"
            )
            
            # Hidden additional URLs
            with gr.Column(visible=False) as more_urls_section:
                url3 = gr.Textbox(label="Resource 3", placeholder="Optional")
                url4 = gr.Textbox(label="Resource 4", placeholder="Optional")
                # ... more URLs as needed
            
            more_urls_btn = gr.Button("+ Add More Resources", size="sm", variant="secondary")
            
            # Dynamic URL option with clearer label
            enable_dynamic_urls = gr.Checkbox(
                label="Let assistant fetch links from conversations",
                value=True,
                info="Useful for research tasks"
            )
        
        # Advanced settings hidden by default
        with gr.Accordion("⚙️ Fine-Tuning (Optional)", open=False):
            with gr.Row():
                temperature = gr.Slider(
                    label="Creativity",
                    minimum=0,
                    maximum=2,
                    value=0.7,
                    step=0.1,
                    info="Lower = Focused | Higher = Creative"
                )
                
                max_tokens = gr.Slider(
                    label="Response Length",
                    minimum=50,
                    maximum=4096,
                    value=750,
                    step=50,
                    info="Typical conversation: 500-1000"
                )
        
        # Simplified action buttons
        with gr.Row():
            preview_btn = gr.Button(
                "👁️ Preview",
                variant="secondary",
                elem_id="preview-btn"
            )
            generate_btn = gr.Button(
                "🎉 Create Assistant",
                variant="primary",
                elem_id="generate-btn"
            )
        
        # Cleaner status area
        with gr.Column(visible=False) as status_area:
            status = gr.Markdown(elem_id="status-message")
            download_file = gr.File(
                label="📦 Your Assistant Package",
                elem_id="download-file"
            )
    
    # Add custom CSS for a cleaner look
    custom_css = """
    /* Compact spacing */
    .gradio-container {
        max-width: 800px !important;
        margin: 0 auto;
    }
    
    /* Smaller fonts for labels */
    label {
        font-size: 14px !important;
        font-weight: 500 !important;
    }
    
    /* Compact form spacing */
    .form {
        gap: 0.75rem !important;
    }
    
    /* Friendly button styling */
    #generate-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        font-size: 16px !important;
        padding: 12px 24px !important;
    }
    
    #preview-btn {
        font-size: 14px !important;
    }
    
    /* Help link styling */
    #help-link a {
        color: #667eea;
        text-decoration: none;
        font-size: 14px;
    }
    
    /* Accordion headers more compact */
    .accordion {
        margin: 0.5rem 0 !important;
    }
    
    /* Status message styling */
    #status-message {
        border-radius: 8px;
        padding: 1rem;
        background: #f0f9ff;
        border: 1px solid #3b82f6;
    }
    
    /* Compact dropdown */
    #model-select {
        font-size: 14px !important;
    }
    
    /* Mobile responsive */
    @media (max-width: 768px) {
        .gradio-container {
            padding: 1rem !important;
        }
        
        button {
            width: 100%;
            margin: 0.25rem 0;
        }
    }
    """
    
    return {
        'components': {
            'model': model,
            'api_key_var': api_key_var,
            'access_code': access_code,
            'template_selector': template_selector,
            'system_prompt': system_prompt,
            'examples_text': examples_text,
            'url1': url1,
            'url2': url2,
            'enable_dynamic_urls': enable_dynamic_urls,
            'temperature': temperature,
            'max_tokens': max_tokens,
            'preview_btn': preview_btn,
            'generate_btn': generate_btn,
            'status': status,
            'download_file': download_file,
            'status_area': status_area,
            'more_urls_section': more_urls_section,
            'more_urls_btn': more_urls_btn
        },
        'css': custom_css,
        'example_handlers': {
            'study_help': lambda: "How do I study effectively?\nExplain this concept simply\nHelp me prepare for my exam",
            'research': lambda: "Find recent research on this topic\nWhat are the key findings?\nHelp me analyze this paper",
            'general': lambda: "How can you help me?\nTell me something interesting\nWhat should I know about this?"
        }
    }


def create_minimal_config_form():
    """Ultra-minimal configuration form for quick setup"""
    
    with gr.Column():
        gr.Markdown("# 🎯 Create Your Assistant in 30 Seconds")
        
        # Just the essentials
        with gr.Group():
            # Pre-configured model (hidden complexity)
            model = gr.Dropdown(
                label="Choose Your Assistant Type",
                choices=[
                    ("Fast General Assistant", "google/gemini-2.0-flash-001"),
                    ("Research Assistant", "anthropic/claude-3.5-haiku"),
                    ("Code Helper", "mistralai/devstral-small")
                ],
                value="google/gemini-2.0-flash-001"
            )
            
            # Simple instruction box
            system_prompt = gr.Textbox(
                label="What should your assistant do?",
                placeholder="Example: Help students with homework and explain concepts clearly",
                lines=2
            )
            
            # One-click templates
            with gr.Row():
                gr.Markdown("**Or use a template:**")
                template_btn1 = gr.Button("📚 Tutor", size="sm")
                template_btn2 = gr.Button("🔬 Researcher", size="sm")
                template_btn3 = gr.Button("💬 Chat Bot", size="sm")
        
        # Hidden advanced options
        with gr.Accordion("Advanced Options", open=False):
            api_key_var = gr.Textbox(
                label="API Variable Name",
                value="OPENROUTER_API_KEY"
            )
            
            examples_text = gr.Textbox(
                label="Example Questions",
                placeholder="One per line",
                lines=2
            )
            
            url1 = gr.Textbox(
                label="Reference URL (optional)",
                placeholder="https://..."
            )
        
        # Big friendly button
        generate_btn = gr.Button(
            "✨ Create My Assistant",
            variant="primary",
            size="lg"
        )
        
        # Simple status
        status = gr.Markdown(visible=False)
        download = gr.File(visible=False)
    
    return {
        'model': model,
        'system_prompt': system_prompt,
        'api_key_var': api_key_var,
        'examples_text': examples_text,
        'url1': url1,
        'generate_btn': generate_btn,
        'status': status,
        'download': download,
        'templates': {
            'tutor': "You are a patient and encouraging tutor. Help students understand concepts step-by-step, provide examples, and check their understanding with questions.",
            'researcher': "You are a research assistant specializing in finding and analyzing information. Help users discover relevant sources, synthesize findings, and provide citations.",
            'chatbot': "You are a friendly and helpful assistant. Engage in natural conversation, answer questions thoughtfully, and provide useful information."
        }
    }


# Simplified variable names mapping for less technical users
FRIENDLY_VAR_NAMES = {
    "OPENROUTER_API_KEY": "MY_API_KEY",
    "SPACE_ACCESS_CODE": "ACCESS_PASSWORD",
    "FACULTY_CONFIG_PASSWORD": "TEACHER_PASSWORD"
}


def get_friendly_var_name(technical_name):
    """Convert technical variable names to user-friendly ones"""
    return FRIENDLY_VAR_NAMES.get(technical_name, technical_name)