import os
import gradio as gr
import requests
from PIL import Image
from io import BytesIO
from dotenv import load_dotenv

load_dotenv()

IMGBB_API_KEY = os.getenv("IMGBB_API_KEY")
FLAREAI_API = os.getenv("FLAREAI_API")

def detect_faces(image):
    try:
        buffered = BytesIO()
        image.save(buffered, format="JPEG")
        buffered.seek(0)

        upload_url = "https://api.imgbb.com/1/upload"
        files = {'image': buffered}
        data = {"key": IMGBB_API_KEY}

        response = requests.post(upload_url, data=data, files=files)
        if response.status_code != 200:
            return f"Image upload failed with status code {response.status_code}: {response.text}"

        image_url = response.json()["data"]["url"]
        print(f"Image uploaded successfully: {image_url}")

        response = requests.post(FLAREAI_API, json={"image_url": image_url})
        response.raise_for_status()

        result = response.json()
        face_data = result.get("face_data", [])
        detected_image_url = result.get("image_url", "")

        if face_data:
            face_details = "\n".join([f"Face {index + 1}: Age: {face['age']}, Emotion: {face['emotion']}, Gender: {face['gender']}, Race: {face['race']}" for index, face in enumerate(face_data)])
        else:
            face_details = "No faces detected."

        result_image = Image.open(BytesIO(requests.get(detected_image_url).content))
        return result_image, face_details
    except requests.exceptions.RequestException as e:
        return f"An error occurred: {e}", ""


# Professional CSS to style the Gradio UI
css = """
    .gradio-container {
        font-family: 'Roboto', sans-serif;
        background-color: #fafafa;
        color: #333;
    }
    .gradio-title {
        color: #2C3E50;
        font-size: 40px;
        font-weight: bold;
        text-align: center;
        margin-top: 20px;
    }
    .gradio-description {
        color: #7f8c8d;
        font-size: 18px;
        text-align: center;
        margin-top: 10px;
        font-weight: 400;
    }
    .gradio-input, .gradio-output {
        border-radius: 15px;
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid #dcdfe1;
    }
    .gradio-button {
        background-color: #4CAF50;
        color: white;
        font-size: 18px;
        font-weight: 600;
        border-radius: 12px;
        padding: 15px 30px;
        margin-top: 30px;
        border: none;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }
    .gradio-button:hover {
        background-color: #45a049;
    }
    .gradio-button:focus {
        outline: none;
    }
    .gradio-image {
        border-radius: 12px;
        border: 1px solid #ddd;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    }
    .gradio-textbox {
        font-size: 16px;
        color: #333;
        border-radius: 12px;
        border: 1px solid #ccc;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
        padding: 15px;
        background-color: #fff;
    }
    .gradio-row {
        margin-bottom: 30px;
    }
    .gradio-container .gradio-button {
        margin-bottom: 20px;
    }
    .gradio-container .gradio-title, .gradio-container .gradio-description {
        padding: 0 20px;
    }
"""

# Gradio Interface
iface = gr.Interface(
    fn=detect_faces,
    inputs=gr.Image(type="pil", label="Upload Image"),
    outputs=[gr.Image(type="pil", label="Processed Image"), gr.Textbox(label="Face Details")],
    title="FlareAI Face Detection",
    description="Made with ❤️ by Skycodee | Leverage advanced AI for face detection.",
    theme="huggingface",  # Using Huggingface theme for consistency
    css=css
)

iface.launch()