import gradio as gr
from ai_wrapper import AIProjectAssistant
from typing import Tuple
import os
from dotenv import load_dotenv

# Load environment variables
load_dotenv()

# Get API key from environment variable
API_KEY = os.getenv("OPENAI_API_KEY")
if not API_KEY:
    raise ValueError("No OpenAI API key found. Please set OPENAI_API_KEY environment variable.")

# Initialize AI Assistant
assistant = AIProjectAssistant(API_KEY)

# Updated project options focusing on Generative AI
PROJECT_OPTIONS = {
    "Text-to-Image Generation": "Create an AI system that generates images from text descriptions using models like DALL-E or Stable Diffusion",
    "GPT Chatbot Assistant": "Build a custom GPT-powered chatbot assistant for specific domain expertise",
    "AI Story Generator": "Develop a creative writing AI that generates stories based on prompts",
    "Voice Cloning AI": "Create a system that can clone and synthesize human voices",
    "AI Music Composer": "Build an AI system that composes original music in different styles",
    "Text-to-Video Generation": "Implement a system that creates short videos from text descriptions",
    "AI Code Generator": "Create a coding assistant that generates code from natural language descriptions",
    "AI Art Style Transfer": "Develop a system that applies artistic styles to images using AI",
    "AI Content Summarizer": "Build an AI that creates concise summaries of long-form content",
    "Virtual Avatar Creator": "Create an AI system that generates and animates virtual avatars"
}

# Custom CSS for better styling
CUSTOM_CSS = """
.container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}
.title {
    text-align: center;
    color: #2a9d8f;
    padding: 20px;
    border-bottom: 3px solid #264653;
    margin-bottom: 30px;
}
.subtitle {
    color: #264653;
    text-align: center;
    font-style: italic;
}
.project-button {
    margin: 5px;
    border: 2px solid #2a9d8f;
    border-radius: 8px;
    background-color: #f8f9fa;
}
.project-button:hover {
    background-color: #2a9d8f;
    color: white;
}
.output-box {
    border: 2px solid #264653;
    border-radius: 10px;
    padding: 15px;
}
.sidebar {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #264653;
}
"""

def process_input(input_type: str, query: str) -> Tuple[str, str]:
    """Process user input and return AI response."""
    if not query.strip():
        return "", "Please enter a query"
    
    if input_type == "brainstorm":
        response = assistant.brainstorm_project(query)
    else:
        response = assistant.get_code_suggestion(query)
    
    if response["success"]:
        status = f"Success! Tokens used: {response.get('tokens_used', 'N/A')}"
        return response["content"], status
    else:
        return "", f"Error: {response.get('error', 'Unknown error occurred')}"

def handle_project_click(project_name: str) -> Tuple[str, str, str]:
    """Handle when a project option is clicked."""
    description = PROJECT_OPTIONS[project_name]
    response = assistant.brainstorm_project(description)
    
    if response["success"]:
        status = f"Success! Tokens used: {response.get('tokens_used', 'N/A')}"
        return "brainstorm", description, response["content"]
    else:
        return "brainstorm", description, f"Error: {response.get('error', 'Unknown error occurred')}"

# Create Gradio interface with custom theme
with gr.Blocks(css=CUSTOM_CSS, title="DDS AI Project Assistant") as interface:
    with gr.Column(elem_classes="container"):
        gr.HTML("""
            <div class="title">
                <h1>🤖 DDS AI Project Assistant 🚀</h1>
                <p class="subtitle">Your Generative AI Project Development Companion</p>
            </div>
        """)
        
        with gr.Row():
            # Left sidebar with project options
            with gr.Column(scale=1, elem_classes="sidebar"):
                gr.HTML("""
                    <h3 style="text-align: center; color: #2a9d8f;">
                        🎯 Popular GenAI Projects
                    </h3>
                """)
                project_buttons = [
                    gr.Button(
                        name,
                        elem_classes="project-button"
                    ) for name in PROJECT_OPTIONS.keys()
                ]
            
            # Main content area
            with gr.Column(scale=3):
                input_type = gr.Radio(
                    choices=["brainstorm", "code"],
                    label="🤔 What kind of help do you need?",
                    value="brainstorm"
                )
                
                query = gr.Textbox(
                    label="💭 Enter your topic or code request",
                    placeholder="e.g., 'text-to-image generation' or 'implement stable diffusion'",
                    elem_classes="output-box"
                )
                
                submit_btn = gr.Button(
                    "🚀 Get AI Assistance",
                    elem_classes="project-button"
                )
                
                with gr.Column(elem_classes="output-box"):
                    output = gr.Textbox(
                        label="🤖 AI Response",
                        lines=10
                    )
                    status = gr.Textbox(
                        label="📊 Status"
                    )
        
        gr.HTML("""
            <div style="text-align: center; margin-top: 20px; padding: 10px; border-top: 2px solid #264653;">
                <p>Developed by DDS Team | Powered by OpenAI</p>
            </div>
        """)
    
    # Handle main submit button
    submit_btn.click(
        fn=process_input,
        inputs=[input_type, query],
        outputs=[output, status]
    )
    
    # Handle project option buttons
    for btn in project_buttons:
        btn.click(
            fn=handle_project_click,
            inputs=[btn],
            outputs=[input_type, query, output]
        )

if __name__ == "__main__":
    interface.launch()