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

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

{# Macro for collapsible section header #}
{% macro section_header(title, section_key, icon=none) %}
<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 class="flex items-center">
        {% if icon %}
        <span x-html="$icon('{{ icon }}', 'w-4 h-4 mr-2 text-gray-400')"></span>
        {% endif %}
        {{ 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 - uses storeCode for dynamic URLs #}
{% macro menu_item(page_id, path, 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="`/store/${storeCode}/{{ path }}`">
        <span x-html="$icon('{{ icon }}', 'w-5 h-5')"></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">
    <!-- Store Branding -->
    <a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200 flex items-center"
       :href="`/store/${storeCode}/dashboard`">
        <span class="text-2xl mr-2">🏪</span>
        <span x-text="store?.name || 'Store Portal'"></span>
    </a>

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

    <!-- Products & Inventory Section -->
    {{ section_header('Products & Inventory', 'products', 'cube') }}
    {% call section_content('products') %}
        {{ menu_item('products', 'products', 'shopping-bag', 'All Products') }}
        {{ menu_item('inventory', 'inventory', 'clipboard-list', 'Inventory') }}
        {{ menu_item('marketplace', 'marketplace', 'download', 'Marketplace Import') }}
    {% endcall %}

    <!-- Sales & Orders Section -->
    {{ section_header('Sales & Orders', 'sales', 'shopping-cart') }}
    {% call section_content('sales') %}
        {{ menu_item('orders', 'orders', 'document-text', 'Orders') }}
        {{ menu_item('letzshop', 'letzshop', 'external-link', 'Letzshop Orders') }}
        {{ menu_item('invoices', 'invoices', 'currency-euro', 'Invoices') }}
    {% endcall %}

    <!-- Customers & Communication Section -->
    {{ section_header('Customers', 'customers', 'users') }}
    {% call section_content('customers') %}
        {{ menu_item('customers', 'customers', 'user-group', 'All Customers') }}
        {{ menu_item('messages', 'messages', 'chat-bubble-left-right', 'Messages') }}
        {{ menu_item('notifications', 'notifications', 'bell', 'Notifications') }}
    {% endcall %}

    <!-- Shop & Content Section -->
    {{ section_header('Shop & Content', 'shop', 'color-swatch') }}
    {% call section_content('shop') %}
        {{ menu_item('content-pages', 'content-pages', 'document-text', 'Content Pages') }}
        {{ menu_item('media', 'media', 'photograph', 'Media Library') }}
        {# Future: Theme customization, if enabled for store tier
        {{ menu_item('theme', 'theme', 'paint-brush', 'Theme') }}
        #}
    {% endcall %}

    <!-- Account & Settings Section -->
    {{ section_header('Account & Settings', 'account', 'cog') }}
    {% call section_content('account') %}
        {{ menu_item('team', 'team', 'user-group', 'Team') }}
        {{ menu_item('profile', 'profile', 'user', 'Profile') }}
        {{ menu_item('billing', 'billing', 'credit-card', 'Billing') }}
        {{ menu_item('email-templates', 'email-templates', 'mail', 'Email Templates') }}
        {{ menu_item('settings', 'settings', 'adjustments', 'Settings') }}
    {% endcall %}

    <!-- Quick Actions -->
    <div class="px-6 my-6">
        <button class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
                @click="$dispatch('open-add-product-modal')">
            <span x-html="$icon('plus', 'w-4 h-4')"></span>
            <span class="ml-2">Add Product</span>
        </button>
    </div>
</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>