{% extends 'admin/base.html' %}

{% load unfold %}

{% block extrahead %}
    {{ block.super }}
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Removed Tailwind CDN - using CSS-only solution -->
    
    <script>
    // Dashboard tabs functionality
    document.addEventListener('DOMContentLoaded', function() {
        const tabs = document.querySelectorAll('#dashboard-tabs button');
        const contents = document.querySelectorAll('.tab-content');
        
        if (!tabs.length || !contents.length) return;
        
        // Tab names for URL hash
        const tabNames = ['overview', 'zones', 'users', 'system', 'stats', 'app-stats', 'commands', 'documentation'];
        
        // Global function for tab switching
        window.switchTab = function(idx, updateHash = true) {
            tabs.forEach((t, i) => {
                if (i === idx) {
                    // Active tab
                    t.classList.add('active');
                } else {
                    // Inactive tab  
                    t.classList.remove('active');
                }
            });
            
            contents.forEach((content, i) => {
                content.style.display = i === idx ? 'block' : 'none';
                content.classList.toggle('active', i === idx);
            });
            
            // Update URL hash
            if (updateHash && tabNames[idx]) {
                history.replaceState(null, null, '#' + tabNames[idx]);
            }
        };
        
        // Function to get tab index from hash
        function getTabFromHash() {
            const hash = window.location.hash.substring(1); // Remove #
            const tabIndex = tabNames.indexOf(hash);
            return tabIndex >= 0 ? tabIndex : 0; // Default to first tab
        }
        
        // Add click handlers
        tabs.forEach((tab, idx) => {
            tab.onclick = function(e) {
                e.preventDefault();
                switchTab(idx, true);
            };
        });
        
        // Handle browser back/forward buttons
        window.addEventListener('hashchange', function() {
            const tabIndex = getTabFromHash();
            switchTab(tabIndex, false); // Don't update hash to avoid loop
        });
        
        // Activate tab based on URL hash or default to first tab
        const initialTab = getTabFromHash();
        switchTab(initialTab, false);
    });
    
    // Global functions for components
    window.toggleCategory = function(category) {
        const content = document.getElementById(`content-${category}`);
        const icon = document.getElementById(`icon-${category}`);
        
        if (!content || !icon) return;
        
        if (content.style.display === 'none' || content.style.display === '') {
            content.style.display = 'block';
            icon.style.transform = 'rotate(0deg)';
            icon.textContent = 'expand_more';
        } else {
            content.style.display = 'none';
            icon.style.transform = 'rotate(-90deg)';
            icon.textContent = 'expand_less';
        }
    };

    // Command execution functions
    window.copyToClipboard = function(text) {
        navigator.clipboard.writeText(text).then(function() {
            const button = event.target.closest('button');
            const originalText = button.innerHTML;
            button.innerHTML = '<span class="material-icons text-xs mr-1">check</span>Copied';
            button.classList.remove('bg-gray-100', 'dark:bg-gray-700', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
            button.classList.add('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600', 'text-white');
            
            setTimeout(function() {
                button.innerHTML = originalText;
                button.classList.remove('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600', 'text-white');
                button.classList.add('bg-gray-100', 'dark:bg-gray-700', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
            }, 2000);
        }).catch(function(err) {
            console.error('Could not copy text: ', err);
        });
    };

    // No JS needed - using pure CSS solution

    window.executeCommand = function(commandName) {
        const modal = document.getElementById('commandModal');
        const commandNameEl = document.getElementById('commandName');
        const commandOutput = document.getElementById('commandOutput');
        const commandStatus = document.getElementById('commandStatus');
        
        if (!modal || !commandNameEl || !commandOutput || !commandStatus) {
            console.error('Command modal elements not found');
            return;
        }

        commandNameEl.textContent = commandName;
        commandOutput.textContent = '';
        commandStatus.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Executing...</span>';
        modal.classList.remove('hidden');
        
        fetch('/cfg/commands/execute/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({
                command: commandName,
                args: [],
                options: {}
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            
            function readStream() {
                return reader.read().then(({done, value}) => {
                    if (done) return;
                    
                    const chunk = decoder.decode(value);
                    const lines = chunk.split('\n');
                    
                    lines.forEach(line => {
                        if (line.startsWith('data: ')) {
                            try {
                                const data = JSON.parse(line.slice(6));
                                handleCommandData(data);
                            } catch (e) {
                                console.error('Error parsing command data:', e);
                            }
                        }
                    });
                    
                    return readStream();
                });
            }
            
            return readStream();
        })
        .catch(error => {
            console.error('Error executing command:', error);
            commandOutput.textContent += `\n❌ Error: ${error.message}`;
            commandStatus.innerHTML = '<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div><span class="text-sm font-medium text-red-600 dark:text-red-400">Error</span>';
        });
    };

    function handleCommandData(data) {
        const output = document.getElementById('commandOutput');
        const status = document.getElementById('commandStatus');
        
        if (!output || !status) return;
        
        switch (data.type) {
            case 'start':
                // Clear previous content and add header
                output.innerHTML = '';
                addLogLine(output, `🚀 Starting command: ${data.command}`, 'info');
                addLogLine(output, `📝 Arguments: ${data.args.join(' ')}`, 'info');
                addLogLine(output, '', 'spacer');
                status.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Executing...</span>';
                break;
            case 'output':
                addLogLine(output, data.line, 'output');
                scrollToBottom(output);
                break;
            case 'complete':
                const success = data.return_code === 0;
                status.innerHTML = success 
                    ? '<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div><span class="text-sm font-medium text-green-600 dark:text-green-400">Completed</span>'
                    : '<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div><span class="text-sm font-medium text-red-600 dark:text-red-400">Failed</span>';
                
                addLogLine(output, '', 'spacer');
                let completionMessage = `${success ? '✅' : '❌'} Command completed with exit code: ${data.return_code}`;
                if (data.execution_time) {
                    completionMessage += ` (${data.execution_time}s)`;
                }
                addLogLine(output, completionMessage, success ? 'success' : 'error');
                scrollToBottom(output);
                break;
            case 'error':
                addLogLine(output, `❌ Error: ${data.error}`, 'error');
                status.innerHTML = '<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div><span class="text-sm font-medium text-red-600 dark:text-red-400">Error</span>';
                scrollToBottom(output);
                break;
        }
    }

    function addLogLine(container, text, type = 'output') {
        const line = document.createElement('div');
        line.className = 'log-line';
        
        // Add type-specific styling
        switch (type) {
            case 'info':
                line.className += ' text-blue-600 dark:text-blue-400 font-medium';
                break;
            case 'success':
                line.className += ' text-green-600 dark:text-green-400 font-medium';
                break;
            case 'error':
                line.className += ' text-red-600 dark:text-red-400 font-medium';
                break;
            case 'spacer':
                line.className += ' h-2';
                break;
            default:
                line.className += ' text-gray-700 dark:text-gray-300';
        }
        
        // Set content
        if (type === 'spacer') {
            line.innerHTML = '&nbsp;';
        } else {
            line.textContent = text;
        }
        
        container.appendChild(line);
    }

    function scrollToBottom(element) {
        if (!element) return;
        
        // Принудительно скроллим элемент
        setTimeout(() => {
            element.scrollTop = element.scrollHeight;
            console.log('Scrolled to bottom:', element.scrollTop, element.scrollHeight);
        }, 50);
    }

    window.closeCommandModal = function() {
        const modal = document.getElementById('commandModal');
        if (modal) {
            modal.classList.add('hidden');
        }
    };

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    </script>
    
    <style>
    /* Dashboard tab styles */
    .tab-content {
        display: none;
        animation: fadeIn 0.3s ease-in-out;
    }
    .tab-content.active {
        display: block;
    }
    #dashboard-tabs button {
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* 🎨 Theme classes - cross-theme compatible cards */
    .theme-card {
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px) !important;
        color: #111827 !important;
        border-color: rgba(229, 231, 235, 0.6) !important;
        border-radius: 10px !important;
        transition: all 0.2s ease;
    }
    
    html.dark .theme-card {
        background-color: rgba(31, 41, 55, 0.2) !important;
        backdrop-filter: blur(10px) !important;
        color: white !important;
        border-color: rgba(55, 65, 81, 0.6) !important;
        border-radius: 10px !important;
    }
    
    .theme-text {
        color: #111827 !important;
    }
    
    html.dark .theme-text {
        color: white !important;
    }
    
    .theme-border {
        border-color: rgba(229, 231, 235, 0.6) !important;
    }
    
    html.dark .theme-border {
        border-color: rgba(55, 65, 81, 0.6) !important;
    }

    /* Fix grid layout */
    .overview-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    
    @media (min-width: 1280px) {
        .overview-grid {
            grid-template-columns: 2fr 1fr !important;
        }
    }

    /* 🎯 Tab styling */
    #dashboard-tabs {
        border-bottom: 2px solid #e5e7eb !important;
    }
    
    html.dark #dashboard-tabs {
        border-bottom-color: #374151 !important;
    }
    
    #dashboard-tabs button {
        background-color: #f3f4f6 !important;
        color: #6b7280 !important;
        border-bottom: 2px solid transparent !important;
        transition: all 0.2s ease !important;
    }
    
    html.dark #dashboard-tabs button {
        background-color: #374151 !important;
        color: #9ca3af !important;
    }
    
    #dashboard-tabs button:hover {
        background-color: #e5e7eb !important;
        color: #374151 !important;
    }
    
    html.dark #dashboard-tabs button:hover {
        background-color: #4b5563 !important;
        color: #d1d5db !important;
    }
    
    /* Active tab */
    #dashboard-tabs button.active,
    #dashboard-tabs button[class*="bg-blue"] {
        background-color: #2563eb !important;
        color: white !important;
        border-bottom-color: #2563eb !important;
    }
    
    html.dark #dashboard-tabs button.active,
    html.dark #dashboard-tabs button[class*="bg-blue"] {
        background-color: #3b82f6 !important;
        color: white !important;
        border-bottom-color: #3b82f6 !important;
    }

    /* 🎯 Universal card borders - transparent cross-theme */
    .card-border,
    .border-base-200,
    [class*="border-base-200"],
    [class*="dark:border-base-700"] {
        border-color: rgba(229, 231, 235, 0.6) !important;
    }
    
    html.dark .card-border,
    html.dark .border-base-200,
    html.dark [class*="border-base-200"],
    html.dark [class*="dark:border-base-700"] {
        border-color: rgba(55, 65, 81, 0.6) !important;
    }

    /* 🎯 Icon spacing defaults - more specific targeting */
    .theme-card .material-icons:not(.no-margin) {
        margin-right: 0.75rem !important; /* 12px default spacing */
    }
    
    /* Override for specific contexts */
    .theme-card .flex.items-center .material-icons {
        margin-right: 0.75rem !important;
    }
    
    .theme-card .status-badge .material-icons {
        margin-right: 0.25rem !important; /* 4px for badges */
    }
    
    /* Fix for buttons and interactive elements */
    .theme-card button .material-icons,
    .theme-card a .material-icons {
        margin-right: 0.5rem !important;
    }
    </style>
{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block title %}
    {% if subtitle %}
        {{ subtitle }} |
    {% endif %}
    {{ title }} | {{ site_title|default:'Django site admin' }}
{% endblock %}

{% block branding %}
    {% include "unfold/helpers/site_branding.html" %}
{% endblock %}

{% block content %}
    <!-- Main Dashboard Container -->
    {% component "unfold/components/container.html" %}
        <!-- Tabs Navigation -->
        <div class="flex gap-1 mb-4" id="dashboard-tabs">
            <button 
                type="button" 
                data-tab="0"
                class="px-4 py-3 rounded-t-lg focus:outline-none font-semibold active"
            >
                <span class="material-icons mr-2 align-middle text-sm">dashboard</span>
                Overview
            </button>
            <button 
                type="button" 
                data-tab="1"
                class="px-4 py-3 rounded-t-lg focus:outline-none"
            >
                <span class="material-icons mr-2 align-middle text-sm">public</span>
                API Zones
            </button>
            <button 
                type="button" 
                data-tab="2"
                class="px-4 py-3 rounded-t-lg focus:outline-none"
            >
                <span class="material-icons mr-2 align-middle text-sm">people</span>
                Users
            </button>
            <button 
                type="button" 
                data-tab="3"
                class="px-4 py-3 rounded-t-lg focus:outline-none"
            >
                <span class="material-icons mr-2 align-middle text-sm">settings</span>
                System
            </button>
            <button 
                type="button" 
                data-tab="4"
                class="px-4 py-3 rounded-t-lg focus:outline-none"
            >
                <span class="material-icons mr-2 align-middle text-sm">analytics</span>
                Statistics
            </button>
            <button 
                type="button" 
                data-tab="5"
                class="px-4 py-3 rounded-t-lg focus:outline-none"
            >
                <span class="material-icons mr-2 align-middle text-sm">apps</span>
                App Stats
            </button>
            <button
                type="button"
                data-tab="6"
                class="px-4 py-3 rounded-t-lg focus:outline-none"
            >
                <span class="material-icons mr-2 align-middle text-sm">terminal</span>
                Commands
            </button>
            <button
                type="button"
                data-tab="7"
                class="px-4 py-3 rounded-t-lg focus:outline-none"
            >
                <span class="material-icons mr-2 align-middle text-sm">description</span>
                Documentation
            </button>
        </div>

        <div class="flex flex-col gap-5">

            <!-- Tab Content with improved spacing -->
            <div class="tab-content active" data-tab="0">
                {% block overview_tab %}{% endblock %}
            </div>

            <div class="tab-content" data-tab="1">
                {% block zones_tab %}{% endblock %}
            </div>

            <div class="tab-content" data-tab="2">
                {% block users_tab %}{% endblock %}
            </div>

            <div class="tab-content" data-tab="3">
                {% block system_tab %}{% endblock %}
            </div>

            <div class="tab-content" data-tab="4">
                {% block stats_tab %}{% endblock %}
            </div>

            <div class="tab-content" data-tab="5">
                {% block app_stats_tab %}{% endblock %}
            </div>

            <div class="tab-content" data-tab="6">
                {% block commands_tab %}{% endblock %}
            </div>

            <div class="tab-content" data-tab="7">
                {% block documentation_tab %}{% endblock %}
            </div>
        </div>

        <!-- Footer Section -->
        <div class="text-center py-8 border-t theme-border mt-5">
            <p class="text-sm text-gray-500 dark:text-gray-400">
                {% load django_cfg %}
                <a href="{% lib_site_url %}" class="text-blue-600 hover:text-blue-700 font-medium">
                    {% lib_name %}
                </a>
                <span class="mx-2">•</span>
                <a href="{% lib_health_url %}" class="text-blue-600 hover:text-blue-700">
                    System Health
                </a>
            </p>
        </div>

    {% endcomponent %}
{% endblock %}