"""
Advanced UI components and interface management for the AnyCoder application.
"""

import os
import gradio as gr
import uuid
import webbrowser
import urllib.parse
from typing import Dict, List, Optional, Tuple, Any, Union
from pathlib import Path

from config import (
    THEME_CONFIGS, DEMO_LIST, AVAILABLE_MODELS, DEFAULT_MODEL, DEFAULT_MODEL_NAME,
    get_saved_theme, save_theme_preference, get_gradio_language
)
from utils import extract_text_from_file, process_image_for_model
from web_utils import check_hf_space_url, parse_repo_or_model_url
from code_processing import (
    parse_transformers_js_output, format_transformers_js_output,
    parse_svelte_output, format_svelte_output,
    parse_multipage_html_output, format_multipage_output, validate_and_autofix_files,
    inline_multipage_into_single_preview
)

class AdvancedUIManager:
    """Manages advanced UI components and interactions"""
    
    def __init__(self):
        self.current_theme = get_saved_theme()
        self.demo_categories = self._organize_demos_by_category()
        self.model_categories = self._organize_models_by_category()
    
    def _organize_demos_by_category(self) -> Dict[str, List[Dict]]:
        """Organize demo examples by category for better UI"""
        categories = {}
        for demo in DEMO_LIST:
            category = demo.get('category', 'General')
            if category not in categories:
                categories[category] = []
            categories[category].append(demo)
        return categories
    
    def _organize_models_by_category(self) -> Dict[str, List[Dict]]:
        """Organize models by category for advanced selection UI"""
        categories = {}
        for model in AVAILABLE_MODELS:
            category = model.get('category', 'General')
            if category not in categories:
                categories[category] = []
            categories[category].append(model)
        return categories
    
    def create_advanced_model_selector(self) -> gr.Group:
        """Create an advanced model selector with categories and features"""
        with gr.Group() as model_group:
            gr.Markdown("### 🤖 AI Model Selection", elem_classes=["model-header"])
            
            with gr.Accordion("Model Categories", open=False, elem_classes=["model-accordion"]):
                model_tabs = gr.Tabs()
                
                with model_tabs:
                    for category, models in self.model_categories.items():
                        with gr.Tab(category, elem_classes=["model-tab"]):
                            for model in models:
                                vision_icon = "👁️" if model.get('supports_vision', False) else ""
                                model_btn = gr.Button(
                                    f"{vision_icon} {model['name']}",
                                    variant="secondary",
                                    elem_classes=["model-button"],
                                    size="sm"
                                )
                                gr.Markdown(
                                    f"*{model['description']}*",
                                    elem_classes=["model-description"]
                                )
            
            model_dropdown = gr.Dropdown(
                choices=[model['name'] for model in AVAILABLE_MODELS],
                value=DEFAULT_MODEL_NAME,
                label="Selected Model",
                elem_classes=["model-dropdown"],
                container=True,
                scale=2
            )
            
            with gr.Row():
                model_info_btn = gr.Button("ℹ️", size="sm", elem_classes=["info-button"])
                model_refresh_btn = gr.Button("🔄", size="sm", elem_classes=["refresh-button"])
        
        return model_group, model_dropdown, model_info_btn, model_refresh_btn
    
    def create_advanced_demo_gallery(self) -> gr.Group:
        """Create an advanced demo gallery with categories and search"""
        with gr.Group() as demo_group:
            gr.Markdown("### 🎯 Project Templates", elem_classes=["demo-header"])
            
            demo_search = gr.Textbox(
                placeholder="Search templates...",
                label="",
                elem_classes=["demo-search"],
                container=False
            )
            
            demo_filter = gr.Dropdown(
                choices=["All Categories"] + list(self.demo_categories.keys()),
                value="All Categories",
                label="Category Filter",
                elem_classes=["demo-filter"]
            )
            
            with gr.Group(elem_classes=["demo-gallery"]):
                demo_cards = []
                for category, demos in self.demo_categories.items():
                    with gr.Group(visible=True, elem_classes=[f"demo-category-{category.lower().replace(' ', '-')}"]):
                        gr.Markdown(f"#### {category}", elem_classes=["category-header"])
                        
                        with gr.Row():
                            for demo in demos:
                                complexity_color = {
                                    "Beginner": "success",
                                    "Intermediate": "secondary", 
                                    "Advanced": "stop"
                                }.get(demo.get('complexity', 'Intermediate'), 'secondary')
                                
                                demo_card = gr.Button(
                                    f"**{demo['title']}**\n{demo['description'][:100]}...",
                                    variant=complexity_color,
                                    elem_classes=["demo-card"],
                                    size="lg"
                                )
                                demo_cards.append((demo_card, demo))
        
        return demo_group, demo_cards, demo_search, demo_filter
    
    def create_advanced_media_controls(self) -> gr.Group:
        """Create advanced media generation controls with smart layouts"""
        with gr.Group() as media_group:
            gr.Markdown("### 🎨 AI Media Generation", elem_classes=["media-header"])
            
            with gr.Accordion("Media Options", open=False, elem_classes=["media-accordion"]):
                with gr.Tabs() as media_tabs:
                    # Text to Image Tab
                    with gr.Tab("🖼️ Text → Image", elem_classes=["media-tab"]):
                        text_to_image_toggle = gr.Checkbox(
                            label="Generate Images from Text",
                            value=False,
                            elem_classes=["media-toggle"]
                        )
                        text_to_image_prompt = gr.Textbox(
                            label="Image Description",
                            placeholder="A modern, minimalist dashboard with clean lines and soft colors",
                            lines=2,
                            visible=False,
                            elem_classes=["media-prompt"]
                        )
                        
                        with gr.Row(visible=False) as t2i_advanced:
                            t2i_style = gr.Dropdown(
                                choices=["Photorealistic", "Illustration", "Digital Art", "Sketch", "Abstract"],
                                value="Digital Art",
                                label="Style"
                            )
                            t2i_quality = gr.Slider(
                                minimum=0.5,
                                maximum=1.0,
                                value=0.9,
                                step=0.1,
                                label="Quality"
                            )
                    
                    # Image to Image Tab
                    with gr.Tab("🎭 Image → Image", elem_classes=["media-tab"]):
                        image_to_image_toggle = gr.Checkbox(
                            label="Transform Uploaded Images",
                            value=False,
                            elem_classes=["media-toggle"]
                        )
                        generation_image_input = gr.Image(
                            label="Source Image",
                            visible=False,
                            elem_classes=["media-image"]
                        )
                        image_to_image_prompt = gr.Textbox(
                            label="Transformation Description",
                            placeholder="Transform this into a futuristic version",
                            lines=2,
                            visible=False,
                            elem_classes=["media-prompt"]
                        )
                    
                    # Image to Video Tab  
                    with gr.Tab("🎬 Image → Video", elem_classes=["media-tab"]):
                        image_to_video_toggle = gr.Checkbox(
                            label="Generate Video from Image",
                            value=False,
                            elem_classes=["media-toggle"]
                        )
                        image_to_video_prompt = gr.Textbox(
                            label="Motion Description",
                            placeholder="The person starts walking forward with a confident stride",
                            lines=2,
                            visible=False,
                            elem_classes=["media-prompt"]
                        )
                    
                    # Text to Video Tab
                    with gr.Tab("📹 Text → Video", elem_classes=["media-tab"]):
                        text_to_video_toggle = gr.Checkbox(
                            label="Generate Video from Text",
                            value=False,
                            elem_classes=["media-toggle"]
                        )
                        text_to_video_prompt = gr.Textbox(
                            label="Video Description",
                            placeholder="A time-lapse of a city skyline transitioning from day to night",
                            lines=2,
                            visible=False,
                            elem_classes=["media-prompt"]
                        )
                    
                    # Text to Music Tab
                    with gr.Tab("🎵 Text → Music", elem_classes=["media-tab"]):
                        text_to_music_toggle = gr.Checkbox(
                            label="Generate Background Music",
                            value=False,
                            elem_classes=["media-toggle"]
                        )
                        text_to_music_prompt = gr.Textbox(
                            label="Music Description",
                            placeholder="Upbeat electronic background music for a tech demo",
                            lines=2,
                            visible=False,
                            elem_classes=["media-prompt"]
                        )
                        
                        with gr.Row(visible=False) as music_controls:
                            music_duration = gr.Slider(
                                minimum=10,
                                maximum=120,
                                value=30,
                                step=5,
                                label="Duration (seconds)"
                            )
                            music_style = gr.Dropdown(
                                choices=["Electronic", "Orchestral", "Ambient", "Upbeat", "Cinematic"],
                                value="Electronic",
                                label="Style"
                            )
        
        # Create visibility toggle handlers
        media_components = {
            'text_to_image_toggle': text_to_image_toggle,
            'text_to_image_prompt': text_to_image_prompt,
            't2i_advanced': t2i_advanced,
            'image_to_image_toggle': image_to_image_toggle,
            'generation_image_input': generation_image_input,
            'image_to_image_prompt': image_to_image_prompt,
            'image_to_video_toggle': image_to_video_toggle,
            'image_to_video_prompt': image_to_video_prompt,
            'text_to_video_toggle': text_to_video_toggle,
            'text_to_video_prompt': text_to_video_prompt,
            'text_to_music_toggle': text_to_music_toggle,
            'text_to_music_prompt': text_to_music_prompt,
            'music_controls': music_controls,
        }
        
        return media_group, media_components
    
    def create_advanced_code_editor(self) -> gr.Group:
        """Create advanced code editor with multi-file support and intelligent features"""
        with gr.Group() as editor_group:
            gr.Markdown("### 💻 Generated Code", elem_classes=["editor-header"])
            
            with gr.Row():
                with gr.Column(scale=3):
                    # Main code editor
                    code_output = gr.Code(
                        language="html",
                        lines=25,
                        interactive=True,
                        label="Generated Code",
                        elem_classes=["main-editor"]
                    )
                    
                    # Multi-file editors (initially hidden)
                    with gr.Group(visible=False, elem_classes=["multi-file-group"]) as transformers_group:
                        gr.Markdown("#### Transformers.js Files")
                        with gr.Tabs():
                            with gr.Tab("index.html"):
                                tjs_html_code = gr.Code(language="html", lines=20, interactive=True)
                            with gr.Tab("index.js"):
                                tjs_js_code = gr.Code(language="javascript", lines=20, interactive=True)
                            with gr.Tab("style.css"):
                                tjs_css_code = gr.Code(language="css", lines=20, interactive=True)
                    
                    with gr.Group(visible=False, elem_classes=["multi-file-group"]) as svelte_group:
                        gr.Markdown("#### Svelte Files")
                        with gr.Tabs():
                            with gr.Tab("App.svelte"):
                                svelte_app_code = gr.Code(language="javascript", lines=20, interactive=True)
                            with gr.Tab("app.css"):
                                svelte_css_code = gr.Code(language="css", lines=20, interactive=True)
                
                with gr.Column(scale=1, elem_classes=["editor-sidebar"]):
                    # Code actions
                    with gr.Group(elem_classes=["code-actions"]):
                        gr.Markdown("**Actions**")
                        
                        code_format_btn = gr.Button("🎨 Format Code", size="sm")
                        code_download_btn = gr.Button("💾 Download", size="sm")
                        code_share_btn = gr.Button("🔗 Share", size="sm")
                        code_deploy_btn = gr.Button("🚀 Deploy", size="sm", variant="primary")
                    
                    # Code statistics
                    with gr.Group(elem_classes=["code-stats"]):
                        gr.Markdown("**Statistics**")
                        code_stats = gr.JSON(
                            value={"lines": 0, "characters": 0, "files": 1},
                            label="",
                            elem_classes=["stats-display"]
                        )
        
        editor_components = {
            'code_output': code_output,
            'transformers_group': transformers_group,
            'tjs_html_code': tjs_html_code,
            'tjs_js_code': tjs_js_code,
            'tjs_css_code': tjs_css_code,
            'svelte_group': svelte_group,
            'svelte_app_code': svelte_app_code,
            'svelte_css_code': svelte_css_code,
            'code_format_btn': code_format_btn,
            'code_download_btn': code_download_btn,
            'code_share_btn': code_share_btn,
            'code_deploy_btn': code_deploy_btn,
            'code_stats': code_stats
        }
        
        return editor_group, editor_components
    
    def create_advanced_preview_panel(self) -> gr.Group:
        """Create advanced preview panel with multiple view modes"""
        with gr.Group() as preview_group:
            gr.Markdown("### 👁️ Live Preview", elem_classes=["preview-header"])
            
            with gr.Row():
                preview_mode = gr.Radio(
                    choices=["Desktop", "Tablet", "Mobile"],
                    value="Desktop",
                    label="View Mode",
                    elem_classes=["preview-mode"]
                )
                
                preview_refresh_btn = gr.Button("🔄", size="sm", elem_classes=["preview-refresh"])
                preview_fullscreen_btn = gr.Button("⛶", size="sm", elem_classes=["preview-fullscreen"])
                preview_qr_btn = gr.Button("📱", size="sm", elem_classes=["preview-qr"])
            
            # Main preview area
            sandbox = gr.HTML(
                label="Live Preview",
                elem_classes=["preview-sandbox"]
            )
            
            # Preview status bar
            with gr.Row(elem_classes=["preview-status"]):
                preview_status = gr.Markdown("Ready", elem_classes=["status-text"])
                preview_metrics = gr.JSON(
                    value={"load_time": "0ms", "size": "0KB", "elements": 0},
                    label="",
                    elem_classes=["preview-metrics"]
                )
        
        preview_components = {
            'sandbox': sandbox,
            'preview_mode': preview_mode,
            'preview_refresh_btn': preview_refresh_btn,
            'preview_fullscreen_btn': preview_fullscreen_btn,
            'preview_qr_btn': preview_qr_btn,
            'preview_status': preview_status,
            'preview_metrics': preview_metrics
        }
        
        return preview_group, preview_components
    
    def create_chat_interface(self) -> gr.Group:
        """Create advanced chat-based interface for beta mode"""
        with gr.Group() as chat_group:
            gr.Markdown("### 💬 AI Assistant Chat", elem_classes=["chat-header"])
            
            # Main chat area
            chatbot = gr.Chatbot(
                type="messages",
                show_label=False,
                height=400,
                layout="bubble",
                bubble_full_width=False,
                group_consecutive_messages=True,
                elem_classes=["main-chatbot"],
                avatar_images=("🧑‍💻", "🤖")
            )
            
            # Chat input with advanced features
            with gr.Row():
                chat_input = gr.MultimodalTextbox(
                    placeholder="Describe what you want to build... (supports text, images, and files)",
                    submit_btn=True,
                    stop_btn=False,
                    show_label=False,
                    sources=["upload", "microphone"],
                    elem_classes=["chat-input"],
                    scale=4
                )
                
                chat_voice_btn = gr.Button("🎤", size="sm", elem_classes=["voice-button"])
            
            # Chat controls
            with gr.Row():
                chat_clear_btn = gr.ClearButton([chat_input, chatbot], size="sm")
                chat_export_btn = gr.Button("📤 Export Chat", size="sm")
                chat_settings_btn = gr.Button("⚙️", size="sm")
            
            # Quick actions
            with gr.Row(elem_classes=["chat-quick-actions"]):
                quick_actions = [
                    ("🌐 Website", "Create a modern website"),
                    ("📱 App", "Build a mobile app"),
                    ("📊 Dashboard", "Design a data dashboard"),
                    ("🎮 Game", "Create an interactive game")
                ]
                
                quick_buttons = []
                for icon_text, prompt in quick_actions:
                    btn = gr.Button(icon_text, size="sm", elem_classes=["quick-action"])
                    quick_buttons.append((btn, prompt))
        
        chat_components = {
            'chatbot': chatbot,
            'chat_input': chat_input,
            'chat_voice_btn': chat_voice_btn,
            'chat_clear_btn': chat_clear_btn,
            'chat_export_btn': chat_export_btn,
            'chat_settings_btn': chat_settings_btn,
            'quick_buttons': quick_buttons
        }
        
        return chat_group, chat_components
    
    def create_advanced_sidebar(self) -> gr.Column:
        """Create advanced sidebar with intelligent organization"""
        with gr.Column(elem_classes=["advanced-sidebar"]) as sidebar:
            # Header with user info
            with gr.Group(elem_classes=["sidebar-header"]):
                login_button = gr.LoginButton(elem_classes=["login-btn"])
                
                with gr.Row():
                    beta_toggle = gr.Checkbox(
                        value=False,
                        label="🧪 Beta Chat Mode",
                        info="Try our new conversational interface",
                        elem_classes=["beta-toggle"]
                    )
            
            # Chat interface (hidden by default)
            chat_group, chat_components = self.create_chat_interface()
            chat_group.visible = False
            
            # Classic controls
            with gr.Group(elem_classes=["classic-controls"]) as classic_group:
                # Project input section
                with gr.Group(elem_classes=["input-section"]):
                    gr.Markdown("### 🎯 Project Description")
                    input_textbox = gr.Textbox(
                        label="What would you like to build?",
                        placeholder="Describe your application in detail...",
                        lines=3,
                        elem_classes=["main-input"]
                    )
                
                # Advanced model selector
                model_group, model_dropdown, model_info_btn, model_refresh_btn = self.create_advanced_model_selector()
                
                # Language and framework selection
                with gr.Group(elem_classes=["language-section"]):
                    gr.Markdown("### ⚙️ Technology Stack")
                    
                    language_dropdown = gr.Dropdown(
                        choices=[
                            "HTML/CSS/JS", "React", "Vue", "Svelte", "Streamlit", 
                            "Gradio", "Python", "Transformers.js", "Node.js", "FastAPI"
                        ],
                        value="HTML/CSS/JS",
                        label="Framework",
                        elem_classes=["language-dropdown"]
                    )
                    
                    with gr.Row():
                        responsive_toggle = gr.Checkbox(
                            label="📱 Responsive Design", 
                            value=True,
                            elem_classes=["feature-toggle"]
                        )
                        dark_mode_toggle = gr.Checkbox(
                            label="🌙 Dark Mode Support",
                            value=False,
                            elem_classes=["feature-toggle"] 
                        )
                
                # File inputs section
                with gr.Group(elem_classes=["file-section"]):
                    gr.Markdown("### 📂 Input Sources")
                    
                    file_input = gr.File(
                        label="Reference Files",
                        file_types=[".pdf", ".txt", ".md", ".csv", ".docx", ".jpg", ".png"],
                        elem_classes=["file-input"]
                    )
                    
                    website_url_input = gr.Textbox(
                        label="Website to Redesign",
                        placeholder="https://example.com",
                        elem_classes=["url-input"]
                    )
                    
                    image_input = gr.Image(
                        label="UI Design Reference",
                        visible=False,
                        elem_classes=["image-input"]
                    )
                
                # Media generation controls
                media_group, media_components = self.create_advanced_media_controls()
                
                # Advanced options
                with gr.Accordion("🔧 Advanced Options", open=False, elem_classes=["advanced-options"]):
                    search_toggle = gr.Checkbox(
                        label="🌐 Enable Web Search",
                        value=False,
                        info="Use real-time web search for latest information"
                    )
                    
                    optimization_level = gr.Slider(
                        minimum=1,
                        maximum=5,
                        value=3,
                        step=1,
                        label="Code Optimization Level",
                        info="Higher values produce more optimized code"
                    )
                    
                    accessibility_toggle = gr.Checkbox(
                        label="♿ Accessibility Focus",
                        value=True,
                        info="Prioritize accessibility best practices"
                    )
                
                # Generation controls
                with gr.Row(elem_classes=["generation-controls"]):
                    generate_btn = gr.Button(
                        "✨ Generate Code",
                        variant="primary",
                        size="lg",
                        elem_classes=["generate-button"]
                    )
                    
                    with gr.Column(scale=1):
                        clear_btn = gr.Button("🗑️", size="sm", elem_classes=["clear-button"])
                        stop_btn = gr.Button("⏹️", size="sm", elem_classes=["stop-button"])
                
                # Demo gallery
                demo_group, demo_cards, demo_search, demo_filter = self.create_advanced_demo_gallery()
                
                # Project import section
                with gr.Group(elem_classes=["import-section"]):
                    gr.Markdown("### 📥 Import Project")
                    
                    import_url = gr.Textbox(
                        label="Project URL",
                        placeholder="GitHub, HuggingFace Space, or Model URL",
                        elem_classes=["import-input"]
                    )
                    
                    with gr.Row():
                        import_btn = gr.Button("Import", size="sm")
                        import_status = gr.Markdown("", visible=False)
                
                # Deployment section
                with gr.Group(elem_classes=["deploy-section"], visible=False) as deploy_group:
                    gr.Markdown("### 🚀 Deploy Application")
                    
                    space_name_input = gr.Textbox(
                        label="App Name",
                        placeholder="my-awesome-app",
                        elem_classes=["space-name-input"]
                    )
                    
                    sdk_dropdown = gr.Dropdown(
                        choices=["Static HTML", "Gradio", "Streamlit", "Transformers.js", "Svelte"],
                        value="Static HTML",
                        label="Deployment Type",
                        elem_classes=["sdk-dropdown"]
                    )
                    
                    deploy_btn = gr.Button(
                        "🚀 Deploy to HuggingFace",
                        variant="primary",
                        elem_classes=["deploy-button"]
                    )
                    
                    deploy_status = gr.Markdown("", visible=False, elem_classes=["deploy-status"])
        
        # Collect all components for return
        sidebar_components = {
            'login_button': login_button,
            'beta_toggle': beta_toggle,
            'chat_group': chat_group,
            'chat_components': chat_components,
            'classic_group': classic_group,
            'input_textbox': input_textbox,
            'model_dropdown': model_dropdown,
            'model_info_btn': model_info_btn,
            'model_refresh_btn': model_refresh_btn,
            'language_dropdown': language_dropdown,
            'responsive_toggle': responsive_toggle,
            'dark_mode_toggle': dark_mode_toggle,
            'file_input': file_input,
            'website_url_input': website_url_input,
            'image_input': image_input,
            'media_components': media_components,
            'search_toggle': search_toggle,
            'optimization_level': optimization_level,
            'accessibility_toggle': accessibility_toggle,
            'generate_btn': generate_btn,
            'clear_btn': clear_btn,
            'stop_btn': stop_btn,
            'demo_cards': demo_cards,
            'demo_search': demo_search,
            'demo_filter': demo_filter,
            'import_url': import_url,
            'import_btn': import_btn,
            'import_status': import_status,
            'deploy_group': deploy_group,
            'space_name_input': space_name_input,
            'sdk_dropdown': sdk_dropdown,
            'deploy_btn': deploy_btn,
            'deploy_status': deploy_status
        }
        
        return sidebar, sidebar_components

class ThemeManager:
    """Manages application themes and styling"""
    
    @staticmethod
    def get_custom_css() -> str:
        """Get custom CSS for advanced styling"""
        return """
        /* Advanced AnyCoder Styling */
        
        .advanced-sidebar {
            background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        .sidebar-header {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .main-input {
            border-radius: 8px;
            border: 2px solid #e5e7eb;
            transition: border-color 0.2s ease;
        }
        
        .main-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .generate-button {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border: none;
            border-radius: 8px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.2s ease;
        }
        
        .generate-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }
        
        .demo-card {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
            transition: all 0.2s ease;
            text-align: left;
            min-height: 100px;
        }
        
        .demo-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            border-color: #3b82f6;
        }
        
        .model-button {
            background: white;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            margin: 4px 0;
            transition: all 0.2s ease;
        }
        
        .model-button:hover {
            background: #f9fafb;
            border-color: #3b82f6;
        }
        
        .code-actions {
            background: #f8fafc;
            border-radius: 8px;
            padding: 12px;
            border: 1px solid #e5e7eb;
        }
        
        .preview-sandbox {
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .chat-input {
            border-radius: 20px;
            border: 2px solid #e5e7eb;
        }
        
        .main-chatbot {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #fafafa;
        }
        
        .media-toggle {
            color: #374151;
            font-weight: 500;
        }
        
        .media-prompt {
            border-radius: 6px;
            border: 1px solid #d1d5db;
        }
        
        .quick-action {
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 12px;
            transition: all 0.2s ease;
        }
        
        .quick-action:hover {
            background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
            transform: translateY(-1px);
        }
        
        .feature-toggle {
            font-size: 13px;
            color: #6b7280;
        }
        
        .stats-display {
            font-size: 11px;
            background: #f9fafb;
            border-radius: 4px;
            padding: 8px;
        }
        
        .preview-metrics {
            font-size: 10px;
            color: #6b7280;
        }
        
        .category-header {
            color: #374151;
            font-weight: 600;
            margin: 8px 0;
            padding-bottom: 4px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .deploy-button {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            color: white;
            font-weight: 600;
        }
        
        .beta-toggle {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: white;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
        }
        """
    
    @staticmethod
    def apply_theme_updates(theme_name: str) -> Dict[str, Any]:
        """Apply theme and return UI updates"""
        if theme_name in THEME_CONFIGS:
            save_theme_preference(theme_name)
            
            restart_message = f"""
            🎨 **Theme Applied:** {theme_name}
            
            **{THEME_CONFIGS[theme_name]['description']}**
            
            Your theme preference has been saved. Some advanced styling may require a restart to fully apply.
            """
            
            return {
                'theme_status': gr.update(value=restart_message, visible=True),
                'current_theme': theme_name
            }
        
        return {'theme_status': gr.update(visible=False), 'current_theme': theme_name}

class DeploymentManager:
    """Manages application deployment to various platforms"""
    
    @staticmethod
    def create_deployment_options() -> Dict[str, Any]:
        """Create deployment options for different platforms"""
        platforms = {
            'huggingface': {
                'name': 'HuggingFace Spaces',
                'icon': '🤗',
                'description': 'Deploy to HuggingFace Spaces with automatic hosting',
                'sdks': ['Static', 'Gradio', 'Streamlit', 'Docker']
            },
            'netlify': {
                'name': 'Netlify',
                'icon': '🌐',
                'description': 'Deploy static sites with continuous deployment',
                'sdks': ['Static']
            },
            'vercel': {
                'name': 'Vercel',
                'icon': '▲',
                'description': 'Deploy with edge functions and optimized performance',
                'sdks': ['Static', 'Next.js']
            }
        }
        
        return platforms
    
    @staticmethod
    def prepare_deployment_files(code: str, language: str, framework: str) -> Dict[str, str]:
        """Prepare files for deployment based on the framework"""
        files = {}
        
        if language == "transformers.js":
            # Parse and prepare transformers.js files
            parsed_files = parse_transformers_js_output(code)
            files.update(parsed_files)
        
        elif language == "svelte":
            # Parse and prepare Svelte files
            parsed_files = parse_svelte_output(code)
            files.update(parsed_files)
            
        elif language == "html":
            # Handle multi-page or single HTML
            parsed_files = parse_multipage_html_output(code)
            if parsed_files:
                files.update(validate_and_autofix_files(parsed_files))
            else:
                files['index.html'] = code
        
        else:
            # Single file deployment
            extension_map = {
                'python': '.py',
                'javascript': '.js',
                'typescript': '.ts',
                'css': '.css'
            }
            
            filename = f"app{extension_map.get(language, '.txt')}"
            files[filename] = code
        
        return files

# Global UI manager instance
ui_manager = AdvancedUIManager()
theme_manager = ThemeManager()
deployment_manager = DeploymentManager()