import gradio as gr
from ocr_processor import extract_text_from_image
from llm_processor import load_llm_model, generate_json_from_text

# Load LLM model on startup
load_llm_model()

def process_invoice(file_bytes):
    if file_bytes is None:
        return "No file uploaded", {"error": "No file uploaded"}
    
    # Step 1: Extract text
    raw_text = extract_text_from_image(file_bytes)
    if not raw_text or "No text detected" in raw_text:
        return raw_text, {"error": "No text could be extracted from the image."}
    
    # Step 2: JSON generation
    json_data = generate_json_from_text(raw_text)
    return raw_text, json_data

# Custom CSS with Tailwind CDN
custom_css = """
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}
.gradio-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}
h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    margin-bottom: 1rem;
}
h3 {
    font-size: 1.25rem;
    color: #4b5563;
    text-align: center;
    margin-bottom: 2rem;
}
.gr-button {
    background-color: #2563eb;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}
.gr-button:hover {
    background-color: #1e40af;
}
.gr-textbox, .gr-json {
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.gr-file-upload {
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: white;
}
"""

# Gradio UI
with gr.Blocks(css=custom_css) as demo:
    gr.Markdown(
        """
        # 🧾 Invoice Processing App
        Upload an invoice image to extract **OCR text** and generate **structured JSON** output.
        """,
        elem_classes="text-center"
    )

    with gr.Row(variant="panel"):
        with gr.Column(scale=1):
            input_file = gr.File(
                label="Upload Invoice Image",
                type="binary",
                file_types=[".png", ".jpg", ".jpeg"],
                elem_classes="gr-file-upload"
            )
            process_btn = gr.Button(
                "Process Invoice",
                variant="primary",
                elem_classes="gr-button mt-4 w-full"
            )
    
    with gr.Row(variant="panel"):
        with gr.Column(scale=1):
            raw_text_output = gr.Textbox(
                label="Extracted OCR Text",
                lines=10,
                placeholder="Extracted text will appear here...",
                elem_classes="gr-textbox"
            )
        with gr.Column(scale=1):
            json_output = gr.JSON(
                label="Structured JSON",
                elem_classes="gr-json"
            )

    process_btn.click(
        process_invoice,
        inputs=input_file,
        outputs=[raw_text_output, json_output]
    )

demo.launch()