//! # Content Showcase Example
//! 
//! Comprehensive demonstration of content components including
//! cards, grids, content management, and various layout patterns.

use rustelo_components::{
    content::{
        UnifiedContentCard, 
        ContentManager, 
        HtmlContent, 
        SimpleContentGrid
    },
    navigation::{BrandHeader, Footer},
    ui::SpaLink,
    filter::{UnifiedCategoryFilter, FilterItem},
};
use leptos::*;

/// Content showcase demonstrating various content display patterns
#[component]  
pub fn ContentShowcase() -> impl IntoView {
    // Content filter state
    let (active_filter, set_active_filter) = create_signal("all".to_string());
    
    // Sample content data
    let content_items = create_rw_signal(vec![
        ContentItem::new("1", "blog", "Getting Started with Rustelo", "Learn how to build modern web applications with Rust and Leptos.", "/blog/getting-started", Some("/images/blog1.jpg")),
        ContentItem::new("2", "tutorial", "Advanced Component Patterns", "Explore advanced techniques for building reusable components.", "/tutorials/advanced-patterns", Some("/images/tutorial1.jpg")),
        ContentItem::new("3", "news", "Rustelo 2.0 Released", "Major update brings new features and performance improvements.", "/news/v2-release", Some("/images/news1.jpg")),
        ContentItem::new("4", "blog", "WebAssembly Performance Tips", "Optimize your WASM applications for better performance.", "/blog/wasm-performance", Some("/images/blog2.jpg")),
        ContentItem::new("5", "tutorial", "Building a Blog with Rustelo", "Step-by-step guide to creating a full-featured blog.", "/tutorials/blog-tutorial", Some("/images/tutorial2.jpg")),
        ContentItem::new("6", "showcase", "Community Project Spotlight", "Amazing projects built by the Rustelo community.", "/showcase/community", Some("/images/showcase1.jpg")),
    ]);
    
    // Filter items for the category filter
    let filter_items = vec![
        FilterItem::new("all", "All Content").with_count(6),
        FilterItem::new("blog", "Blog Posts").with_count(2),
        FilterItem::new("tutorial", "Tutorials").with_count(2), 
        FilterItem::new("news", "News").with_count(1),
        FilterItem::new("showcase", "Showcase").with_count(1),
    ];
    
    // Filtered content based on active filter
    let filtered_content = create_memo(move |_| {
        let filter = active_filter.get();
        let items = content_items.get();
        
        if filter == "all" {
            items
        } else {
            items.into_iter().filter(|item| item.category == filter).collect()
        }
    });

    view! {
        <div class="min-h-screen bg-gray-50">
            <BrandHeader brand_name="Content Showcase" />
            
            <main class="container mx-auto px-4 py-8">
                // Introduction section
                <UnifiedContentCard 
                    title="Content Components Showcase"
                    subtitle="Explore various ways to display and organize content"
                    class="mb-8"
                >
                    <p class="mb-4">
                        "This showcase demonstrates the content components available in the Rustelo foundation library. "
                        "You'll see cards, grids, content management, HTML rendering, and filtering in action."
                    </p>
                    
                    <div class="flex flex-wrap gap-4">
                        <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
                            "📋 Content Cards"
                        </span>
                        <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
                            "🔍 Category Filtering"
                        </span>
                        <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">
                            "🎨 Grid Layouts"
                        </span>
                        <span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm">
                            "⚡ Dynamic Content"
                        </span>
                    </div>
                </UnifiedContentCard>
                
                // Content filtering section
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">"Filterable Content Grid"</h2>
                    <p class="text-gray-600 mb-6">
                        "Use the category filter below to see content filtering in action. "
                        "The grid updates dynamically based on your selection."
                    </p>
                    
                    // Category filter
                    <UnifiedCategoryFilter 
                        items=filter_items
                        on_filter=move |category| {
                            set_active_filter.set(category);
                        }
                        class="mb-6"
                    />
                    
                    // Dynamic content grid
                    <SimpleContentGrid 
                        columns=3
                        gap="1.5rem"
                        responsive=true
                        class="mb-8"
                    >
                        <For
                            each=move || filtered_content.get()
                            key=|item| item.id.clone()
                            children=move |item| {
                                view! {
                                    <UnifiedContentCard 
                                        title=item.title.clone()
                                        subtitle=item.excerpt.clone()
                                        image_url=item.image_url.clone()
                                        class="h-full"
                                    >
                                        <div class="flex justify-between items-center mt-4">
                                            <span class=format!(
                                                "px-2 py-1 text-xs rounded-full {}",
                                                match item.category.as_str() {
                                                    "blog" => "bg-blue-100 text-blue-800",
                                                    "tutorial" => "bg-green-100 text-green-800",
                                                    "news" => "bg-red-100 text-red-800",
                                                    "showcase" => "bg-purple-100 text-purple-800",
                                                    _ => "bg-gray-100 text-gray-800",
                                                }
                                            )>
                                                {item.category.clone()}
                                            </span>
                                            
                                            <SpaLink 
                                                href=item.url.clone()
                                                class="text-blue-600 hover:text-blue-800 font-medium text-sm"
                                            >
                                                "Read More →"
                                            </SpaLink>
                                        </div>
                                    </UnifiedContentCard>
                                }
                            }
                        />
                    </SimpleContentGrid>
                    
                    // Results counter
                    <div class="text-center text-gray-600">
                        {move || {
                            let count = filtered_content.get().len();
                            let filter = active_filter.get();
                            let filter_text = if filter == "all" { "all content" } else { &filter };
                            format!("Showing {} {} items", count, filter_text)
                        }}
                    </div>
                </div>
                
                // HTML Content rendering demo
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">"HTML Content Rendering"</h2>
                    <p class="text-gray-600 mb-6">
                        "The HtmlContent component safely renders HTML with built-in sanitization."
                    </p>
                    
                    <div class="grid lg:grid-cols-2 gap-6">
                        <UnifiedContentCard title="Safe HTML Rendering" class="h-full">
                            <HtmlContent 
                                html=r#"
                                    <h3>Rich Text Content</h3>
                                    <p>This HTML content is <strong>safely rendered</strong> with sanitization enabled.</p>
                                    <ul>
                                        <li>✅ Safe HTML tags are allowed</li>
                                        <li>🛡️ Dangerous scripts are removed</li>
                                        <li>🎨 Styling is preserved</li>
                                    </ul>
                                    <blockquote>
                                        <em>"Security and functionality working together."</em>
                                    </blockquote>
                                "#
                                sanitize=true
                                class="prose prose-sm"
                            />
                        </UnifiedContentCard>
                        
                        <UnifiedContentCard title="Markdown-style Content" class="h-full">
                            <HtmlContent 
                                html=r#"
                                    <div class="markdown-content">
                                        <h3>📝 Code Example</h3>
                                        <pre><code>use rustelo_components::content::HtmlContent;

view! {
    &lt;HtmlContent 
        html="&lt;p&gt;Safe HTML&lt;/p&gt;"
        sanitize=true
    /&gt;
}</code></pre>
                                        <p>The component handles HTML rendering with configurable sanitization rules.</p>
                                    </div>
                                "#
                                sanitize=true  
                                class="prose prose-sm"
                            />
                        </UnifiedContentCard>
                    </div>
                </div>
                
                // Content Manager demo
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">"Dynamic Content Management"</h2>
                    <p class="text-gray-600 mb-6">
                        "The ContentManager component handles dynamic content loading and display with various layout options."
                    </p>
                    
                    <div class="space-y-6">
                        // List layout
                        <UnifiedContentCard title="List Layout">
                            <ContentManager 
                                content_type="featured"
                                layout="list"
                                limit=3
                                class="space-y-4"
                            />
                        </UnifiedContentCard>
                        
                        // Card layout  
                        <UnifiedContentCard title="Card Layout">
                            <ContentManager 
                                content_type="recent"
                                layout="cards"
                                limit=4
                            />
                        </UnifiedContentCard>
                    </div>
                </div>
                
                // Layout variations
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">"Grid Layout Variations"</h2>
                    <p class="text-gray-600 mb-6">
                        "Different grid configurations for various content display needs."
                    </p>
                    
                    <div class="space-y-8">
                        // 2-column grid
                        <div>
                            <h3 class="text-lg font-semibold mb-4">"Two Column Grid"</h3>
                            <SimpleContentGrid columns=2 gap="2rem" responsive=true>
                                <UnifiedContentCard 
                                    title="Performance Optimization"
                                    image_url="/images/performance.jpg"
                                >
                                    <p>"Learn techniques to optimize your Rustelo applications for better performance and user experience."</p>
                                </UnifiedContentCard>
                                
                                <UnifiedContentCard 
                                    title="Testing Strategies" 
                                    image_url="/images/testing.jpg"
                                >
                                    <p>"Comprehensive testing approaches for Rust web applications using modern testing frameworks."</p>
                                </UnifiedContentCard>
                            </SimpleContentGrid>
                        </div>
                        
                        // 4-column grid  
                        <div>
                            <h3 class="text-lg font-semibold mb-4">"Four Column Grid"</h3>
                            <SimpleContentGrid columns=4 gap="1rem" responsive=true>
                                <UnifiedContentCard title="🚀 Fast" class="text-center">
                                    <p class="text-sm">"Lightning-fast development with Rust's performance."</p>
                                </UnifiedContentCard>
                                
                                <UnifiedContentCard title="🛡️ Safe" class="text-center">
                                    <p class="text-sm">"Memory safety without garbage collection."</p>
                                </UnifiedContentCard>
                                
                                <UnifiedContentCard title="🔧 Productive" class="text-center">
                                    <p class="text-sm">"Rich type system and ownership model."</p>
                                </UnifiedContentCard>
                                
                                <UnifiedContentCard title="🌐 Modern" class="text-center">
                                    <p class="text-sm">"WebAssembly and modern web standards."</p>
                                </UnifiedContentCard>
                            </SimpleContentGrid>
                        </div>
                        
                        // Mixed content sizes
                        <div>
                            <h3 class="text-lg font-semibold mb-4">"Mixed Content Sizes"</h3>
                            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
                                <div class="md:col-span-2">
                                    <UnifiedContentCard 
                                        title="Featured Article"
                                        subtitle="In-depth tutorial on advanced Rustelo patterns"
                                        image_url="/images/featured.jpg"
                                        class="h-full"
                                    >
                                        <p>"This comprehensive guide covers advanced component patterns, state management, and performance optimization techniques for building scalable Rustelo applications."</p>
                                        
                                        <div class="mt-4 flex gap-2">
                                            <SpaLink href="/featured" class="btn btn-primary">"Read Full Article"</SpaLink>
                                            <SpaLink href="/tutorials" class="btn btn-secondary">"More Tutorials"</SpaLink>
                                        </div>
                                    </UnifiedContentCard>
                                </div>
                                
                                <UnifiedContentCard title="Quick Tips" class="h-full">
                                    <ul class="text-sm space-y-2">
                                        <li>"💡 Use memos for expensive computations"</li>
                                        <li>"🔄 Batch state updates when possible"</li>
                                        <li>"📦 Code-split large components"</li>
                                        <li>"🎨 Use CSS-in-Rust for theming"</li>
                                    </ul>
                                </UnifiedContentCard>
                                
                                <UnifiedContentCard title="Resources" class="h-full">
                                    <div class="space-y-2 text-sm">
                                        <SpaLink href="/docs" class="block text-blue-600 hover:text-blue-800">
                                            "📚 Documentation"
                                        </SpaLink>
                                        <SpaLink href="/examples" class="block text-blue-600 hover:text-blue-800">
                                            "💻 Code Examples"
                                        </SpaLink>
                                        <SpaLink href="/community" class="block text-blue-600 hover:text-blue-800">
                                            "👥 Community"
                                        </SpaLink>
                                        <SpaLink href="/github" class="block text-blue-600 hover:text-blue-800">
                                            "🐙 GitHub Repo"
                                        </SpaLink>
                                    </div>
                                </UnifiedContentCard>
                            </div>
                        </div>
                    </div>
                </div>
                
                // Loading states demo
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">"Loading States & Error Handling"</h2>
                    <p class="text-gray-600 mb-6">
                        "Content components with loading states and error boundaries for robust user experiences."
                    </p>
                    
                    <SimpleContentGrid columns=3 gap="1.5rem" responsive=true>
                        // Loading state demo
                        <UnifiedContentCard title="Loading State">
                            <div class="animate-pulse space-y-4">
                                <div class="h-4 bg-gray-200 rounded w-3/4"></div>
                                <div class="h-4 bg-gray-200 rounded w-1/2"></div>
                                <div class="h-4 bg-gray-200 rounded w-full"></div>
                            </div>
                            <div class="mt-4 text-center text-gray-500 text-sm">
                                "Loading content..."
                            </div>
                        </UnifiedContentCard>
                        
                        // Empty state demo
                        <UnifiedContentCard title="Empty State">
                            <div class="text-center py-8">
                                <div class="text-6xl mb-4">"📭"</div>
                                <p class="text-gray-500 mb-4">"No content available"</p>
                                <SpaLink href="/create" class="btn btn-primary btn-sm">
                                    "Create Content"
                                </SpaLink>
                            </div>
                        </UnifiedContentCard>
                        
                        // Error state demo
                        <UnifiedContentCard title="Error State">
                            <div class="text-center py-8">
                                <div class="text-6xl mb-4">"⚠️"</div>
                                <p class="text-red-600 mb-4">"Failed to load content"</p>
                                <button class="btn btn-secondary btn-sm">
                                    "Try Again"
                                </button>
                            </div>
                        </UnifiedContentCard>
                    </SimpleContentGrid>
                </div>
            </main>

            <Footer copyright="© 2024 Content Showcase Demo" />
        </div>
    }
}

// Helper struct for content items
#[derive(Debug, Clone)]
struct ContentItem {
    id: String,
    category: String,
    title: String,
    excerpt: String,
    url: String,
    image_url: Option<String>,
}

impl ContentItem {
    fn new(id: &str, category: &str, title: &str, excerpt: &str, url: &str, image_url: Option<&str>) -> Self {
        Self {
            id: id.to_string(),
            category: category.to_string(),
            title: title.to_string(),
            excerpt: excerpt.to_string(),
            url: url.to_string(),
            image_url: image_url.map(|s| s.to_string()),
        }
    }
}

/*
This comprehensive showcase demonstrates:

✅ **Content Display Patterns**
- Various card layouts and configurations
- Grid systems with responsive behavior
- Mixed content sizes and layouts

✅ **Dynamic Content Management**
- Content filtering and categorization
- Dynamic content loading with ContentManager
- Real-time content updates

✅ **HTML Rendering**
- Safe HTML content rendering with sanitization
- Support for rich text and markdown-style content
- Configurable sanitization rules

✅ **Layout Flexibility**
- Multiple grid column configurations
- Responsive grid behavior
- Mixed content sizing patterns

✅ **User Experience**
- Loading states and skeletons
- Empty state handling
- Error state management
- Interactive filtering

✅ **Content Organization**
- Category-based filtering
- Search and discovery patterns
- Content relationship management

To use these patterns in your application:

1. **Import required components:**
```rust
use rustelo_components::{
    content::*,
    filter::UnifiedCategoryFilter,
    ui::SpaLink,
};
```

2. **Customize content structures:**
- Replace ContentItem with your data models
- Adapt filtering logic to your categorization
- Customize card layouts for your content types

3. **Integrate with your data:**
- Connect ContentManager to your API
- Replace mock data with real content
- Add pagination and infinite scroll

4. **Style for your brand:**
- Customize CSS classes and colors
- Apply your design system
- Add animations and transitions

The showcase is fully responsive and accessible,
providing a solid foundation for content-rich applications.
*/