{% load unfold %}

<!-- Django Commands Section -->
<div class="mt-8 w-full">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <div class="flex items-center justify-center w-8 h-8 bg-purple-100 dark:bg-purple-900/20 rounded-lg mr-3">
                <span class="material-icons text-purple-600 dark:text-purple-400 text-lg">terminal</span>
            </div>
            <h2 class="text-xl font-semibold text-font-important-light dark:text-font-important-dark">
                Django Commands
            </h2>
            <span class="ml-4 text-xs text-font-subtle-light dark:text-font-subtle-dark bg-base-100 dark:bg-base-800 px-2 py-1 rounded-full">
                <span id="commandsCount">{{ django_commands.total_commands }}</span> commands
            </span>
        </div>
        
        <!-- Search Box -->
        <div class="flex items-center space-x-3">
            <div class="bg-white border border-base-200 flex flex-row items-center px-3 rounded-default relative shadow-xs w-64 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-base-900 dark:border-base-700">
                <span class="material-symbols-outlined md-18 text-base-400 dark:text-base-500">search</span>
                <input 
                    type="text" 
                    id="commandSearch" 
                    placeholder="Search commands..." 
                    class="grow font-medium min-w-0 overflow-hidden p-2 placeholder-font-subtle-light truncate focus:outline-hidden dark:bg-base-900 dark:placeholder-font-subtle-dark dark:text-font-default-dark"
                    oninput="searchCommands(this.value)"
                >
            </div>
            <button 
                id="clearSearch"
                onclick="clearSearch()" 
                class="px-3 py-2 text-xs text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark transition-colors hidden"
            >
                Clear
            </button>
        </div>
    </div>
    
    {% if django_commands.categorized %}
        <!-- Commands by Category -->
        <div class="space-y-4">
            {% for category, commands in django_commands.categorized.items %}
                <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 overflow-hidden shadow-sm mb-4">
                    <!-- Category Header -->
                    <button 
                        onclick="toggleCategory('{{ category }}')"
                        class="w-full p-4 flex items-center justify-between hover:bg-base-100 dark:hover:bg-base-700 transition-colors"
                    >
                        <div class="flex items-center">
                            <span class="material-icons text-primary-600 dark:text-primary-400 mr-2">apps</span>
                            <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark capitalize">
                                {{ category|title }}
                            </h3>
                            <span class="ml-3 text-sm text-font-subtle-light dark:text-font-subtle-dark bg-base-100 dark:bg-base-700 px-2 py-1 rounded-lg">
                                {{ commands|length }} commands
                            </span>
                        </div>
                            <span class="material-icons text-font-subtle-light dark:text-font-subtle-dark transition-transform" id="icon-{{ category }}" style="transform: rotate(-90deg);">
                             expand_less
                         </span>
                    </button>
                    
                                         <!-- Collapsible Content -->
                     <div id="content-{{ category }}" class="border-t border-base-200 dark:border-base-700" style="display: none;">
                        <div class="p-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                {% for command in commands %}
                                    <div class="command-item bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 hover:shadow-lg dark:hover:shadow-base-900/50 transition-all duration-200 overflow-hidden">
                                        <!-- Card Header -->
                                        <div class="p-4 border-b border-base-100 dark:border-base-700">
                                            <div class="flex items-center justify-between mb-2">
                                                <code class="command-name text-sm font-mono bg-base-100 dark:bg-base-700 px-2 py-1 rounded-lg text-font-default-light dark:text-font-default-dark">
                                                    {{ command.name }}
                                                </code>
                                                <div class="flex items-center space-x-1">
                                                    {% if command.is_core %}
                                                        <span class="text-xs bg-primary-100 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 px-2 py-1 rounded-lg">
                                                            Core
                                                        </span>
                                                    {% endif %}
                                                    {% if command.is_custom %}
                                                        <span class="text-xs bg-indigo-100 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 px-2 py-1 rounded-lg">
                                                            Custom
                                                        </span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="flex items-center text-xs text-font-subtle-light dark:text-font-subtle-dark">
                                                <span class="material-icons text-xs mr-1">apps</span>
                                                {{ command.app_label }}
                                            </div>
                                        </div>
                                        
                                        <!-- Card Body -->
                                        <div class="p-4">
                                            <!-- Description -->
                                            {% if command.description %}
                                                <p class="command-description text-sm text-font-default-light dark:text-font-default-dark mb-3 line-clamp-2">
                                                    {{ command.description }}
                                                </p>
                                            {% endif %}
                                            
                                            <!-- Usage -->
                                            {% if command.usage %}
                                                <div class="mb-3">
                                                    <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark font-medium">Usage:</span>
                                                    <code class="block text-xs font-mono bg-base-50 dark:bg-base-700 px-2 py-1 rounded-lg mt-1 text-font-default-light dark:text-font-default-dark">
                                                        {{ command.usage }}
                                                    </code>
                                                </div>
                                            {% endif %}
                                            
                                            <!-- Arguments & Options Summary -->
                                            <div class="flex items-center justify-between text-xs text-font-subtle-light dark:text-font-subtle-dark mb-3">
                                                {% if command.arguments %}
                                                    <span>{{ command.arguments|length }} arg{{ command.arguments|length|pluralize }}</span>
                                                {% endif %}
                                                {% if command.options %}
                                                    <span>{{ command.options|length }} option{{ command.options|length|pluralize }}</span>
                                                {% endif %}
                                            </div>
                                            
                                            <!-- Action Buttons - Custom due to onclick handlers -->
                                            <div class="flex gap-2">
                                                <button
                                                    onclick="copyToClipboard('python manage.py {{ command.name }}')"
                                                    class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-base-100 dark:bg-base-700 hover:bg-base-200 dark:hover:bg-base-600 text-font-default-light dark:text-font-default-dark rounded-lg text-xs font-medium transition-colors"
                                                    title="Copy command to clipboard">
                                                    <span class="material-icons text-xs mr-1">content_copy</span>
                                                    Copy
                                                </button>
                                                <button
                                                    onclick="executeCommand('{{ command.name }}')"
                                                    class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white rounded-lg text-xs font-medium transition-colors"
                                                    title="Execute command">
                                                    <span class="material-icons text-xs mr-1">play_arrow</span>
                                                    Run
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        
    {% else %}
        <!-- No Commands -->
        <div class="text-center py-12">
            <div class="flex flex-col items-center">
                <span class="material-icons text-4xl text-base-400 dark:text-base-500 mb-4">terminal</span>
                <h3 class="text-lg font-medium text-font-important-light dark:text-font-important-dark mb-2">
                    No Django Commands Found
                </h3>
                <p class="text-font-subtle-light dark:text-font-subtle-dark max-w-md mx-auto">
                    Django management commands will appear here once they are discovered.
                </p>
            </div>
        </div>
    {% endif %}
</div>

<!-- Command Execution Modal -->
<div id="commandModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white dark:bg-base-900 rounded-lg shadow-2xl max-w-4xl w-full max-h-[80vh] flex flex-col border border-base-200 dark:border-base-700">
            <!-- Modal Header -->
            <div class="flex items-center justify-between p-4 border-b border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
                <div class="flex items-center space-x-3">
                    <div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/20 rounded-lg">
                        <span class="material-icons text-primary-600 dark:text-primary-400">terminal</span>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">
                            Command Execution
                        </h3>
                        <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
                            Running: <span id="commandName" class="font-mono text-primary-600 dark:text-primary-400"></span>
                        </p>
                    </div>
                </div>
                <button onclick="closeCommandModal()" class="p-2 text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-lg transition-colors">
                    <span class="material-icons">close</span>
                </button>
            </div>
            
            <!-- Modal Body -->
            <div class="flex-1 p-4" style="min-height: 0;">
                <div id="commandOutput" class="bg-base-100 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 overflow-y-auto p-4 text-sm font-mono text-font-default-light dark:text-font-default-dark whitespace-pre-wrap leading-relaxed break-words" style="height: calc(80vh - 200px); max-height: 60vh;"></div>
            </div>
            
            <!-- Modal Footer -->
            <div class="flex items-center justify-between p-4 border-t border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
                <div class="flex items-center space-x-3">
                    <div id="commandStatus" class="flex items-center">
                        <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div>
                        <span class="text-sm font-medium text-font-default-light dark:text-font-default-dark">Executing...</span>
                    </div>
                </div>
                <button onclick="closeCommandModal()" class="px-4 py-2 bg-base-100 dark:bg-base-700 hover:bg-base-200 dark:hover:bg-base-600 text-font-default-light dark:text-font-default-dark rounded-lg transition-colors font-medium">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for command search functionality -->
<script>
function searchCommands(query) {
    const searchQuery = query.toLowerCase().trim();
    const categories = document.querySelectorAll('[id^="content-"]');
    const clearButton = document.getElementById('clearSearch');
    const commandsCount = document.getElementById('commandsCount');
    let visibleCommands = 0;
    
    // Show/hide clear button
    if (searchQuery) {
        clearButton.classList.remove('hidden');
    } else {
        clearButton.classList.add('hidden');
    }
    
    categories.forEach(category => {
        const categoryName = category.id.replace('content-', '');
        const commands = category.querySelectorAll('.command-item');
        let categoryHasVisibleCommands = false;
        
        commands.forEach(command => {
            const commandName = command.querySelector('.command-name').textContent.toLowerCase();
            const commandDesc = command.querySelector('.command-description')?.textContent.toLowerCase() || '';
            
            if (!searchQuery || commandName.includes(searchQuery) || commandDesc.includes(searchQuery)) {
                command.style.display = 'block';
                categoryHasVisibleCommands = true;
                visibleCommands++;
            } else {
                command.style.display = 'none';
            }
        });
        
        // Show/hide category based on whether it has visible commands
        const categoryHeader = document.querySelector(`button[onclick="toggleCategory('${categoryName}')"]`);
        const categoryContainer = categoryHeader.parentElement;
        
        if (categoryHasVisibleCommands) {
            categoryContainer.style.display = 'block';
            
            // Auto-expand categories when searching
            if (searchQuery) {
                category.style.display = 'block';
                const icon = categoryHeader.querySelector('.material-icons');
                if (icon) {
                    icon.textContent = 'expand_less';
                    icon.style.transform = 'rotate(0deg)';
                }
            }
        } else {
            categoryContainer.style.display = 'none';
        }
    });
    
    // Update commands count
    commandsCount.textContent = visibleCommands;
    
    // Show "no results" message if no commands found
    showNoResultsMessage(visibleCommands === 0 && searchQuery);
}

function clearSearch() {
    const searchInput = document.getElementById('commandSearch');
    const clearButton = document.getElementById('clearSearch');
    const commandsCount = document.getElementById('commandsCount');
    
    searchInput.value = '';
    clearButton.classList.add('hidden');
    
    // Show all commands and categories
    const categories = document.querySelectorAll('[id^="content-"]');
    const allCommands = document.querySelectorAll('.command-item');
    
    categories.forEach(category => {
        const categoryName = category.id.replace('content-', '');
        const categoryHeader = document.querySelector(`button[onclick="toggleCategory('${categoryName}')"]`);
        categoryHeader.parentElement.style.display = 'block';
        // Reset to collapsed state
        category.style.display = 'none';
        const icon = categoryHeader.querySelector('.material-icons');
        if (icon) {
            icon.textContent = 'expand_less';
            icon.style.transform = 'rotate(-90deg)';
        }
    });
    
    allCommands.forEach(command => {
        command.style.display = 'block';
    });
    
    // Reset commands count
    commandsCount.textContent = '{{ django_commands.total_commands }}';
    
    // Hide no results message
    showNoResultsMessage(false);
}

function showNoResultsMessage(show) {
    let noResultsDiv = document.getElementById('noSearchResults');
    
    if (show && !noResultsDiv) {
        // Create no results message
        noResultsDiv = document.createElement('div');
        noResultsDiv.id = 'noSearchResults';
        noResultsDiv.className = 'text-center py-12';
        noResultsDiv.innerHTML = `
            <div class="flex flex-col items-center">
                <span class="material-icons text-6xl text-base-400 dark:text-base-500 mb-4">search_off</span>
                <h3 class="text-lg font-medium text-font-important-light dark:text-font-important-dark mb-2">
                    No Commands Found
                </h3>
                <p class="text-font-subtle-light dark:text-font-subtle-dark max-w-md mx-auto">
                    No commands match your search criteria. Try different keywords or clear the search.
                </p>
            </div>
        `;
        
        // Insert after the commands container
        const commandsContainer = document.querySelector('.space-y-4');
        commandsContainer.parentNode.insertBefore(noResultsDiv, commandsContainer.nextSibling);
    } else if (!show && noResultsDiv) {
        noResultsDiv.remove();
    }
}

// Add search keyboard shortcuts
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('commandSearch');
    
    // Focus search with Ctrl+F or Cmd+F
    document.addEventListener('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
            e.preventDefault();
            searchInput.focus();
        }
        
        // Clear search with Escape
        if (e.key === 'Escape' && document.activeElement === searchInput) {
            clearSearch();
            searchInput.blur();
        }
    });
});
</script>