import gradio as gr

# List of color schemes for the entire table (5 color schemes)
color_schemes = [
    {"header": "#FFD700", "row_even": "#ADD8E6", "row_odd": "#FFB6C1", "border": "#FF6347"},  # Gold, Light Blue, Pink
    {"header": "#FF4500", "row_even": "#FFE4B5", "row_odd": "#FF6347", "border": "#8B0000"},  # Orange Red, Light Gold, Red
    {"header": "#98FB98", "row_even": "#E0FFFF", "row_odd": "#FFFAF0", "border": "#32CD32"},  # Light Green, Light Cyan, Ivory
    {"header": "#8A2BE2", "row_even": "#F0E68C", "row_odd": "#DA70D6", "border": "#800080"},  # Blue Violet, Khaki, Orchid
    {"header": "#20B2AA", "row_even": "#F0FFF0", "row_odd": "#F5FFFA", "border": "#006400"}   # Light Sea Green, Honeydew
]

color_index = 0  # This will track the current color scheme in the list

# Function to generate a colorful multiplication table for a given number
def generate_table(number):
    global color_index
    try:
        number = int(number)
        
        # Select the color scheme based on the color_index
        color_scheme = color_schemes[color_index]
        
        header_color = color_scheme["header"]
        even_row_color = color_scheme["row_even"]
        odd_row_color = color_scheme["row_odd"]
        border_color = color_scheme["border"]
        
        # Construct the multiplication table
        table = f"<h2 style='color:{header_color};'>📋 Multiplication Table for {number}:</h2><br>"
        table += f"<table style='border-collapse: collapse; width: 100%; text-align: center; border: 2px solid {border_color};'>"
        table += f"<thead><tr style='background-color: {header_color}; color: #000;'><th style='padding: 10px;'>Multiplier</th><th style='padding: 10px;'>Result</th></tr></thead>"
        
        for i in range(1, 11):
            # Alternate row colors based on even/odd rows
            row_color = even_row_color if i % 2 == 0 else odd_row_color
            table += f"<tr style='background-color: {row_color};'><td style='padding: 8px;'>{number} x {i}</td><td style='padding: 8px;'>{number * i}</td></tr>"
        
        table += "</table>"
        
        # Update color index to the next color scheme (cycle back to 0 after 5)
        color_index = (color_index + 1) % len(color_schemes)
        
        return table
    
    except ValueError:
        return "<h3 style='color:red;'>⚠️ Please enter a valid number!</h3>"

# Gradio interface
title = """
<h1 style='color:purple; text-shadow: 3px 3px 8px #FF6347, 0 0 25px #FFD700; font-family: "Poppins", sans-serif; font-size: 45px; animation: bounce 2s infinite;'>🌟 Multiplication Table Chatbot for Kids 🌟</h1>
"""

description = """
<h3 style='color:orange; text-shadow: 2px 2px 5px #FF6347, 0 0 15px #FF4500; font-family: "Comic Sans MS", sans-serif; font-size: 28px; animation: slideIn 3s;'>🎨 Welcome to the fun and colorful multiplication chatbot for kids! 🎨</h3>
<p style='color:blue; font-size: 22px; font-family: "Arial", sans-serif; text-shadow: 1px 1px 5px #1E90FF;'>
    Type a number to see its vibrant multiplication table!<br>
    <span style='color:red; font-size: 24px; font-weight: bold;'>Enter one number at a time.</span>
</p>
"""

# Define colorful input and output components
with gr.Blocks() as interface:
    gr.Markdown(title)
    gr.Markdown(description)
    
    with gr.Row():
        with gr.Column():
            input_box1 = gr.Number(
                label="🎲 Enter First Number",  # Adding the label back
                elem_id="input-box1"
            )
        with gr.Column():
            output_box1 = gr.HTML(
                label="<span style='color:crimson; font-size: 18px;'>Your Colorful Multiplication Table</span>",
                elem_id="output-box1"
            )
    
    generate_button = gr.Button("🎉 Generate Table 🎉", elem_id="generate-button")

    # Link input and output
    generate_button.click(
        fn=generate_table,
        inputs=input_box1,
        outputs=output_box1,
    )

# Add custom CSS for styling
interface.css = """
body {
    background: linear-gradient(135deg, #FFB6C1, #ADD8E6);
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
}
#input-box1 input {
    background-color: #E0FFFF;
    color: #008B8B;
    font-size: 18px;
    padding: 12px;
    border: 2px solid #20B2AA;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
#output-box1 {
    background-color: #FDF5E6;
    color: #8B0000;
    font-size: 16px;
    padding: 15px;
    border: 2px solid #FF4500;
    border-radius: 10px;
    overflow: auto;
}
#generate-button {
    background-color: #FFE4B5;
    color: #8B4513;
    font-size: 18px;
    padding: 12px 24px;
    border-radius: 10px;
    border: 2px solid #CD853F;
    cursor: pointer;
    transition: 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
#generate-button:hover {
    background-color: #FF6347;
    color: white;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}
h1, h3, p {
    animation: fadeIn 3s ease-out;
}

/* Hide label text only */
#input-box1 .gradio-label {
    display: none;  /* Hide the label */
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
"""
interface.launch()