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

{% load static %}
{% load unfold %}
{% load django_cfg %}

{% block extrahead %}
    {{ block.super }}
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'admin/css/dashboard.css' %}">
    <style>
        /* Make content container full height and full width */
        #content {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* Remove container centering and width limits */
        #content.container,
        #content.mx-auto,
        #content .mx-auto {
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: none !important;
        }

        /* Also remove from unfold container component and make it full height */
        #content > .mx-auto {
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: none !important;
            height: 100%;
        }

        /* Remove horizontal padding on mobile for @container */
        @media (max-width: 768px) {
            div[class*="@container"].px-4 {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
        }

        /* Make Alpine tabs wrapper full height */
        #content [x-data] {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* Make tab content blocks full height */
        #content [x-data] > div[x-show] {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .nextjs-dashboard-iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .nextjs-dashboard-iframe.loaded {
            visibility: visible;
            opacity: 1;
        }

        .iframe-container {
            position: relative;
            background: transparent;
            flex: 1;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(209, 213, 219, 0.2);
            border-radius: 0.375rem; /* rounded-md */
            overflow: hidden;
        }

        .dark .iframe-container {
            border-color: rgba(75, 85, 99, 0.2);
        }

        .iframe-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 1;
        }

        .iframe-loading.hidden {
            display: none;
        }

        .spinner {
            width: 48px;
            height: 48px;
            border: 4px solid #e5e7eb;
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Hide elements when Alpine x-cloak is active */
        [x-cloak] { display: none !important; }
    </style>
{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block coltype %}{% 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 Container -->
    {% component "unfold/components/container.html" %}
        <div x-data="{
            activeTab: 'builtin',
            previousTab: 'builtin',
            switchTab(tab) {
                if (this.previousTab !== tab) {
                    // Reset iframe to initial URL when switching tabs
                    this.resetIframe(this.previousTab);
                    this.previousTab = tab;
                }
                this.activeTab = tab;
            },
            resetIframe(tab) {
                // Reset the iframe that was just hidden
                const iframeId = tab === 'builtin' ? 'nextjs-dashboard-iframe-builtin' : 'nextjs-dashboard-iframe-nextjs';
                const iframe = document.getElementById(iframeId);
                if (iframe) {
                    const originalSrc = iframe.getAttribute('data-original-src') || iframe.src;
                    iframe.src = originalSrc;
                }
            }
        }">
            {% if is_frontend_dev_mode %}
            <!-- Development Mode Badge -->
            <div class="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 text-yellow-700 dark:text-yellow-300" role="alert">
                <div class="flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                    </svg>
                    <div>
                        <p class="font-bold">Frontend Development Mode Active</p>
                        <p class="text-sm">Loading Next.js from <code class="bg-yellow-200 dark:bg-yellow-800 px-1 rounded">{% nextjs_admin_url %}</code></p>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Tab Navigation -->
            {% has_nextjs_external_admin as is_external_enabled %}
            {% if is_external_enabled %}
            <div>
                <div class="border-b border-gray-300 dark:border-gray-600" style="border-bottom-color: rgba(209, 213, 219, 0.2);">
                    <style>
                        .dark [style*="border-bottom-color"] {
                            border-bottom-color: rgba(75, 85, 99, 0.2) !important;
                        }
                    </style>
                    <div class="flex items-center justify-between px-4">
                        <nav class="-mb-px flex space-x-8" aria-label="Dashboard Tabs">
                        <button @click="switchTab('builtin')"
                                class="whitespace-nowrap py-4 px-2 border-b-2 font-medium text-sm flex items-center gap-2 transition-all duration-200"
                                :class="activeTab === 'builtin'
                                    ? 'border-primary-600 text-primary-600 dark:border-primary-500 dark:text-primary-500'
                                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-700'">
                            <span class="material-icons text-base">dashboard</span>
                            <span>Built-in Dashboard</span>
                        </button>

                        <button @click="switchTab('nextjs')"
                                class="whitespace-nowrap py-4 px-2 border-b-2 font-medium text-sm flex items-center gap-2 transition-all duration-200"
                                :class="activeTab === 'nextjs'
                                    ? 'border-primary-600 text-primary-600 dark:border-primary-500 dark:text-primary-500'
                                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-700'">
                            <span class="material-icons text-base">web</span>
                            <span>{% nextjs_external_admin_title %}</span>
                        </button>
                    </nav>

                    <!-- Version info -->
                    <div class="py-4 text-xs text-gray-400 dark:text-gray-500">
                        {% load django_cfg %}
                        <a href="{% lib_site_url %}" class="text-blue-600 hover:text-blue-700">
                            {% lib_name %}
                        </a>
                    </div>
                </div>
                </div>
            </div>
            {% endif %}

            <!-- Built-in Dashboard Tab Content -->
            <div x-show="activeTab === 'builtin'" style="display: block;">
                <div class="iframe-container">
                    <div class="iframe-loading" id="iframe-loading-builtin">
                        <div class="spinner"></div>
                        <p id="loading-text-builtin">Loading...</p>
                    </div>

                    <iframe
                        id="nextjs-dashboard-iframe-builtin"
                        class="nextjs-dashboard-iframe"
                        src="{% nextjs_admin_url %}"
                        data-original-src="{% nextjs_admin_url %}"
                        title="Next.js Dashboard"
                        sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation"
                    ></iframe>
                </div>
            </div>

            <!-- External Next.js Admin Tab Content -->
            {% if is_external_enabled %}
            <div x-show="activeTab === 'nextjs'" style="display: none;">
                <div class="iframe-container">
                    <div class="iframe-loading" id="iframe-loading-nextjs">
                        <div class="spinner"></div>
                        <p id="loading-text-nextjs">Loading...</p>
                    </div>

                    <iframe
                        id="nextjs-dashboard-iframe-nextjs"
                        class="nextjs-dashboard-iframe"
                        src="{% nextjs_external_admin_url %}"
                        data-original-src="{% nextjs_external_admin_url %}"
                        title="{% nextjs_external_admin_title %}"
                        sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation"
                    ></iframe>
                </div>
            </div>
            {% endif %}
        </div>
    {% endcomponent %}
{% endblock %}

{% block footer %}
    {{ block.super }}
    <script>
        (function() {
            // Built-in dashboard iframe
            const iframeBuiltin = document.getElementById('nextjs-dashboard-iframe-builtin');
            const loadingBuiltin = document.getElementById('iframe-loading-builtin');

            // External Next.js admin iframe (if exists)
            const iframeNextjs = document.getElementById('nextjs-dashboard-iframe-nextjs');
            const loadingNextjs = document.getElementById('iframe-loading-nextjs');

            // Setup both iframes immediately (always loaded, not lazy-loaded)
            if (iframeBuiltin) {
                setupIframe(iframeBuiltin, loadingBuiltin);
            }

            if (iframeNextjs) {
                setupIframe(iframeNextjs, loadingNextjs);
            }

            /**
             * Setup iframe communication and JWT injection
             */
            function setupIframe(iframe, loading) {
                if (!iframe) return;

                // Get iframe origin from src attribute
                const iframeSrc = iframe.src || iframe.getAttribute('src');
                if (!iframeSrc) {
                    console.warn('[Django-CFG] iframe has no src attribute');
                    return;
                }

                const iframeUrl = new URL(iframeSrc, window.location.origin);
                const iframeOrigin = iframeUrl.origin;
                const isDevMode = iframeOrigin !== window.location.origin;

                // Debounce timer for resize events (prevents jittery iframe height changes)
                let resizeTimer = null;
                let loadTimeout = null;

                // iframe load event
                iframe.addEventListener('load', function() {
                    // Clear the fallback timeout
                    if (loadTimeout) {
                        clearTimeout(loadTimeout);
                        loadTimeout = null;
                    }

                    setTimeout(() => {
                        sendDataToIframe();
                    }, 100);
                });

                // iframe error event - fallback to static files
                iframe.addEventListener('error', function() {
                    console.warn('[Django-CFG] iframe failed to load, falling back to static files');
                    handleLoadFailure();
                });

                // Timeout fallback - if iframe doesn't load in 3 seconds
                loadTimeout = setTimeout(() => {
                    if (!iframe.classList.contains('loaded') && isDevMode) {
                        console.warn('[Django-CFG] Dev server timeout, falling back to static files');
                        handleLoadFailure();
                    } else if (!iframe.classList.contains('loaded')) {
                        console.log('[Django-CFG] Timeout - showing iframe anyway');
                        if (loading) loading.classList.add('hidden');
                        iframe.classList.add('loaded');
                    }
                }, 3000);

                // Handle load failure - switch to static files
                function handleLoadFailure() {
                    if (!isDevMode) return; // Already using static files

                    const originalSrc = iframe.getAttribute('data-original-src');
                    if (!originalSrc) return;

                    // Extract path from dev server URL
                    const devUrl = new URL(originalSrc);
                    const pathPart = devUrl.pathname.replace('/admin', '').replace(/^\//, '');

                    // Build static files URL
                    const staticUrl = `/cfg/admin/admin/${pathPart}`;

                    console.log('[Django-CFG] Switching to static files:', staticUrl);
                    iframe.src = staticUrl;

                    // Show iframe after switching
                    setTimeout(() => {
                        if (loading) loading.classList.add('hidden');
                        iframe.classList.add('loaded');
                    }, 500);
                }

                // Send theme and auth data to iframe
                function sendDataToIframe() {
                    if (!iframe || !iframe.contentWindow) {
                        console.error('[Django-CFG] iframe or contentWindow not available');
                        return;
                    }

                    const htmlElement = document.documentElement;
                    const isDark = htmlElement.classList.contains('dark');

                    // Get theme mode from Alpine.js
                    let themeMode = 'auto';
                    if (window.Alpine && window.Alpine.$data) {
                        try {
                            const alpineData = window.Alpine.$data(htmlElement);
                            if (alpineData && alpineData.adminTheme) {
                                themeMode = alpineData.adminTheme;
                            }
                        } catch (e) {
                            console.warn('[Django-CFG] Failed to get Alpine data:', e);
                        }
                    }

                    // Get JWT tokens from localStorage
                    const authToken = localStorage.getItem('auth_token');
                    const refreshToken = localStorage.getItem('refresh_token');

                    // Send theme
                    try {
                        iframe.contentWindow.postMessage({
                            type: 'parent-theme',
                            data: {
                                theme: isDark ? 'dark' : 'light',
                                themeMode: themeMode
                            }
                        }, iframeOrigin);
                    } catch (e) {
                        console.error('[Django-CFG] Failed to send theme message:', e);
                    }

                    // Send auth tokens
                    if (authToken) {
                        try {
                            iframe.contentWindow.postMessage({
                                type: 'parent-auth',
                                data: {
                                    authToken: authToken,
                                    refreshToken: refreshToken
                                }
                            }, iframeOrigin);
                        } catch (e) {
                            console.error('[Django-CFG] Failed to send auth message:', e);
                        }
                    }
                }

                // Watch for theme changes
                const observer = new MutationObserver((mutations) => {
                    mutations.forEach((mutation) => {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            sendDataToIframe();
                        }
                    });
                });

                observer.observe(document.documentElement, {
                    attributes: true,
                    attributeFilter: ['class']
                });

                // Listen for messages from iframe
                window.addEventListener('message', (event) => {
                    if (event.origin !== iframeOrigin) {
                        return;
                    }

                    const { type, data } = event.data || {};

                    switch (type) {
                        case 'iframe-ready':
                            sendDataToIframe();
                            break;

                        case 'iframe-auth-status':
                            console.log('[Django-CFG] Auth status received:', data);
                            break;

                        case 'iframe-resize':
                            // DISABLED: Fixed height 80vh instead of dynamic resize
                            // if (data?.height && typeof data.height === 'number') {
                            //     // First resize - show iframe immediately
                            //     if (!iframe.classList.contains('loaded')) {
                            //         console.log('[Django-CFG] First resize received - showing iframe');
                            //         if (loading) loading.classList.add('hidden');
                            //         iframe.classList.add('loaded');
                            //     }
                            //
                            //     // Debounce resize updates (300ms delay)
                            //     if (resizeTimer) {
                            //         clearTimeout(resizeTimer);
                            //     }
                            //
                            //     resizeTimer = setTimeout(() => {
                            //         const newHeight = Math.max(600, data.height + 50);
                            //         iframe.style.height = newHeight + 'px';
                            //     }, 300);
                            // }

                            // Show iframe on first resize event
                            if (!iframe.classList.contains('loaded')) {
                                console.log('[Django-CFG] First resize received - showing iframe');
                                if (loading) loading.classList.add('hidden');
                                iframe.classList.add('loaded');
                            }
                            break;

                        case 'iframe-navigation':
                            // console.log('[Django-CFG] iframe navigated to:', data.path);
                            break;

                        default:
                            break;
                    }
                });
            }
        })();
    </script>
{% endblock %}