import gradio as gr

def calculate(num1, operation, num2):
    """Perform calculation based on selected operation."""
    operations = {
        "➕ Add": lambda a, b: a + b,
        "➖ Subtract": lambda a, b: a - b,
        "✖️ Multiply": lambda a, b: a * b,
        "➗ Divide": lambda a, b: a / b if b != 0 else None
    }
    
    if operation == "➗ Divide" and num2 == 0:
        raise gr.Error("Cannot divide by zero!")
    
    result = operations[operation](num1, num2)
    return result

# Custom CSS for mobile-first, modern design
custom_css = """
/* Mobile-first responsive design */
.calculator-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 1rem;
}

.header-section {
    text-align: center;
    margin-bottom: 2rem;
}

.header-section h1 {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calculator-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

/* Input styling */
.input-group {
    margin-bottom: 1.5rem;
}

/* Button styling */
button.primary {
    width: 100%;
    padding: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

/* Result display */
.result-display {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 1rem;
    margin: 1.5rem 0;
}

/* Examples section */
.examples-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile optimization */
@media (max-width: 640px) {
    .calculator-card {
        padding: 1.5rem 1rem;
    }
    
    .header-section h1 {
        font-size: 1.75rem;
    }
}

/* Smooth transitions */
* {
    transition: all 0.2s ease;
}
"""

with gr.Blocks(fill_height=True) as demo:
    gr.HTML("""
        <div class="header-section">
            <h1>🧮 Calculator</h1>
            <p style="color: #888; font-size: 0.95rem;">
                Simple & elegant calculator built with 
                <a href="https://huggingface.co/spaces/akhaliq/anycoder" 
                   target="_blank" 
                   style="color: #667eea; text-decoration: none; font-weight: 600;">
                    anycoder
                </a>
            </p>
        </div>
    """)
    
    with gr.Column(elem_classes="calculator-container"):
        # Input Section
        num1 = gr.Number(
            label="First Number",
            value=0,
            container=True,
            scale=1
        )
        
        operation = gr.Radio(
            choices=["➕ Add", "➖ Subtract", "✖️ Multiply", "➗ Divide"],
            value="➕ Add",
            label="Operation",
            container=True
        )
        
        num2 = gr.Number(
            label="Second Number",
            value=0,
            container=True,
            scale=1
        )
        
        # Calculate Button
        calc_btn = gr.Button(
            "Calculate",
            variant="primary",
            size="lg",
            scale=1
        )
        
        # Result Display
        result = gr.Number(
            label="Result",
            interactive=False,
            container=True,
            scale=1,
            show_label=True
        )
        
        # Examples Section
        gr.Markdown("### Quick Examples", elem_classes="examples-header")
        gr.Examples(
            examples=[
                [100, "➕ Add", 50],
                [75, "➖ Subtract", 25],
                [12, "✖️ Multiply", 8],
                [144, "➗ Divide", 12],
            ],
            inputs=[num1, operation, num2],
            outputs=result,
            fn=calculate,
            cache_examples=False,
            label=None
        )
    
    # Event Handlers
    calc_btn.click(
        fn=calculate,
        inputs=[num1, operation, num2],
        outputs=result,
        api_visibility="public",
        api_name="calculate"
    )
    
    # Also trigger on Enter key
    num2.submit(
        fn=calculate,
        inputs=[num1, operation, num2],
        outputs=result
    )

if __name__ == "__main__":
    demo.launch(
        theme=gr.themes.Soft(
            primary_hue="indigo",
            secondary_hue="purple",
            neutral_hue="slate",
            font=gr.themes.GoogleFont("Inter"),
            text_size="lg",
            spacing_size="lg",
            radius_size="lg"
        ).set(
            button_primary_background_fill="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
            button_primary_background_fill_hover="linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%)",
            block_title_text_weight="600",
            block_label_text_weight="500",
        ),
        css=custom_css,
        footer_links=[
            {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
        ]
    )