{% extends "base.html" %}
{% load nav %}
{% load waffle_tags %}

{% block content %}
<div class="flex flex-col md:flex-row min-h-screen relative">
  <!-- Removed gradient and decorative blobs for cleaner background -->
  
  <!-- Subtle grid pattern overlay -->
  <div class="absolute inset-0 bg-grid-slate-100 bg-[size:var(--bg-size-x)_var(--bg-size-y)] [mask-image:linear-gradient(0deg,transparent,rgba(255,255,255,0.7),transparent)] opacity-10" style="--bg-size-x:40px; --bg-size-y:40px"></div>
  
  {% if request.user.is_authenticated %}
    <!-- Mobile Console Accordion Navigation -->
    <div class="md:hidden sticky top-16 z-20 bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm" x-data="{ isExpanded: false, ...navigationMenu() }">
      <div class="flex items-center justify-between h-[52px]">
        {% flag "organizations" %}
        <!-- Context Switcher for Mobile -->
        <div class="px-4 py-2 border-r border-gray-200">
          {% include "console/includes/_context_switcher.html" %}
        </div>
        {% endflag %}
        
        <button @click="isExpanded = !isExpanded" 
                class="flex-1 flex items-center gap-2 px-4 text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors h-full">
          <i data-lucide="house" class="w-5 h-5"></i>
          Console Menu
        </button>
        <button @click="isExpanded = !isExpanded" 
                class="flex items-center justify-center w-10 h-10 mr-4 sm:mr-6 lg:mr-8 text-gray-700 hover:text-blue-600 rounded-lg transition-colors">
          <i data-lucide="chevron-down" class="w-6 h-6 transition-transform duration-200" :class="{'rotate-180': isExpanded}"></i>
        </button>
      </div>
      
      <!-- Backdrop -->
      <div x-show="isExpanded" 
           x-transition:enter="transition ease-out duration-200"
           x-transition:enter-start="opacity-0"
           x-transition:enter-end="opacity-100"
           x-transition:leave="transition ease-in duration-150"
           x-transition:leave-start="opacity-100"
           x-transition:leave-end="opacity-0"
           @click="isExpanded = false"
           class="fixed inset-0 top-[calc(4rem+3.25rem)] bg-black/20 backdrop-blur-sm z-10"
           x-cloak></div>
      
      <!-- Accordion Content (Overlay) -->
      <div x-show="isExpanded" 
           x-transition:enter="transition ease-out duration-200"
           x-transition:enter-start="opacity-0 -translate-y-2"
           x-transition:enter-end="opacity-100 translate-y-0"
           x-transition:leave="transition ease-in duration-150"
           x-transition:leave-start="opacity-100 translate-y-0"
           x-transition:leave-end="opacity-0 -translate-y-2"
           class="absolute left-0 right-0 top-full max-h-[60vh] overflow-y-auto bg-white border-b border-gray-200 shadow-lg z-20"
           x-cloak>
        <nav class="py-2">
          <a href="{% url 'agents' %}"
            class="flex items-center px-4 py-2.5 text-sm font-medium transition-colors {% if request.resolver_match.url_name == 'agents' %}bg-blue-50 text-blue-600 border-l-4 border-blue-600{% else %}text-gray-700 hover:bg-blue-50/50 hover:text-blue-600 border-l-4 border-transparent{% endif %}">
            <i data-lucide="zap" class="flex-shrink-0 w-5 h-5 mr-3 {% if request.resolver_match.url_name == 'agents' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
            Agents
          </a>
          <a href="{% url 'console-home' %}" 
             class="flex items-center px-4 py-2.5 text-sm font-medium transition-colors {% if request.resolver_match.url_name == 'console-home' %}bg-blue-50 text-blue-600 border-l-4 border-blue-600{% else %}text-gray-700 hover:bg-blue-50/50 hover:text-blue-600 border-l-4 border-transparent{% endif %}">
            <i data-lucide="bar-chart-2" class="flex-shrink-0 w-5 h-5 mr-3 {% if request.resolver_match.url_name == 'console-home' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
            Analytics
          </a>
          <a href="{% url 'tasks' %}"
              class="flex items-center px-4 py-2.5 text-sm font-medium transition-colors {% if request.resolver_match.url_name == 'tasks' %}bg-blue-50 text-blue-600 border-l-4 border-blue-600{% else %}text-gray-700 hover:bg-blue-50/50 hover:text-blue-600 border-l-4 border-transparent{% endif %}">
            <i data-lucide="clipboard" class="flex-shrink-0 w-5 h-5 mr-3 {% if request.resolver_match.url_name == 'tasks' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
              Tasks
          </a>
          <a href="{% url 'api_keys' %}"
             class="flex items-center px-4 py-2.5 text-sm font-medium transition-colors {% if request.resolver_match.url_name == 'api_keys' or request.resolver_match.url_name == 'api_key_detail' %}bg-blue-50 text-blue-600 border-l-4 border-blue-600{% else %}text-gray-700 hover:bg-blue-50/50 hover:text-blue-600 border-l-4 border-transparent{% endif %}">
            <i data-lucide="key-round" class="flex-shrink-0 w-5 h-5 mr-3 {% if request.resolver_match.url_name == 'api_keys' or request.resolver_match.url_name == 'api_key_detail' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
            API Keys
          </a>
          {% if stripe_enabled %}
          <a href="{% url 'billing' %}"
              x-show="showBilling"
              class="flex items-center px-4 py-2.5 text-sm font-medium transition-colors {% if request.resolver_match.url_name == 'billing' %}bg-blue-50 text-blue-600 border-l-4 border-blue-600{% else %}text-gray-700 hover:bg-blue-50/50 hover:text-blue-600 border-l-4 border-transparent{% endif %}">
              <i data-lucide="credit-card" class="flex-shrink-0 w-5 h-5 mr-3 {% if request.resolver_match.url_name == 'billing' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
              Billing
          </a>
          {% endif %}
          <a href="{% url 'usage' %}"
             class="flex items-center px-4 py-2.5 text-sm font-medium transition-colors {% if request.resolver_match.url_name == 'usage' %}bg-blue-50 text-blue-600 border-l-4 border-blue-600{% else %}text-gray-700 hover:bg-blue-50/50 hover:text-blue-600 border-l-4 border-transparent{% endif %}">
            <i data-lucide="chart-bar" class="flex-shrink-0 w-5 h-5 mr-3 {% if request.resolver_match.url_name == 'usage' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
            Usage
          </a>
          <a href="{% url 'console-mcp-servers' %}"
             class="flex items-center px-4 py-2.5 text-sm font-medium transition-colors {% if request.resolver_match.url_name == 'console-mcp-servers' %}bg-blue-50 text-blue-600 border-l-4 border-blue-600{% else %}text-gray-700 hover:bg-blue-50/50 hover:text-blue-600 border-l-4 border-transparent{% endif %}">
            <svg class="flex-shrink-0 w-5 h-5 mr-3 {% if request.resolver_match.url_name == 'console-mcp-servers' %}text-blue-600{% else %}text-gray-500{% endif %}"
                 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            Advanced
          </a>
          {% if current_context.type == 'organization' and current_context.id %}
            <a href="{% url 'organization_detail' org_id=current_context.id %}"
               class="flex items-center px-4 py-2.5 text-sm font-medium transition-colors {% if request.resolver_match.url_name == 'organization_detail' %}bg-blue-50 text-blue-600 border-l-4 border-blue-600{% else %}text-gray-700 hover:bg-blue-50/50 hover:text-blue-600 border-l-4 border-transparent{% endif %}">
              <i aria-hidden="true" data-lucide="building-2" class="flex-shrink-0 w-5 h-5 mr-3 {% if request.resolver_match.url_name == 'organization_detail' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
              Organization
            </a>
          {% else %}
            <a href="{% url 'profile' %}"
               class="flex items-center px-4 py-2.5 text-sm font-medium transition-colors {% if request.resolver_match.url_name == 'profile' %}bg-blue-50 text-blue-600 border-l-4 border-blue-600{% else %}text-gray-700 hover:bg-blue-50/50 hover:text-blue-600 border-l-4 border-transparent{% endif %}">
              <i aria-hidden="true" data-lucide="user-round" class="flex-shrink-0 w-5 h-5 mr-3 {% if request.resolver_match.url_name == 'profile' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
              Profile
            </a>
          {% endif %}
          <!-- Add other console-specific links here -->
        </nav>
      </div>
    </div>
    
    {# Console Sub-Navigation - only shown on medium and large screens #}
    <div class="relative z-10">
      {% include "console/includes/_console_sub_nav.html" %}
    </div>
  {% endif %}

  <!-- Main Content Area for Console -->
  <main id="console-main-content" class="relative z-35 flex-1 p-4 md:pr-8 overflow-x-auto">
    <div class="max-w-full">
      {% if current_context.type != 'organization' %}
        {% include "partials/_task_usage.html" %}
      {% endif %}
      {# This block will be overridden by child templates like console/index.html #}
      {% block console_content %}{% endblock %}
    </div>
  </main>
</div>

{# Allow child templates to add extra JavaScript #}
{% block extra_js %}{% endblock %}

<script>
function navigationMenu() {
  return {
    showBilling: {{ stripe_enabled|yesno:'true,false' }},
    hasStripe: {{ stripe_enabled|yesno:'true,false' }},
    solutionsPartnerBillingAccess: {{ solutions_partner_billing_access|yesno:'true,false' }},
    userRole: null,
    
    init() {
      if (!this.hasStripe) {
        this.showBilling = false;
        return;
      }
      // Get current context from localStorage
      const contextType = localStorage.getItem('contextType') || 'personal';
      const contextId = localStorage.getItem('contextId') || '{{ user.id }}';
      
      // Set billing visibility based on context and role
      if (contextType === 'personal') {
        // Personal account always shows billing
        this.showBilling = true;
      } else {
        // For organizations, check user role
        this.checkOrganizationRole(contextId);
      }
    },
    
    checkOrganizationRole(orgId) {
      // Get user's role in the organization from backend data
      {% for membership in user_organizations %}
      if ('{{ membership.org.id }}' === orgId) {
        this.userRole = '{{ membership.role }}';
        // Show billing only for owners, admins, and billing admins
        const billingRoles = this.solutionsPartnerBillingAccess
          ? ['owner', 'admin', 'billing_admin', 'solutions_partner']
          : ['owner', 'admin', 'billing_admin'];
        this.showBilling = billingRoles.includes(this.userRole);
      }
      {% endfor %}
    }
  }
}
</script>
{% endblock %}