import gradio as gr
from analyzer import analyze_ad_copy

def create_interface():
    css = """
        .report-container { font-family: 'Arial', sans-serif; padding: 20px; }
        .status { font-size: 1.2em; margin-bottom: 20px; padding: 10px; border-radius: 5px; }
        .compliant { background-color: #e7f5e7; color: #0d5f0d; }
        .non-compliant { background-color: #fce8e8; color: #c41e3a; }
        .section { margin: 15px 0; }
        .section-title { font-weight: bold; color: #2c3e50; margin: 10px 0; }
        .item { margin: 5px 0 5px 20px; }
        .severity-high { color: #c41e3a; }
        .severity-medium { color: #f39c12; }
        .severity-low { color: #27ae60; }
        .risk-high { background-color: #fce8e8; }
        .risk-medium { background-color: #fff3cd; }
        .risk-low { background-color: #e7f5e7; }
        .channel { margin: 10px 0; padding: 10px; border-radius: 5px; }
        .details { margin-left: 20px; font-size: 0.9em; color: #555; }
        .placeholder { 
            padding: 20px; 
            background-color: #f8f9fa;
            border: 1px dashed #dee2e6;
            border-radius: 5px;
            color: #6c757d;
            text-align: center;
        }
        .checkbox-group {
            margin: 10px 0;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
    """

    # Create a placeholder HTML
    placeholder_html = """
    <div class="report-container">
        <div class="placeholder">
            <h3>📋 Compliance Report Will Appear Here</h3>
            <p>Upload a marketing material image and click "Submit" to analyze compliance with financial regulations.</p>
            <p>The report will check:</p>
            <ul style="list-style-type: none; padding: 0;">
                <li>✓ Prohibited financial terms</li>
                <li>✓ Required disclaimers</li>
                <li>✓ Multi-region compliance</li>
                <li>✓ Channel-specific risks</li>
            </ul>
        </div>
    </div>
    """

    def analyze_with_regions(image, us_sec, uk_fca, eu):
        if not any([us_sec, uk_fca, eu]):
            return """
            <div class="report-container">
                <div class="status non-compliant">⚠️ Please select at least one region for compliance checking.</div>
            </div>
            """
        return analyze_ad_copy(image, {"US_SEC": us_sec, "UK_FCA": uk_fca, "EU": eu})

    def reset_interface():
        return None, True, True, True, placeholder_html

    with gr.Blocks(theme=gr.themes.Default(), css=css) as demo:
        gr.Markdown("# Marketing Campaign Financial Compliance Checker")
        gr.Markdown("Upload marketing material to check compliance with financial regulations.")
        
        with gr.Row():
            # Left column - Image input
            with gr.Column():
                image_input = gr.Image(
                    type="numpy",
                    label="Upload Marketing Material",
                    height=300,
                    width=400
                )
                
                with gr.Row(elem_classes="checkbox-group"):
                    us_sec = gr.Checkbox(value=True, label="US - SEC", interactive=True)
                    uk_fca = gr.Checkbox(value=True, label="UK - FCA", interactive=True)
                    eu = gr.Checkbox(value=True, label="EU", interactive=True)

                with gr.Row():
                    clear_btn = gr.ClearButton([image_input, us_sec, uk_fca, eu])
                    submit_btn = gr.Button("Submit")

            # Right column - Compliance report
            with gr.Column():
                output = gr.HTML(value=placeholder_html, label="Compliance Report")

        # Set up the submit action
        submit_btn.click(
            fn=analyze_with_regions,
            inputs=[image_input, us_sec, uk_fca, eu],
            outputs=output
        )

        # Set up the clear action to reset to defaults
        clear_btn.click(
            fn=reset_interface,
            inputs=[],
            outputs=[image_input, us_sec, uk_fca, eu, output]
        )

    return demo