"""
src/ui/layout.py — Gradio Blocks layout definition for the VLA Demo.

This module owns *only* the component hierarchy and wiring.
Styling   → src/ui/styles.py
HTML bits → src/ui/components.py
Handlers  → src/ui/handlers.py
Examples  → src/ui/examples.py
"""

import gradio as gr

from src.ui.styles import CUSTOM_CSS
from src.ui.components import HEADER_HTML, FOOTER_HTML
from src.ui.handlers import process_pipeline
from src.ui.examples import get_demo_examples


def create_ui() -> gr.Blocks:
    """
    Build and return the Gradio Blocks interface.

    All sub-modules are imported locally so that this function can be
    called in isolation for testing without triggering heavy model loads.
    """
    demo_examples = get_demo_examples()

    with gr.Blocks(
        title="VLA — AI Vision Language Action Pipeline | Codevally",
        theme=gr.themes.Base(
            primary_hue="blue",
            secondary_hue="cyan",
            neutral_hue="slate",
            font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
        ),
        css=CUSTOM_CSS,
    ) as demo:

        # ── Header ────────────────────────────────────────────────────────
        gr.HTML(HEADER_HTML)

        # ── Main layout ───────────────────────────────────────────────────
        with gr.Row(equal_height=False):

            # ── Left: Inputs ───────────────────────────────────────────
            with gr.Column(scale=1, min_width=300):
                gr.Markdown("<div class='cv-section-label'>📷 Input</div>")
                image_input = gr.Image(
                    label="Upload Scene Image",
                    type="numpy",
                    height=280,
                    elem_id="image_upload",
                )
                gr.Markdown(
                    "<div class='cv-section-label' style='margin-top:12px;'>"
                    "💬 Natural Language Command</div>"
                )
                command_input = gr.Textbox(
                    label="Command",
                    placeholder=(
                        'e.g. "Pick up the defective board and place it in the red bin"'
                    ),
                    lines=3,
                    show_label=False,
                )
                run_btn = gr.Button(
                    "🚀 Run AI Pipeline",
                    variant="primary",
                    size="lg",
                )
                gr.Markdown(
                    "<div class='cv-section-label' style='margin-top:14px;'>"
                    "📊 Pipeline Status</div>"
                )
                status_output = gr.Markdown(
                    value="*Ready — upload a scene image and enter an instruction.*",
                    elem_classes=["status-box"],
                )

            # ── Right: Outputs ─────────────────────────────────────────
            with gr.Column(scale=2):
                with gr.Tabs(elem_id="result_tabs"):

                    with gr.TabItem("🔍 Detection Results"):
                        gr.Markdown(
                            "_Grounding DINO detects scene objects based on your "
                            "command text — no fixed class limitations._"
                        )
                        with gr.Row():
                            detection_image = gr.Image(
                                label="Detected Objects",
                                type="numpy",
                                height=320,
                            )
                            detections_json = gr.Code(
                                label="Detection Data (JSON)",
                                language="json",
                                lines=14,
                            )

                    with gr.TabItem("🎯 Action Plan & Visualization"):
                        gr.Markdown(
                            "_The LLM interprets your command and maps it to detected "
                            "objects, generating step-by-step robotic action instructions._"
                        )
                        with gr.Row():
                            action_image = gr.Image(
                                label="Action Visualization",
                                type="numpy",
                                height=320,
                            )
                            action_plan_md = gr.Markdown(
                                value=(
                                    "*Run the pipeline to see the "
                                    "AI-generated action plan.*"
                                ),
                            )

        # ── Demo examples ──────────────────────────────────────────────────
        if demo_examples:
            gr.Markdown("---")
            gr.Markdown(
                "### 📂 Try a Demo Scene\n"
                "_Click any example below to load a scene image with a pre-filled "
                "command. These showcase Codevally's VLA pipeline across diverse "
                "industrial and everyday environments._"
            )
            gr.Examples(
                examples=demo_examples,
                inputs=[image_input, command_input],
                label="Demo Scenes",
                examples_per_page=5,
            )

        # ── Footer ────────────────────────────────────────────────────────
        gr.HTML(FOOTER_HTML)

        # ── Event wiring ──────────────────────────────────────────────────
        run_btn.click(
            fn=process_pipeline,
            inputs=[image_input, command_input],
            outputs=[
                detection_image,
                detections_json,
                action_plan_md,
                action_image,
                status_output,
            ],
        )

    return demo