{% 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' %}">

    {# JWT Token Injection for localStorage #}
    {% if user.is_authenticated %}
    <script>
    (function() {
        try {
            {% generate_jwt_tokens as jwt_tokens %}
            localStorage.setItem('auth_token', '{{ jwt_tokens.access }}');
            localStorage.setItem('refresh_token', '{{ jwt_tokens.refresh }}');
        } catch (e) {
            console.error('[Django Admin] Failed to inject JWT tokens:', e);
        }
    })();
    </script>
    {% endif %}

    <style>
        #content { display: flex; flex-direction: column; height: 100%; padding: 0 !important; }
        #content.container, #content.mx-auto, #content .mx-auto {
            margin-left: 0 !important; margin-right: 0 !important; max-width: none !important;
        }
        #content > .mx-auto, #content > div {
            margin-left: 0 !important; margin-right: 0 !important; max-width: none !important;
            padding-left: 0 !important; padding-right: 0 !important;
        }
        /* Strip Unfold container padding so grid goes edge-to-edge */
        div[class*="@container"] { padding: 0 !important; }
        [x-cloak] { display: none !important; }

        /* Two-column layout — full viewport height minus top bar */
        .cfg-overview-grid {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 0;
            height: calc(100vh - 100px);
            overflow: hidden;
        }
        .cfg-overview-grid.cfg-no-chat {
            grid-template-columns: 1fr;
        }
        @media (max-width: 1024px) {
            .cfg-overview-grid {
                grid-template-columns: 1fr;
                height: auto;
            }
            .cfg-chat-col { border-left: none !important; border-top: 1px solid rgba(209,213,219,0.2); }
        }

        /* Chat column */
        .cfg-chat-col {
            border-left: 1px solid rgba(209,213,219,0.2);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
        }
        .dark .cfg-chat-col { border-left-color: rgba(75,85,99,0.2); }

        /* Tabs column */
        .cfg-tabs-col {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
            position: relative;
        }

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

        /* iframe: fill all remaining vertical space */
        .cfg-tab-iframe {
            flex: 1;
            min-height: 0;
            width: 100%;
            border: none;
            display: block;
        }

        /* Compact chat header inside column */
        .cfg-chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid rgba(209,213,219,0.2);
            flex-shrink: 0;
        }
        .dark .cfg-chat-header { border-bottom-color: rgba(75,85,99,0.2); }

        /* Override mcp-chat to fill column */
        .cfg-chat-col .mcp-chat {
            flex: 1;
            min-height: 0;
            border: none;
            border-radius: 0;
        }
    </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 %}
{% component "unfold/components/container.html" %}

    {# Version update banner #}
    {% version_update_info as version %}
    {% if version.update_available %}
    <a href="{{ version.update_url }}" target="_blank" rel="noopener noreferrer"
       class="block bg-white dark:bg-base-900 border border-base-200 dark:border-base-700 hover:border-primary-300 dark:hover:border-primary-700 rounded-md p-3 mb-3 transition-colors cursor-pointer">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <span class="material-icons text-amber-500" style="font-size:20px;">system_update</span>
                <div>
                    <div class="text-font-default-light dark:text-font-default-dark text-sm font-medium">New django-cfg version available</div>
                    <div class="text-font-subtle-light dark:text-font-subtle-dark text-xs mt-0.5">
                        {{ version.current_version }} → <span class="text-green-600 dark:text-green-500 font-medium">{{ version.latest_version }}</span>
                        <span class="mx-1.5">•</span>
                        <code class="bg-base-100 dark:bg-base-800 px-1 py-0.5 rounded font-mono">poetry add django-cfg@latest</code>
                    </div>
                </div>
            </div>
            <span class="material-icons text-font-subtle-light dark:text-font-subtle-dark" style="font-size:18px;">open_in_new</span>
        </div>
    </a>
    {% endif %}

    {# Two-column grid: tabs left, chat right #}
    {% get_dashboard_config as dashboard %}
    {% has_mcp_chat as show_chat %}
    <div class="cfg-overview-grid{% if not show_chat %} cfg-no-chat{% endif %} border border-base-200 dark:border-base-700 rounded-lg overflow-hidden" style="margin: -0.5rem 1rem 1rem;">

        {# LEFT — dashboard tabs with iframe #}
        <div class="cfg-tabs-col">
            {% if dashboard %}
                {# Alpine component: tracks active tab slug + iframe src #}
                <div style="display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;"
                     x-data="{
                         active: '{{ dashboard.tabs.0.slug }}',
                         src: '{% url "django_cfg_dashboard_tab" slug=dashboard.tabs.0.slug %}?iframe=1',
                         loading: false,
                         go(slug, url) {
                             if (this.active === slug) return;
                             this.active = slug;
                             this.loading = true;
                             this.$refs.dashframe.src = 'about:blank';
                             this.$nextTick(() => { this.src = url + '?iframe=1'; });
                         }
                     }">

                    {# Tab bar #}
                    <div class="border-b border-base-200 dark:border-base-700 flex items-center justify-between pr-3">
                        <nav class="-mb-px flex gap-1 px-4" aria-label="Dashboard tabs">
                            {% for tab in dashboard.tabs %}
                            <button type="button"
                                    @click="go('{{ tab.slug }}', '{% url "django_cfg_dashboard_tab" slug=tab.slug %}')"
                                    :class="active === '{{ tab.slug }}'
                                        ? 'border-primary-500 text-primary-600 dark:text-primary-400'
                                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200'"
                                    class="inline-flex items-center gap-1.5 px-3 py-3 text-sm font-medium border-b-2 transition-colors duration-150 cursor-pointer bg-transparent">
                                <span class="material-icons" style="font-size:15px;">{{ tab.icon }}</span>
                                {{ tab.title }}
                            </button>
                            {% endfor %}
                        </nav>
                        <a :href="src" target="_blank" rel="noopener"
                           class="flex items-center gap-1 text-xs text-gray-400 hover:text-primary-500 transition-colors whitespace-nowrap">
                            <span class="material-icons" style="font-size:14px;">open_in_new</span>
                        </a>
                    </div>

                    {# Loading overlay #}
                    <div x-show="loading"
                         style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.03); z-index:10;">
                        <div style="width:20px; height:20px; border:2px solid rgba(156,163,175,0.3); border-top-color:rgb(99,102,241); border-radius:50%; animation:cfg-spin 0.6s linear infinite;"></div>
                    </div>

                    {# iframe #}
                    <iframe class="cfg-tab-iframe"
                            style="flex:1; min-height:0; width:100%; border:none; display:block;"
                            :src="src"
                            x-ref="dashframe"
                            @load="loading = false"
                            title="Dashboard tab"></iframe>
                </div>
            {% else %}
                <div class="flex flex-col items-center justify-center h-full py-16 text-center px-8">
                    <span class="material-icons text-4xl text-gray-300 dark:text-gray-600 mb-3">dashboard</span>
                    <p class="text-sm text-gray-500 dark:text-gray-400">No dashboard tabs configured.</p>
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Add <code class="bg-base-100 dark:bg-base-800 px-1 rounded font-mono">dashboard=DashboardConfig(...)</code> to your config.</p>
                </div>
            {% endif %}
        </div>

        {# RIGHT — MCP chat (only when MCP is configured and user can access it) #}
        {% if show_chat %}
        <div class="cfg-chat-col">
            <div class="cfg-chat-header">
                <div class="flex items-center gap-2">
                    <span class="material-icons text-sm text-primary-600 dark:text-primary-500">smart_toy</span>
                    <span class="font-medium text-sm text-gray-700 dark:text-gray-300">MCP Agent</span>
                </div>
                <a href="https://pypi.org/project/django-cfg/" target="_blank" rel="noopener noreferrer"
                   class="text-xs text-gray-400 hover:text-primary-500 transition-colors">{% lib_name %}</a>
            </div>
            {% include "django_mcp/admin_chat.html" %}
        </div>
        {% endif %}

    </div>

{% endcomponent %}
{% endblock %}

{% block footer %}
    {{ block.super }}
{% endblock %}