import badgui as bg

def create_card_examples():
    """Create comprehensive card examples similar to NiceGUI and Quasar."""
    
    with bg.page("/", "CardExamples", "BadGUI Card Examples"):
        bg.label("🎴 BadGUI Card Component Examples").classes("text-h2 text-center q-mb-xl")
        
        # Basic Cards Section
        bg.label("Basic Cards").classes("text-h4 q-mb-lg")
        
        with bg.row(classes="q-gutter-lg q-mb-xl") as basic_cards:
            
            # Simple card
            with bg.card(classes="max-width-sm") as simple_card: 
                bg.label("Simple Card").classes("text-h6 q-mb-md")
                bg.label("This is a basic card with just text content and automatic padding.").classes("text-body2")
            
            # Card with shadow removed
            with bg.card(classes="no-shadow border max-width-sm q-pa-md") as no_shadow:
                bg.label("No Shadow Card").classes("text-h6 q-mb-md")
                bg.label("This card has no shadow and uses a border instead.").classes("text-body2")
            
            # Flat and bordered card using props
            with bg.card(classes="max-width-sm q-pa-md").props("flat bordered") as flat_card:
                bg.label("Flat & Bordered").classes("text-h6 q-mb-md")  
                bg.label("This card uses Quasar's flat and bordered props.").classes("text-body2")
        
        # Cards with Sections
        bg.label("Cards with Sections").classes("text-h4 q-mb-lg")
        
        with bg.row().classes("q-gutter-lg q-mb-xl") as section_cards:
            
            # Card with sections
            with bg.card().classes("max-width-md") as sectioned_card:
                with bg.card_section():
                    bg.label("Card Header").classes("text-h6")
                    bg.label("This is the header section of the card").classes("text-body2 text-grey-7")
                
                with bg.card_section():
                    bg.label("Main Content").classes("text-subtitle1 q-mb-sm")
                    bg.label("This is the main content section with more detailed information about the card content. It can contain multiple paragraphs and other components.").classes("text-body2")
                
                with bg.card_actions().classes("q-px-md q-pb-md"):
                    bg.button("Action 1").classes("q-btn-primary")
                    bg.button("Action 2").classes("q-btn-outline")
            
            # Profile card example
            with bg.card().classes("max-width-sm") as profile_card:
                with bg.card_section().classes("text-center"):
                    bg.label("👤").classes("text-6xl q-mb-md")
                    bg.label("John Doe").classes("text-h6")
                    bg.label("Software Developer").classes("text-body2 text-grey-6")
                
                with bg.card_section():
                    bg.label("Skills").classes("text-subtitle2 q-mb-sm")
                    with bg.row().classes("q-gutter-xs"):
                        bg.label("Python").classes("bg-blue-100 text-blue-8 px-2 py-1 rounded")
                        bg.label("Vue.js").classes("bg-green-100 text-green-8 px-2 py-1 rounded") 
                        bg.label("Quasar").classes("bg-purple-100 text-purple-8 px-2 py-1 rounded")
                
                with bg.card_actions().classes("justify-end"):
                    bg.button("Contact").classes("q-btn-primary")
                    bg.button("View Profile").classes("q-btn-outline")
        
        # Interactive Cards
        bg.label("Interactive Cards").classes("text-h4 q-mb-lg")
        
        with bg.row().classes("q-gutter-lg q-mb-xl") as interactive_cards:
            
            # Form card
            with bg.card().classes("max-width-md") as form_card:
                with bg.card_section():
                    bg.label("Contact Form").classes("text-h6 q-mb-md")
                    
                    with bg.column().classes("q-gutter-md"):
                        bg.input(placeholder="Your Name").props("filled outlined")
                        bg.input(placeholder="Email Address").props("filled outlined type=email")
                        bg.input(placeholder="Subject").props("filled outlined")
                        bg.input(placeholder="Your message...").props("filled outlined type=textarea rows=3")
                
                with bg.card_actions().classes("q-px-md q-pb-md"):
                    bg.button("Send Message").classes("q-btn-primary")
                    bg.button("Clear").classes("q-btn-outline")
            
            # Stats card
            with bg.card().classes("max-width-sm bg-gradient-to-br from-blue-500 to-blue-700 text-white") as stats_card:
                with bg.card_section().classes("text-center"):
                    bg.label("📊").classes("text-4xl q-mb-md")
                    bg.label("Monthly Sales").classes("text-h6 q-mb-sm")
                    bg.label("$45,678").classes("text-h3 q-mb-sm")
                    bg.label("+12.5% vs last month").classes("text-body2 opacity-80")
                
                with bg.card_actions().classes("justify-center"):
                    bg.button("View Details").classes("q-btn-outline text-white")
        
        # Product Cards
        bg.label("Product Cards").classes("text-h4 q-mb-lg")
        
        with bg.row().classes("q-gutter-lg q-mb-xl") as product_cards:
            
            # Product card 1
            with bg.card().classes("max-width-xs") as product1:
                with bg.card_section().classes("text-center"):
                    bg.label("📱").classes("text-6xl q-mb-md")
                    bg.label("Smartphone").classes("text-h6")
                    bg.label("Latest model with amazing features").classes("text-body2 text-grey-7 q-mb-md")
                    bg.label("$699").classes("text-h5 text-green-6")
                
                with bg.card_actions():
                    bg.button("Add to Cart").classes("q-btn-primary full-width")
            
            # Product card 2  
            with bg.card().classes("max-width-xs") as product2:
                with bg.card_section().classes("text-center"):
                    bg.label("💻").classes("text-6xl q-mb-md")
                    bg.label("Laptop").classes("text-h6")
                    bg.label("High-performance laptop for professionals").classes("text-body2 text-grey-7 q-mb-md")
                    bg.label("$1,299").classes("text-h5 text-green-6")
                
                with bg.card_actions():
                    bg.button("Add to Cart").classes("q-btn-primary full-width")
            
            # Product card 3
            with bg.card().classes("max-width-xs") as product3:
                with bg.card_section().classes("text-center"):
                    bg.label("🎧").classes("text-6xl q-mb-md")
                    bg.label("Headphones").classes("text-h6")
                    bg.label("Premium wireless headphones").classes("text-body2 text-grey-7 q-mb-md")
                    bg.label("$199").classes("text-h5 text-green-6")
                
                with bg.card_actions():
                    bg.button("Add to Cart").classes("q-btn-primary full-width")
        
        # Advanced Cards
        bg.label("Advanced Card Examples").classes("text-h4 q-mb-lg")
        
        with bg.row().classes("q-gutter-lg q-mb-xl") as advanced_cards:
            
            # Dashboard card
            with bg.card().classes("max-width-lg") as dashboard_card:
                with bg.card_section():
                    bg.label("📈 Analytics Dashboard").classes("text-h6 q-mb-md")
                    
                    with bg.row().classes("q-gutter-md"):
                        with bg.column().classes("col"):
                            bg.label("Page Views").classes("text-body2 text-grey-7")
                            bg.label("124,567").classes("text-h5 text-blue-6")
                        
                        with bg.column().classes("col"):
                            bg.label("Unique Visitors").classes("text-body2 text-grey-7")
                            bg.label("23,456").classes("text-h5 text-green-6")
                        
                        with bg.column().classes("col"):
                            bg.label("Conversion Rate").classes("text-body2 text-grey-7")
                            bg.label("3.4%").classes("text-h5 text-orange-6")
                
                with bg.card_actions().classes("justify-between"):
                    bg.label("Last updated: 5 minutes ago").classes("text-body2 text-grey-6")
                    bg.button("Refresh").classes("q-btn-outline")
            
            # Notification card
            with bg.card().classes("max-width-sm border-l-4 border-blue-500") as notification_card:
                with bg.card_section():
                    with bg.row().classes("items-center q-gutter-md"):
                        bg.label("ℹ️").classes("text-2xl text-blue-500")
                        with bg.column():
                            bg.label("New Update Available").classes("text-h6")
                            bg.label("Version 2.1.0 is now available with new features and bug fixes.").classes("text-body2 text-grey-7")
                
                with bg.card_actions():
                    bg.button("Update Now").classes("q-btn-primary")
                    bg.button("Later").classes("q-btn-outline")

if __name__ == "__main__":
    create_card_examples()
    
    # 🚀 INSTANT DEVELOPMENT - One command does it all!
    bg.dev(port=3000, project_name="card-examples")