"""
Simplified Card Test
Demonstrates the new simplified card component usage.
"""

import badgui as bg

with bg.page("/", "SimplifiedCards", "Simplified Card Test"):
    with bg.column() as main_col:
        main_col.classes("q-pa-lg q-gutter-md")
        bg.label("Simplified Card Examples").classes("text-h3 q-mb-lg")
        
        # 1. Simple card with title (automatic sections)
        with bg.card(title="User Information"):
            bg.label("This card automatically gets a title section and content section!")
            name_input = bg.input("Enter your name")
            name_input.classes("q-mb-md")
            bg.button_with_handler("Submit", js_handler="handleSubmit").classes("q-btn-primary")
        
        # 2. Simple card without title (just a container)
        with bg.card():
            bg.label("Simple Card Content").classes("text-h5 q-mb-md")
            bg.label("This card works like a simple container with card styling.")
            bg.label("No need for card_section or card_actions!")
            
            with bg.row():
                bg.button_with_handler("Action 1", js_handler="action1").classes("q-btn-primary q-mr-sm")
                bg.button_with_handler("Action 2", js_handler="action2").classes("q-btn-secondary")
        
        # 3. Flat card (no shadow)
        with bg.card(title="Settings", flat=True):
            bg.label("This is a flat card with no shadow").classes("q-mb-md")
            
            with bg.row():
                bg.label("Dark Mode:")
                # You could add a switch here
                bg.button_with_handler("Toggle", js_handler="toggleDarkMode").classes("q-btn-outline")
        
        # 4. Card with custom classes
        with bg.card(title="Custom Styled Card") as custom_card:
            custom_card.classes("bg-primary text-white")
            
            bg.label("This card has custom background and text color")
            bg.button_with_handler("White Button", js_handler="whiteButton").classes("q-btn text-primary bg-white")

# Simple JavaScript handlers
bg.script("""
const handleSubmit = () => {
    console.log('Submit clicked');
};

const action1 = () => {
    console.log('Action 1 clicked');
};

const action2 = () => {
    console.log('Action 2 clicked');
};

const toggleDarkMode = () => {
    console.log('Dark mode toggled');
};

const whiteButton = () => {
    console.log('White button clicked');
};
""")

if __name__ == "__main__":
    print("🧪 Simplified Card Test")
    print("Testing the new simplified card component")
    
    # Build and run
    bg.dev(port=3022)