# --- Gradio UI with backend API calls ---
import gradio as gr
import requests
from PIL import Image
import io

BACKEND_URL = "https://cuddly-doodle1.onrender.com"

def add_face(image, name):
    if image is None or not name:
        return "Please provide both image and name."
    buffered = io.BytesIO()
    image.save(buffered, format="PNG")
    files = {"image": ("image.png", buffered.getvalue(), "image/png")}
    data = {"name": name}
    try:
        r = requests.post(f"{BACKEND_URL}/add_face", files=files, data=data)
        return r.json().get("result", "Error")
    except Exception as e:
        return f"Error: {e}"

def match_face(image):
    if image is None:
        return "Please upload an image."
    buffered = io.BytesIO()
    image.save(buffered, format="PNG")
    files = {"image": ("image.png", buffered.getvalue(), "image/png")}
    try:
        r = requests.post(f"{BACKEND_URL}/match_face", files=files)
        return r.json().get("result", "Error")
    except Exception as e:
        return f"Error: {e}"

def get_status():
    try:
        r = requests.get(f"{BACKEND_URL}/status")
        return r.json().get("result", "Error")
    except Exception as e:
        return f"Error: {e}"

def clear_database():
    try:
        r = requests.post(f"{BACKEND_URL}/clear_database")
        return r.json().get("result", "Error")
    except Exception as e:
        return f"Error: {e}"

css = """
#col-left {
    margin: 0 auto;
    max-width: 450px;
}
#col-right {
    margin: 0 auto;
    max-width: 450px;
}
"""

with gr.Blocks(css=css) as demo:
    gr.HTML("""
    <div style="text-align: center; margin-bottom: 20px;">
        <h1>🎯 FaceMatch Pro</h1>
        <p>Professional Face Recognition System</p>
    </div>
    """)
    with gr.Row():
        with gr.Column(elem_id="col-left"):
            gr.HTML("""
            <div style="text-align: center; font-size: 18px; margin-bottom: 10px;">
                <b>📥 Add Face to Database</b>
            </div>
            """)
            add_image = gr.Image(label="Upload Photo", sources='upload', type="pil")
            add_name = gr.Textbox(label="Person Name", placeholder="Enter name...")
            add_button = gr.Button("Add to Database", variant="primary")
            add_result = gr.Textbox(label="Result")
        with gr.Column(elem_id="col-right"):
            gr.HTML("""
            <div style="text-align: center; font-size: 18px; margin-bottom: 10px;">
                <b>🔍 Find Face Match</b>
            </div>
            """)
            match_image = gr.Image(label="Upload Photo to Match", sources='upload', type="pil")
            match_button = gr.Button("Find Match", variant="primary")
            match_result = gr.Textbox(label="Match Result")
    gr.HTML("<hr>")
    with gr.Row():
        status_button = gr.Button("Check Status")
        clear_button = gr.Button("Clear Database", variant="stop")
        status_output = gr.Textbox(label="System Status")
    add_button.click(fn=add_face, inputs=[add_image, add_name], outputs=add_result)
    match_button.click(fn=match_face, inputs=match_image, outputs=match_result)
    status_button.click(fn=get_status, outputs=status_output)
    clear_button.click(fn=clear_database, outputs=status_output)

if __name__ == "__main__":
    demo.launch(share=True)