import gradio as gr
from src.logic import generate_answer, rebuild


def create_ui():
    with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue"), title="MindMesh") as demo:
        # --- Header ---
        gr.Markdown(
            """
            <div style='text-align:center; margin-bottom: 1rem;'>
                <h1>🧠 <b>MindMesh — Cross-Domain Reasoning Assistant</b></h1>
                <p>Ask a question and get synthesized insights from science, philosophy, business, and beyond.</p>
            </div>
            """
        )

        # --- Main Input Section ---
        with gr.Row(equal_height=False):
            # Left column - Question + Buttons
            with gr.Column(scale=2.5):  # slightly reduced width
                q = gr.Textbox(
                    label="Your Question",
                    placeholder="Write your prompt here...",
                    lines=1,
                    show_label=True,
                )

                with gr.Row():
                    generate_btn = gr.Button("⚙️ Generate Insight", variant="primary")
                    clear_btn = gr.Button("🧹 Clear", variant="secondary")

                status = gr.Markdown(value="", visible=True)

            # Right column - Answer Mode (expanded slightly)
            with gr.Column(scale=1.2, min_width=360):
                mode = gr.Radio(
                    ["Quick Summary (Offline)", "LLM Precision (Groq Llama-3.1 70B)"],
                    value="Quick Summary (Offline)",
                    label="Answer Mode",
                    show_label=True,
                    elem_id="answer-mode",
                )

        # --- Output section ---
        gr.Markdown("<br>")
        gr.Markdown("### 🧭 Synthesized Insight")
        out = gr.Markdown(elem_id="output-box")

        # --- Example prompts ---
        examples = gr.Examples(
            examples=[
                ["What can startups learn from the Industrial Revolution?"],
                ["How do Stoic principles guide modern leadership?"],
                ["What parallels exist between habit loops and innovation?"],
                ["How does color psychology affect business branding?"]
            ],
            inputs=q
        )

        # --- Button logic ---
        generate_btn.click(fn=lambda x, m: generate_answer(x, m), inputs=[q, mode], outputs=out)
        clear_btn.click(lambda: ("", "", ""), outputs=[q, out, status])
        q.submit(fn=lambda x, m: generate_answer(x, m), inputs=[q, mode], outputs=out)

        # --- Custom Styling ---
        gr.HTML("""
        <style>
        /* Expand the main layout width */
        .gradio-container {
            max-width: 1250px !important;
            margin: auto !important;
        }

        /* Input text area */
        textarea {
            font-size: 15px !important;
            border-radius: 8px !important;
        }

        /* Buttons */
        button { 
            font-size: 14px !important; 
            font-weight: 600; 
            border-radius: 8px !important; 
            height: 45px !important;
        }

        /* Answer Mode styling */
        #answer-mode .wrap {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            width: 100% !important;
        }

        #answer-mode label {
            display: block !important;
            width: 100% !important;
            padding: 10px 14px !important;
            border-radius: 8px !important;
            text-align: left !important;
            font-size: 14px !important;
            font-weight: 500;
        }

        #answer-mode input[type="radio"] {
            width: 16px !important;
            height: 16px !important;
        }

        #answer-mode .item {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
        }

        /* Output box styling */
        #output-box {
            border: 1px solid rgba(255, 255, 255, 0.15);
            background-color: rgba(255, 255, 255, 0.04);
            border-radius: 10px;
            padding: 18px;
            margin-top: 10px;
            min-height: 150px;
            max-height: 400px;
            overflow-y: auto;
            font-size: 15px !important;
        }

        /* Examples */
        .examples {
            margin-top: 1rem !important;
        }

        </style>
        """)

    return demo