import os
import gradio as gr
import json
from gradio_client import Client, handle_file

# Initialize backend client with error handling
try:
    backend = Client(os.getenv("BACKEND"), hf_token=os.getenv("TOKEN"))
except Exception as e:
    raise Exception(f"Failed to initialize backend client: {str(e)}")

def detect(image):
    """Detect deepfake content in an image with comprehensive error handling"""
    if image is None:
        raise gr.Error("Please upload an image to analyze")
    
    try:
        result_text = backend.predict(
            image=handle_file(image),
            api_name="/detect"
        )
        
        result = json.loads(result_text)
        if not result or result.get("status") != "ok":
            raise gr.Error("Analysis failed: Invalid response from backend")
            
        # Format results professionally
        overall = f"{result['overall']}% Confidence"
        aigen = f"{result['aigen']}% (AI-Generated Content Likelihood)"
        deepfake = f"{result['deepfake']}% (Face Manipulation Likelihood)"
        
        return overall, aigen, deepfake
    
    except json.JSONDecodeError:
        raise gr.Error("Error processing analysis results")
    except Exception as e:
        raise gr.Error(f"Analysis error: {str(e)}")

# Enhanced professional CSS
custom_css = """
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}
.header {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}
.button-gradient {
    background: linear-gradient(45deg, #3498db, #2ecc71, #9b59b6);
    background-size: 400% 400%;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: gradientAnimation 3s ease infinite;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}
.button-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.5);
}
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.label {
    font-weight: 600;
    color: #34495e;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    margin: 5px 0;
}
.footer {
    color: #7f8c8d;
    font-size: 14px;
    margin-top: 20px;
}
"""

# Professional content
MARKDOWN0 = """
<div class="header">
    <h1>DeepFake Detection System</h1>
    <p>Advanced AI-powered analysis for identifying manipulated media</p>
</div>
<div style="margin: 15px 0;">
    <a href="https://faceonlive.com/deepfake-detector" target="_blank" style="color: #3498db; text-decoration: none;">
        Learn About Our Technology
    </a>
</div>
"""

MARKDOWN3 = """
<div class="footer">
    <p>Additional Tools:</p>
    <div style="margin: 10px 0;">
        <a href="https://faceonlive.com/face-search-online" target="_blank" style="color: #3498db; text-decoration: none; margin-right: 15px;">
            Face Search Technology
        </a>
        <a href="https://faceonlive.com/reverse-image-search" target="_blank" style="color: #3498db; text-decoration: none;">
            Reverse Image Search
        </a>
    </div>
    <p>© 2025 FaceOnLive - All Rights Reserved</p>
</div>
"""

with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo:
    gr.Markdown(MARKDOWN0)
    
    with gr.Row(elem_classes="container"):
        with gr.Column(scale=1):
            image = gr.Image(
                type='filepath', 
                height=400,
                label="Upload Image for Analysis",
                interactive=True
            )
            detect_button = gr.Button(
                "Analyze Image", 
                elem_classes="button-gradient"
            )
            gr.Examples(
                examples=['examples 1.jpg', 'examples 2.jpg'],
                inputs=image,
                outputs=['overall', 'aigen', 'deepfake'],
                fn=detect,
                cache_examples=True
            )
            
        with gr.Column(scale=2):
            overall = gr.Label(label="Confidence Score", elem_classes="label")
            with gr.Row():
                aigen = gr.Label(label="AI-Generated Content", elem_classes="label")
                deepfake = gr.Label(label="Face Manipulation", elem_classes="label")
    
    gr.Markdown(MARKDOWN3)
    
    # Visitor badge
    gr.HTML("""
        <div style="margin-top: 20px;">
            <a href="https://visitorbadge.io/status?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FFaceOnLive%2FDeep-Fake-Detector">
                <img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FFaceOnLive%2FDeep-Fake-Detector&labelColor=%233495db&countColor=%232ecc71&style=flat" />
            </a>
        </div>
    """)
    
    detect_button.click(
        fn=detect,
        inputs=[image],
        outputs=[overall, aigen, deepfake],
        _js="() => {return [document.querySelector('input[type=file]').files[0]]}"
    )

demo.queue(api_open=False, concurrency_count=8).launch(
    server_name="0.0.0.0",
    show_api=False,
    debug=True
)