import gradio as gr
import pandas as pd

# Custom CSS to match the screenshot exactly
custom_css = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

.gradio-container {
    background-color: #06090f !important;
    font-family: 'Inter', sans-serif !important;
    color: white !important;
}

/* Sidebar Styling */
.sidebar-content { padding: 20px; background: #0b0f19; height: 100%; border-right: 1px solid #1f2937; }
.logo-area { text-align: center; margin-bottom: 30px; }
.status-badge { 
    background: rgba(16, 185, 129, 0.1); 
    border: 1px solid #10b981; 
    color: #10b981; 
    padding: 8px 15px; 
    border-radius: 20px; 
    font-size: 12px; 
    text-align: center;
    margin-bottom: 40px;
}

/* Metric Cards */
.metrics-row { display: flex; gap: 15px; margin-bottom: 25px; }
.card { 
    flex: 1; 
    background: #111827; 
    padding: 20px; 
    border-radius: 12px; 
    text-align: center;
    border-top: 3px solid #3b82f6; /* Default blue */
}
.card.threat { border-top-color: #ef4444; }
.card.safe { border-top-color: #10b981; }
.card.rate { border-top-color: #8b5cf6; }

.card-val { font-size: 28px; font-weight: 700; margin-bottom: 5px; }
.card-label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; }

/* Accordion & Buttons */
.establish-btn { 
    background: linear-gradient(90deg, #3b82f6 0%, #00d4ff 100%) !important; 
    border: none !important; 
    color: white !important;
    font-weight: 600 !important;
}

/* Bottom Input Bar */
.chat-container {
    background: #111827 !important;
    border: 1px solid #3b82f6 !important;
    border-radius: 10px !important;
}
"""

with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo:
    
    # --- SIDEBAR PANEL ---
    with gr.Sidebar(elem_id="sidebar"):
        with gr.Column(elem_classes="sidebar-content"):
            with gr.Column(elem_classes="logo-area"):
                gr.HTML("""<div style='font-size: 40px;'>🛡️</div>""")
                gr.Markdown("## **INTELLIGUARD**\nSECURITY PLATFORM")
            
            gr.HTML("<div class='status-badge'>● INTELLIGUARD PROTECTED</div>")
            
            gr.Markdown("### 📋 AUDIT LOG")
            gr.Markdown("<p style='color: #6b7280; font-size: 13px;'>No activity recorded yet.</p>")
            
            gr.Markdown("---")
            gr.Markdown("### 📄 DOCUMENT UPLOAD")
            gr.File(label=None, file_count="multiple", elem_id="file-upload")
            gr.Markdown("<p style='color: #6b7280; font-size: 11px;'>200MB per file • PDF, TXT, DOCX</p>")

    # --- MAIN CONTENT AREA ---
    with gr.Column():
        # Header Section
        gr.HTML("""
            <div style="text-align: center; margin-top: 20px;">
                <div style='font-size: 30px; margin-bottom: 10px;'>🛡️</div>
                <h1 style="font-size: 32px; margin: 0;">TechCorp Employee Portal</h1>
                <p style="color: #6b7280;">Secured by <span style="color: #10b981;">IntelliGuard</span> • 4-Layer Prompt Injection Detection</p>
            </div>
        """)

        # Metrics Grid
        with gr.Row(elem_classes="metrics-row"):
            gr.HTML("<div class='card'><div class='card-val' style='color:#3b82f6'>0</div><div class='card-label'>Total Queries</div></div>")
            gr.HTML("<div class='card threat'><div class='card-val' style='color:#ef4444'>0</div><div class='card-label'>Threats Blocked</div></div>")
            gr.HTML("<div class='card safe'><div class='card-val' style='color:#10b981'>0</div><div class='card-label'>Safe Queries</div></div>")
            gr.HTML("<div class='card rate'><div class='card-val' style='color:#8b5cf6'>100%</div><div class='card-label'>Safe Rate</div></div>")

        # Email Gateway Accordion
        with gr.Accordion("📧 Enterprise Email Gateway", open=True):
            with gr.Row():
                email_input = gr.Textbox(label="Target Email", value="security-ops@techcorp.com", interactive=True)
                pwd_input = gr.Textbox(label="App Password", type="password", placeholder="••••••••••••", interactive=True)
            connect_btn = gr.Button("🔗 Establish Secure Connection", elem_classes="establish-btn")

        # Spacing
        gr.Markdown("<div style='height: 100px;'></div>")

        # Footer Chat Bar
        with gr.Row():
            chat_input = gr.Textbox(
                show_label=False, 
                placeholder="Ask about company policies, benefits, security guidelines...", 
                scale=10,
                elem_classes="chat-container"
            )
            submit_btn = gr.Button("↑", scale=1, variant="primary")

# Launch
demo.launch(server_name="0.0.0.0", server_port=7860)