import gradio as gr
import modal
import requests
import spaces

# Modal Function
rag = modal.Cls.from_name(
    "minicpm-rag",
    "RAG"
)()


pdf_bytes_global = None

def upload_pdf(pdf):

    if pdf is None:
        return "❌ Please upload a PDF"

    with open(pdf.name, "rb") as f:
        pdf_bytes = f.read()

    r = requests.post(
        "https://gajanand1902--minicpm-rag-upload-pdf.modal.run",
        json={"pdf_bytes": list(pdf_bytes)}
    )
    data = r.json()

    if isinstance(data, dict):
        return str(data)

    return data

@spaces.GPU
def chat(message, history):
    r = requests.post(
        "https://gajanand1902--minicpm-rag-chat-api.modal.run",
        json={"question": message}
    )

    data = r.json()

    if isinstance(data, dict):
        return data.get("answer", str(data))

    return str(data)


# Custom Theme
theme = gr.themes.Soft(
    primary_hue="blue",
    secondary_hue="cyan",
    neutral_hue="slate"
)

css = """
.gradio-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.upload-card {
    width: 100% !important;
    max-width: none !important;
    padding: 20px;
    border-radius: 15px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}
    padding: 20px;
    border-radius: 15px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.footer {
    text-align:center;
    color:gray;
}

button {
    border-radius: 10px !important;
}

.chatbot {
    border-radius: 15px !important;
}

.chat-section textarea {
    background: #ffffff !important;
    border: 2px solid #2563eb !important;
    border-radius: 16px !important;
    padding: 14px !important;
    font-size: 15px !important;
}

.chat-section textarea:focus {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 10px rgba(6,182,212,0.4) !important;
}

.chat-section textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
    font-weight: 500;
}

"""

with gr.Blocks(
    title="📄 MiniCPM Financial RAG",
    theme=theme,
    css=css
) as demo:
    # Header
    gr.HTML("""
    <div style="
        text-align:center;
        padding:20px;
        background:linear-gradient(90deg,#2563eb,#06b6d4);
        color:white;
        border-radius:15px;
        margin-bottom:20px;"
    >
    </div>
    """)
    # Layout: left upload, right chat
    with gr.Row():
        # Left side (smaller header + upload)
        with gr.Column(scale=1):
            # Small header
            gr.HTML("""
            <div class="header" style="text-align:center;padding:8px;background:linear-gradient(90deg,#2563eb,#06b6d4);color:white;border-radius:12px;margin-bottom:8px;">
                <h1 style="font-size:1.2rem;margin:0;">📄 MiniCPM Financial QA RAG</h1>
                <p style="font-size:0.9rem;margin:0;">Upload a Financial PDF and Chat with it using AI</p>
            </div>
            """)
            with gr.Group(elem_classes="upload-card"):
                gr.Markdown("### 📚 Upload Document")
                pdf = gr.File(label="Choose PDF", file_types=[".pdf"])
                upload_btn = gr.Button("🚀 Process PDF", variant="primary")
                status = gr.Textbox(label="📌 Status", interactive=False)
                upload_btn.click(fn=upload_pdf, inputs=pdf, outputs=status)
        # Right side (chat with scrollbar)
        with gr.Column(scale=3):
            gr.Markdown("### 💬 Ask Questions")

            with gr.Group(elem_classes="chat-section"):

                gr.ChatInterface(
                    fn=chat,
                    chatbot=gr.Chatbot(
                        height=600,
                        show_label=False
                    ),
                    textbox=gr.Textbox(
                        placeholder="🤖 Ask a question about your financial report...",
                        container=False,
                        scale=7
                    )
                )
if __name__ == "__main__":
    demo.launch()