import gradio as gr
import logging
import os
from dotenv import load_dotenv

# Load environment variables
load_dotenv()

# Configure logging
logging.basicConfig(
    level=logging.INFO,
    format='%(asctime)s - %(levelname)s - %(message)s'
)
logger = logging.getLogger(__name__)

# CSS Configuration

css = """
/* General Styles */
body {
    font-family: sans-serif;
    background-color: #f8f8f8; /* Light background for better contrast */
    color: #333; /* Darker text color */
}

.header {
    background-color: #fff; /* White header */
    padding: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.logo {
    max-height: 80px;
    margin-right: 30px;
}

/* Main Content Area */
.container {
    padding: 30px;
    background-color: #fff; /* White container background */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.main-content, .image-upload-area {
    padding: 20px;  /* Add padding around content sections */
    border: none;  /* Remove borders */
}

/* Image Upload */
.image-upload-area .gradio-file-upload { /* Style individual file upload components */
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Navigation Grid */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.nav-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 25px;       /* Increased padding */
    display: flex;          
    align-items: center;    
    text-decoration: none; /* Remove underline from links */
    color: #333;          /* Darker text color */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Combined transitions */
}

.nav-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.nav-card i {
    font-size: 2.5em;     /* Larger icons */
    margin-right: 15px;
    color: #4285f4;     /* Google blue for icons (optional) */
}

.nav-card span {
    font-size: 1.4em;       /* Larger text */
    font-weight: 500;      
}

"""

# Navigation cards configuration
NAVIGATION_CARDS = [
    {"icon": "🔍", "title": "DeepFake Detection", "url": "https://noumanjavaid-new-space.hf.space"},
    {"icon": "📄", "title": "Document Analysis", "url": "https://noumanjavaid-centurionv2.hf.space"},
    {"icon": "🎥", "title": "Video Watermarking", "url": "https://noumanjavaid-watermark-demo-video.hf.space"},
    {"icon": "🔐", "title": "Image Authentication", "url": "https://noumanjavaid-centii.hf.space"},
    {"icon": "🖼️", "title": "Image Comparison", "url": "https://another-example.com"} # Added example
]

def create_interface():
    with gr.Blocks(css=css, title="Centurion") as demo:
        with gr.Row(elem_classes=["header"]):
            gr.Image(
                "https://raw.githubusercontent.com/noumanjavaid96/ai-as-an-api/refs/heads/master/image%20(39).png",
                elem_classes=["logo"],
                show_label=False,
                container=False
            )
            gr.Markdown("<h2 style='margin:0;'>Centurion</h2>") # Improved title style

        with gr.Row(elem_classes=["container"]):
            with gr.Column(elem_classes=["main-content"]):
                gr.HTML(
                    """
                    <div class="iframe-container">
                        <iframe
                            src="https://noumanjavaid-centii.hf.space"  /* Set initial iframe URL */
                            title="Centurion Main Platform"
                            id="main-iframe"  /* Add id for targeting with JavaScript */
                       ></iframe>
                    </div>
                    """
                )  # Close HTML string properly

            with gr.Row(elem_classes=["nav-grid"]):
                for card in NAVIGATION_CARDS:
                    gr.HTML(f"""
                        <a href="{card['url']}" onclick="updateIframe('{card['url']}'); return false;" class="nav-card">
                            <i>{card['icon']}</i> <span>{card['title']}</span>
                        </a>
                    """)


    return demo



# JavaScript function to update iframe source

js = """
function updateIframe(url) {
    document.getElementById('main-iframe').src = url;
}
"""

if __name__ == "__main__":
    demo = create_interface()
    demo.launch(show_error=False, show_api=False)