import gradio as gr
from pipeline import corrective_rag

def chat(question, history):
    try:
        with open("/tmp/debug.txt", "r") as f:
            debug = f.read()
    except:
        debug = "no debug file"
        
    if not question.strip():
        return "", history
    answer, docs = corrective_rag(question)
    source = docs[0]["source"].replace("_", " ").title() if docs else "Unknown"
    query = docs[0].get("search_query", "")
    note = f"\n\n*Source: {source}*" + (f" · query: `{query}`" if query else "")
    history.append({"role": "user", "content": question})
    history.append({"role": "assistant", "content": answer + note})
    return "", history

CSS = """
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=EB+Garamond:ital,wght@0,400;1,400&display=swap');

/* ── The Pharaonic Palette ──────────────────────── */
:root {
    --bg-dark:    #0f0d0a;       /* Deep Obsidian */
    --gold:       #d4af37;       /* Royal Gold */
    --gold-dim:   #a68a2d;       /* Burnished Gold */
    --papyrus:    #e8dcc4;       /* Aged Papyrus */
    --stone:      #2c2720;       /* Temple Stone */
}

/* ── Base Container ─────────────────────────────── */
body, .gradio-container {
    background-color: var(--bg-dark) !important;
    font-family: 'EB Garamond', serif !important;
    color: var(--papyrus) !important;
    max-width: 700px !important; /* Narrowed for better mobile/video framing */
    margin: 0 auto !important;
    padding: 10px !important;    /* Reduced padding */
    height: 100vh !important;    /* Force full height usage */
    overflow: hidden !important; /* Prevent scrollbars on the body */
}

/* Texture Overlay */
.gradio-container::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("https://www.transparenttextures.com/patterns/black-linen.png");
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

/* ── Compact Header ─────────────────────────────── */
.header-block {
    text-align: center;
    padding: 10px 0 10px; /* Heavily reduced padding */
    border-bottom: 1px solid var(--gold);
    margin-bottom: 15px;
}
.header-block h1 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.8rem !important; /* Shrunk from 3rem */
    font-weight: 700 !important;
    color: var(--gold) !important;
    letter-spacing: 0.1em !important;
    margin: 0 !important;
}
.header-block p {
    font-family: 'Cinzel', serif !important;
    color: var(--gold-dim) !important;
    font-size: 0.7rem !important; /* Shrunk */
    margin-top: 4px !important;
    text-transform: uppercase;
}

/* ── Chatbot ─────────────────────────────────────── */
#chatbot {
    background: var(--stone) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 8px !important;
    height: 450px !important; /* FIXED HEIGHT: Essential for "one shot" */
    min-height: 300px !important;
}

#chatbot .message.user {
    background: #1a1814 !important;
    color: var(--papyrus) !important;
    border-radius: 8px 8px 0 8px !important;
    font-size: 0.9rem !important;
    padding: 8px !important;
}

#chatbot .message.bot {
    background: var(--papyrus) !important;
    color: #1a1f16 !important;
    border-radius: 8px 8px 8px 0 !important;
    font-size: 0.9rem !important; /* Shrunk for readability in small box */
    padding: 8px !important;
}

/* ── Input Row ───────────────────────────────────── */
textarea, input[type="text"] {
    background: #1e1e1e !important;
    border: 1px solid var(--stone) !important;
    border-radius: 4px !important;
    color: var(--papyrus) !important;
    font-size: 0.9rem !important;
}

/* ── Examples & Footer ───────────────────────────── */
.examples-holder {
    border-top: 1px solid var(--gold-dim) !important;
    margin-top: 5px !important;
    padding-top: 5px !important;
}

.examples-holder button {
    background: var(--stone) !important;
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
}

footer { display: none !important; }

/* ── Optimization for Demo Recording ──────────────── */
/* This hides the "Built with Gradio" and extra spacing */
.gap.vgap { gap: 10px !important; }
"""

with gr.Blocks() as demo:
    with gr.Column(elem_classes="header-block"):
        gr.HTML("""
            <h1>𓂀 ROSETTA</h1>
            <p>Corrective RAG</p>
        """)

    chatbot = gr.Chatbot(
        elem_id="chatbot",
        height=460,
        show_label=False,
        avatar_images=(None, "https://api.dicebear.com/7.x/shapes/svg?seed=gold-ankh"),
    )

    with gr.Row():
        msg = gr.Textbox(
            placeholder="Ask about ancient Egypt…",
            show_label=False,
            scale=9,
            container=False,
        )
        send = gr.Button("Send", scale=1, variant="primary")

    gr.Examples(
        [
            "Who was Ramesses II and why was he significant?",
            "What did ancient Egyptians believe about the afterlife?",
        ],
        inputs=msg,
        label="Try an example",
    )

    send.click(chat, [msg, chatbot], [msg, chatbot])
    msg.submit(chat, [msg, chatbot], [msg, chatbot])

demo.launch(css=CSS, server_name="0.0.0.0", share=True)