{# app/templates/admin/partials/sidebar.html #}
{# Collapsible sidebar sections with localStorage persistence #}

{# ============================================================================
   REUSABLE MACROS FOR SIDEBAR ITEMS
   ============================================================================ #}

{# Macro for collapsible section header #}
{% macro section_header(title, section_key) %}
<div class="px-6 my-4">
    <hr class="border-gray-200 dark:border-gray-700" />
</div>
<button
    @click="toggleSection('{{ section_key }}')"
    class="flex items-center justify-between w-full px-6 py-2 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
>
    <span>{{ title }}</span>
    <span
        x-html="$icon('chevron-down', 'w-4 h-4 transition-transform duration-200')"
        :class="{ 'rotate-180': openSections.{{ section_key }} }"
    ></span>
</button>
{% endmacro %}

{# Macro for collapsible section content wrapper #}
{% macro section_content(section_key) %}
<ul
    x-show="openSections.{{ section_key }}"
    x-transition:enter="transition-all duration-200 ease-out"
    x-transition:enter-start="opacity-0 -translate-y-2"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition-all duration-150 ease-in"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 -translate-y-2"
    class="mt-1 overflow-hidden"
>
{{ caller() }}
</ul>
{% endmacro %}

{# Macro for menu item #}
{% macro menu_item(page_id, url, icon, label) %}
<li class="relative px-6 py-3">
    <span x-show="currentPage === '{{ page_id }}'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
    <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
       :class="currentPage === '{{ page_id }}' ? 'text-gray-800 dark:text-gray-100' : ''"
       href="{{ url }}">
        <span x-html="$icon('{{ icon }}')"></span>
        <span class="ml-4">{{ label }}</span>
    </a>
</li>
{% endmacro %}

{# ============================================================================
   SIDEBAR CONTENT (shared between desktop and mobile)
   ============================================================================ #}

{% macro sidebar_content() %}
<div class="py-4 text-gray-500 dark:text-gray-400">
    <a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200" href="/admin/dashboard">
        Admin Portal
    </a>

    <!-- Dashboard (always visible) -->
    <ul class="mt-6">
        {{ menu_item('dashboard', '/admin/dashboard', 'home', 'Dashboard') }}
    </ul>

    <!-- Platform Administration Section -->
    {{ section_header('Platform Administration', 'platformAdmin') }}
    {% call section_content('platformAdmin') %}
        {{ menu_item('companies', '/admin/companies', 'office-building', 'Companies') }}
        {{ menu_item('vendors', '/admin/vendors', 'shopping-bag', 'Vendors') }}
        {{ menu_item('users', '/admin/users', 'users', 'Users') }}
        {{ menu_item('customers', '/admin/customers', 'user-group', 'Customers') }}
    {% endcall %}

    <!-- Product Catalog Section -->
    {{ section_header('Product Catalog', 'productCatalog') }}
    {% call section_content('productCatalog') %}
        {{ menu_item('marketplace-products', '/admin/marketplace-products', 'database', 'Marketplace Products') }}
        {{ menu_item('vendor-products', '/admin/vendor-products', 'cube', 'Vendor Products') }}
        {{ menu_item('marketplace', '/admin/marketplace', 'cloud-download', 'Import') }}
        {{ menu_item('letzshop', '/admin/letzshop', 'shopping-cart', 'Letzshop Orders') }}
    {% endcall %}

    <!-- Content Management Section -->
    {{ section_header('Content Management', 'contentMgmt') }}
    {% call section_content('contentMgmt') %}
        {{ menu_item('platform-homepage', '/admin/platform-homepage', 'home', 'Platform Homepage') }}
        {{ menu_item('content-pages', '/admin/content-pages', 'document-text', 'Content Pages') }}
        {{ menu_item('vendor-theme', '/admin/vendor-themes', 'color-swatch', 'Vendor Themes') }}
    {% endcall %}

    <!-- Developer Tools Section -->
    {{ section_header('Developer Tools', 'devTools') }}
    {% call section_content('devTools') %}
        {{ menu_item('components', '/admin/components', 'view-grid', 'Components') }}
        {{ menu_item('icons', '/admin/icons', 'photograph', 'Icons') }}
    {% endcall %}

    <!-- Platform Health Section -->
    {{ section_header('Platform Health', 'platformHealth') }}
    {% call section_content('platformHealth') %}
        {{ menu_item('testing', '/admin/testing', 'beaker', 'Testing Hub') }}
        {{ menu_item('code-quality', '/admin/code-quality', 'shield-check', 'Code Quality') }}
        {{ menu_item('background-tasks', '/admin/background-tasks', 'collection', 'Background Tasks') }}
    {% endcall %}

    <!-- Platform Monitoring Section -->
    {{ section_header('Platform Monitoring', 'monitoring') }}
    {% call section_content('monitoring') %}
        {{ menu_item('imports', '/admin/imports', 'cube', 'Import Jobs') }}
        {{ menu_item('logs', '/admin/logs', 'document-text', 'Application Logs') }}
    {% endcall %}

    <!-- Settings Section -->
    {{ section_header('Settings', 'settingsSection') }}
    {% call section_content('settingsSection') %}
        {{ menu_item('settings', '/admin/settings', 'cog', 'General') }}
        {{ menu_item('profile', '/admin/profile', 'user-circle', 'Profile') }}
        {{ menu_item('api-keys', '/admin/api-keys', 'key', 'API Keys') }}
        {{ menu_item('notifications-settings', '/admin/notifications-settings', 'bell', 'Notifications') }}
    {% endcall %}
</div>
{% endmacro %}

{# ============================================================================
   DESKTOP SIDEBAR
   ============================================================================ #}

<aside class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0">
    {{ sidebar_content() }}
</aside>

{# ============================================================================
   MOBILE SIDEBAR
   ============================================================================ #}

<!-- Mobile sidebar backdrop -->
<div x-show="isSideMenuOpen"
     x-transition:enter="transition ease-in-out duration-150"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in-out duration-150"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"></div>

<!-- Mobile sidebar panel -->
<aside class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
       x-show="isSideMenuOpen"
       x-transition:enter="transition ease-in-out duration-150"
       x-transition:enter-start="opacity-0 transform -translate-x-20"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in-out duration-150"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0 transform -translate-x-20"
       @click.away="closeSideMenu"
       @keydown.escape="closeSideMenu">
    {{ sidebar_content() }}
</aside>