import os
import gradio as gr
from google.generativeai import configure
from ui.story_interface import create_story_interface
import config

def main():
    # Configure Google API
    configure(api_key=config.GOOGLE_API_KEY)

    # Custom CSS for better narration display
    custom_css = """
    .story-narration-box {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
        border: 3px solid #6366f1 !important;
        border-radius: 16px !important;
        padding: 24px !important;
        margin: 24px 0 !important;
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15) !important;
        line-height: 1.8 !important;
        color: #1e293b !important;
        font-size: 16px !important;
        min-height: 120px !important;
    }

    .story-narration-box h3 {
        color: #4338ca !important;
        border-bottom: 3px solid #6366f1 !important;
        padding-bottom: 12px !important;
        margin-bottom: 20px !important;
        font-size: 20px !important;
        font-weight: bold !important;
        text-align: center !important;
    }

    .story-narration-box p {
        margin-bottom: 16px !important;
        text-align: left !important;
        color: #334155 !important;
        font-size: 16px !important;
        line-height: 1.7 !important;
        font-weight: 500 !important;
    }

    .story-narration-box div {
        color: #334155 !important;
        font-size: 16px !important;
    }

    #story_narration {
        max-height: 600px !important;
        overflow-y: auto !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 12px !important;
        background-color: #f8fafc !important;
    }

    #scene_narration {
        max-height: 500px !important;
        overflow-y: auto !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 12px !important;
    }

    /* Ensure all text in narration boxes is visible and prominent */
    #story_narration *, #scene_narration * {
        color: #334155 !important;
        font-size: 16px !important;
    }

    #story_narration h3, #scene_narration h3 {
        color: #4338ca !important;
        font-size: 20px !important;
        text-align: center !important;
    }

    /* Style for quick narration lines */
    .story-narration-box em {
        color: #64748b !important;
        font-style: italic !important;
        text-align: center !important;
        display: block !important;
        margin: 20px 0 !important;
    }
    """

    # Create and launch the Gradio interface
    with gr.Blocks(
        theme=gr.themes.Soft(primary_hue="indigo", secondary_hue="blue"),
        css=custom_css
    ) as demo:
        create_story_interface(demo)

    demo.launch(
    server_name="0.0.0.0",  # Allows external access
    server_port=7860,
    share=False,  # Set to True if you want a public link
    debug=True
)

if __name__ == "__main__":
    main()