import gradio as gr

def create_policy_modal_app():
    image_paths = [f"policy_page{i+1}.png" for i in range(5)]  # Adjust page count!

    modal_css = """
    .policy-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.7);
        overflow: auto;
        justify-content: center;
        align-items: center;
    }
    .policy-modal-content {
        background-color: white;
        margin: 2% auto;
        padding: 20px;
        width: 90%;
        max-width: 900px;
        border-radius: 8px;
        position: relative;
    }
    .close-btn {
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 24px;
        cursor: pointer;
        background: #222;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 5px 15px;
    }
    """

    images_html = "".join(
        f"<img src='file={path}' style='width:100%; margin-bottom:20px;' />" for path in image_paths
    )

    modal_html = f"""
    <div id="policyModal" class="policy-modal">
        <div class="policy-modal-content">
            <button class="close-btn" onclick="document.getElementById('policyModal').style.display='none';">×</button>
            {images_html}
        </div>
    </div>
    """

    with gr.Blocks(css=modal_css) as app:
        gr.HTML(modal_html)
        button = gr.Button("View Hate Speech Policy")

        button.click(fn=None, inputs=None, outputs=None, _js="""
            function() {
                const modal = document.getElementById('policyModal');
                if (modal) {
                    modal.style.display = 'flex';
                    document.body.style.overflow = 'hidden';
                }
                return [];
            }
        """)

        gr.HTML("""
        <script>
        document.addEventListener('click', function(e) {
            const modal = document.getElementById('policyModal');
            if (modal && e.target === modal) {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        });
        </script>
        """)

    return app

if __name__ == "__main__":
    app = create_policy_modal_app()
    app.launch()