{% extends 'base/base.html' %}
{% load static %}
{% load cotton %}

{% block title %}Cotton Components Test - ThrillWiki{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto space-y-12">
    <div class="text-center">
        <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
            Cotton Components Test Suite
        </h1>
        <p class="text-xl text-gray-600 dark:text-gray-400">
            Testing all 9 Phase 1 Cotton Components
        </p>
    </div>

    <!-- Component 1: Button Tests -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm border">
        <h2 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">
            <i class="fas fa-mouse-pointer mr-3 text-blue-500"></i>
            1. Button Component Tests
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Button Variants -->
            <div class="space-y-4">
                <h3 class="text-lg font-medium">Variants</h3>
                <div class="space-y-3">
                    <c-ui.button variant="default" text="Default Button" />
                    <c-ui.button variant="outline" text="Outline Button" />
                    <c-ui.button variant="ghost" text="Ghost Button" />
                    <c-ui.button variant="destructive" text="Destructive" />
                    <c-ui.button variant="secondary" text="Secondary" />
                </div>
            </div>

            <!-- Button Sizes -->
            <div class="space-y-4">
                <h3 class="text-lg font-medium">Sizes</h3>
                <div class="space-y-3">
                    <c-ui.button size="sm" text="Small Button" />
                    <c-ui.button size="default" text="Default Size" />
                    <c-ui.button size="lg" text="Large Button" />
                    <c-ui.button size="icon" icon_left="fas fa-heart" />
                </div>
            </div>

            <!-- Interactive Features -->
            <div class="space-y-4">
                <h3 class="text-lg font-medium">Interactive</h3>
                <div class="space-y-3">
                    <c-ui.button 
                        text="Alpine.js Click" 
                        x_data="{clicked: false}"
                        x_on="@click='clicked = !clicked; $el.textContent = clicked ? \"Clicked!\" : \"Alpine.js Click\"'"
                    />
                    <c-ui.button 
                        text="HTMX Test"
                        hx_get="/"
                        hx_target="#htmx-result"
                        hx_swap="innerHTML"
                    />
                    <div id="htmx-result" class="text-sm text-gray-600 dark:text-gray-400 p-2 border rounded">
                        HTMX result will appear here
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Component 2: Card Tests -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm border">
        <h2 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">
            <i class="fas fa-square mr-3 text-green-500"></i>
            2. Card Component Tests
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Basic Card -->
            <c-ui.card 
                title="Test Card Title"
                description="This is a test description for the card component."
            >
                <c-slot:content>
                    <p class="text-gray-600 dark:text-gray-400">
                        This is the main content area of the card component.
                    </p>
                </c-slot:content>
                <c-slot:footer>
                    <div class="flex justify-end space-x-2">
                        <c-ui.button variant="outline" size="sm" text="Cancel" />
                        <c-ui.button size="sm" text="Save" />
                    </div>
                </c-slot:footer>
            </c-ui.card>

            <!-- Complex Card -->
            <c-ui.card>
                <c-slot:header>
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold">Complex Card</h3>
                        <c-ui.status_badge status="OPERATIONAL" />
                    </div>
                </c-slot:header>
                <c-slot:content>
                    <div class="space-y-3">
                        <c-ui.input placeholder="Test input in card" />
                        <p class="text-sm text-gray-600 dark:text-gray-400">
                            Testing nested components within cards.
                        </p>
                    </div>
                </c-slot:content>
            </c-ui.card>
        </div>
    </section>

    <!-- Component 3: Input Tests -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm border">
        <h2 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">
            <i class="fas fa-keyboard mr-3 text-purple-500"></i>
            3. Input Component Tests
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-4">
                <h3 class="text-lg font-medium">Input Types</h3>
                <c-ui.input type="text" placeholder="Text input" name="test-text" />
                <c-ui.input type="email" placeholder="Email input" name="test-email" />
                <c-ui.input type="password" placeholder="Password input" name="test-password" />
                <c-ui.input type="number" placeholder="Number input" name="test-number" />
            </div>

            <div class="space-y-4" x-data="{inputValue: 'Hello Alpine!'}">
                <h3 class="text-lg font-medium">Alpine.js Integration</h3>
                <c-ui.input 
                    placeholder="Alpine.js x-model"
                    x_model="inputValue"
                />
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Value: <span x-text="inputValue"></span>
                </p>
                <c-ui.input 
                    placeholder="HTMX trigger"
                    hx_post="/"
                    hx_target="#input-result"
                    hx_trigger="keyup changed delay:500ms"
                />
                <div id="input-result" class="text-sm text-gray-600 dark:text-gray-400 p-2 border rounded">
                    HTMX input result
                </div>
            </div>
        </div>
    </section>

    <!-- Component 4: Status Badge Tests -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm border">
        <h2 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">
            <i class="fas fa-tag mr-3 text-yellow-500"></i>
            4. Status Badge Component Tests
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="space-y-3">
                <h3 class="text-lg font-medium">Statuses</h3>
                <div class="space-y-2">
                    <c-ui.status_badge status="OPERATIONAL" />
                    <c-ui.status_badge status="TEMPORARILY_CLOSED" />
                    <c-ui.status_badge status="PERMANENTLY_CLOSED" />
                    <c-ui.status_badge status="UNKNOWN" />
                </div>
            </div>

            <div class="space-y-3">
                <h3 class="text-lg font-medium">Sizes</h3>
                <div class="space-y-2">
                    <c-ui.status_badge status="OPERATIONAL" size="sm" />
                    <c-ui.status_badge status="OPERATIONAL" size="default" />
                    <c-ui.status_badge status="OPERATIONAL" size="lg" />
                </div>
            </div>

            <div class="space-y-3">
                <h3 class="text-lg font-medium">Custom Content</h3>
                <c-ui.status_badge status="OPERATIONAL">
                    <c-slot:status-text>Custom Status Text</c-slot:status-text>
                </c-ui.status_badge>
            </div>
        </div>
    </section>

    <!-- Component 5: Pagination Tests -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm border">
        <h2 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">
            <i class="fas fa-list mr-3 text-indigo-500"></i>
            5. Pagination Component Tests
        </h2>
        
        <div class="space-y-6">
            <p class="text-gray-600 dark:text-gray-400">
                Testing pagination with mock page object data:
            </p>
            
            <!-- Mock pagination object for testing -->
            <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                {% with mock_paginator=page_obj %}
                <script>
                    // Mock page object for testing
                    const mockPageObj = {
                        has_previous: true,
                        has_next: true,
                        previous_page_number: 1,
                        next_page_number: 3,
                        number: 2,
                        start_index: 11,
                        end_index: 20,
                        paginator: {
                            count: 100,
                            page_range: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        }
                    };
                </script>
                
                <!-- Note: This would normally use Django's paginator, showing static layout for visual testing -->
                <div class="flex items-center justify-between px-2">
                    <div class="flex-1 flex justify-between sm:hidden">
                        <a href="?page=1" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                            Previous
                        </a>
                        <a href="?page=3" class="ml-3 relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                            Next
                        </a>
                    </div>
                    
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700 dark:text-gray-300">
                                Showing <span class="font-medium">11</span> to <span class="font-medium">20</span> of <span class="font-medium">100</span> results
                            </p>
                        </div>
                        
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                                <a href="?page=1" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fas fa-chevron-left h-5 w-5"></i>
                                </a>
                                
                                <a href="?page=1" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a>
                                <span class="relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-50 text-sm font-medium text-blue-600">2</span>
                                <a href="?page=3" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a>
                                
                                <a href="?page=3" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fas fa-chevron-right h-5 w-5"></i>
                                </a>
                            </nav>
                        </div>
                    </div>
                </div>
                {% endwith %}
            </div>
        </div>
    </section>

    <!-- Component 6: Search Form Tests -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm border">
        <h2 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">
            <i class="fas fa-search mr-3 text-red-500"></i>
            6. Search Form Component Tests
        </h2>
        
        <div class="space-y-6">
            <c-ui.search_form 
                placeholder="Search parks and rides..."
                show_sort="true"
                form_classes="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg border"
            >
                <c-slot:filters>
                    <div>
                        <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type</label>
                        <select name="type" id="type" class="block w-full px-3 py-2 border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">All Types</option>
                            <option value="park">Parks</option>
                            <option value="ride">Rides</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="status" value="operational" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Operational</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="status" value="closed" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Closed</span>
                            </label>
                        </div>
                    </div>
                </c-slot:filters>
                
                <c-slot:sort-options>
                    <div class="flex items-center space-x-2">
                        <label for="ordering" class="text-sm font-medium text-gray-700 dark:text-gray-300">Sort by:</label>
                        <select name="ordering" id="ordering" class="block px-3 py-2 border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <option value="name">Name (A-Z)</option>
                            <option value="-name">Name (Z-A)</option>
                            <option value="created_at">Newest First</option>
                            <option value="-created_at">Oldest First</option>
                        </select>
                    </div>
                </c-slot:sort-options>
            </c-ui.search_form>
        </div>
    </section>

    <!-- Component 7: Login Form Tests -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm border">
        <h2 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">
            <i class="fas fa-sign-in-alt mr-3 text-teal-500"></i>
            7. Login Form Component Tests
        </h2>
        
        <div class="max-w-md mx-auto">
            <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg">
                <h3 class="text-lg font-medium mb-4 text-center">Test Login Form</h3>
                
                <c-auth.login_form 
                    button_text="Test Sign In"
                    show_remember="true"
                    show_forgot_password="true"
                    hx_target="#login-test-result"
                    hx_swap="innerHTML"
                />
                
                <div id="login-test-result" class="mt-4 p-3 bg-white dark:bg-gray-800 rounded border text-center text-sm text-gray-600 dark:text-gray-400">
                    HTMX login form result will appear here
                </div>
            </div>
        </div>
    </section>

    <!-- Component 8 & 9: Turnstile Widget Tests -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm border">
        <h2 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">
            <i class="fas fa-shield-alt mr-3 text-orange-500"></i>
            8 & 9. Turnstile Widget Component Tests
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-4">
                <h3 class="text-lg font-medium">Normal Turnstile Widget</h3>
                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                    <c-auth.turnstile_widget site_key="test-site-key" />
                </div>
            </div>

            <div class="space-y-4">
                <h3 class="text-lg font-medium">Empty Turnstile Widget (DEBUG Mode)</h3>
                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                    <c-auth.turnstile_empty 
                        show_debug_message="true"
                        debug_message="Turnstile disabled for component testing"
                    />
                </div>
            </div>
        </div>
    </section>

    <!-- Test Results Summary -->
    <section class="bg-green-50 dark:bg-green-900/20 rounded-lg p-8 border border-green-200 dark:border-green-700">
        <h2 class="text-2xl font-semibold mb-6 text-green-800 dark:text-green-200">
            <i class="fas fa-check-circle mr-3"></i>
            Test Results Summary
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center">
                <div class="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">9</div>
                <p class="text-green-700 dark:text-green-300">Components Tested</p>
            </div>
            <div class="text-center" id="js-test-status">
                <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2" id="js-status">?</div>
                <p class="text-blue-700 dark:text-blue-300">JavaScript Status</p>
            </div>
            <div class="text-center" id="responsive-test">
                <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">✓</div>
                <p class="text-purple-700 dark:text-purple-300">Responsive Design</p>
            </div>
        </div>
        
        <div class="mt-6 p-4 bg-white dark:bg-gray-800 rounded border">
            <h3 class="font-medium mb-3">JavaScript Test Results:</h3>
            <div id="test-results" class="text-sm space-y-1">
                <div class="text-gray-600 dark:text-gray-400">Running JavaScript tests...</div>
            </div>
        </div>
    </section>
</div>

<!-- JavaScript for testing -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const testResults = document.getElementById('test-results');
    const jsStatus = document.getElementById('js-status');
    
    // Test Alpine.js availability
    let tests = [];
    
    if (typeof Alpine !== 'undefined') {
        tests.push('✓ Alpine.js loaded successfully');
        jsStatus.textContent = '✓';
        jsStatus.className = 'text-3xl font-bold text-green-600 dark:text-green-400 mb-2';
    } else {
        tests.push('✗ Alpine.js not loaded');
        jsStatus.textContent = '✗';
        jsStatus.className = 'text-3xl font-bold text-red-600 dark:text-red-400 mb-2';
    }
    
    // Test HTMX availability
    if (typeof htmx !== 'undefined') {
        tests.push('✓ HTMX loaded successfully');
    } else {
        tests.push('✗ HTMX not loaded');
    }
    
    // Test for console errors
    let hasErrors = false;
    const originalError = console.error;
    const originalWarn = console.warn;
    
    console.error = function(...args) {
        hasErrors = true;
        originalError.apply(console, args);
    };
    
    console.warn = function(...args) {
        if (args[0] && args[0].includes && args[0].includes('Alpine Expression Error')) {
            hasErrors = true;
        }
        originalWarn.apply(console, args);
    };
    
    setTimeout(() => {
        if (!hasErrors) {
            tests.push('✓ No console errors detected');
        } else {
            tests.push('✗ Console errors detected');
        }
        
        testResults.innerHTML = tests.map(test => 
            `<div class="${test.startsWith('✓') ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}">${test}</div>`
        ).join('');
        
        console.error = originalError;
        console.warn = originalWarn;
    }, 1000);
});
</script>
{% endblock %}