{{-- Ported from the design's sidebar.php. Chats and user are ours. --}}
<aside class="mb-sidebar">
    <div class="mb-side-top">
        <a href="{{ route('chat.show') }}" class="mb-logo" aria-label="{{ config('app.name') }} home">
            @include('partials.mb.logo')
        </a>
        <button class="mb-icon-btn" data-action="toggle-sidebar" aria-label="Toggle sidebar"><i class="bi bi-layout-sidebar"></i></button>
    </div>

    <div class="mb-side-scroll">
        <div class="mb-rail-search">
            <a href="{{ route('chat.new') }}" class="mb-nav" title="New chat">
                <i class="bi bi-plus-lg"></i><span class="mb-label">New chat</span>
            </a>
        </div>

        <div class="mb-chats">
            <div class="mb-chats-head">
                <button class="mb-icon-btn mb-icon-sm" aria-label="Collapse chats"><i class="bi bi-chevron-down"></i></button>
                <span>Chats</span>
                <button class="mb-icon-btn" data-action="open-search" aria-label="Search chats"><i class="bi bi-search"></i></button>
                <button class="mb-icon-btn" aria-label="Filter chats"><i class="bi bi-sliders2"></i></button>
            </div>
            <div class="mb-chat-list" id="chatList">
                @foreach ($conversations ?? [] as $conversation)
                    <a class="mb-chat-row{{ ($conversationId ?? null) === $conversation->id ? ' active' : '' }}"
                       href="{{ route('chat.show', ['conversation' => $conversation->id]) }}"
                       data-id="{{ $conversation->id }}">
                        <span class="mb-chat-name">{{ $conversation->title ?: 'Untitled' }}</span>
                    </a>
                @endforeach
            </div>
            <div class="mb-chat-hint" id="chatEmpty" @if (count($conversations ?? [])) hidden @endif>No chats yet.</div>
        </div>

        {{-- AdStudio: ported from the design's sidebar.php nav-row + creative-history.php panel. --}}
        <div class="mb-nav-row{{ request()->routeIs('creatives.*') ? ' active' : '' }}">
            <a href="{{ route('creatives.index') }}" class="mb-nav{{ request()->routeIs('creatives.*') ? ' active' : '' }}" title="AdStudio" wire:navigate>
                <i class="bi bi-palette"></i><span class="mb-label">AdStudio</span>
            </a>
            <button type="button" class="mb-nav-toggle" data-action="toggle-nav" data-target="creativeNav" aria-expanded="true" aria-controls="creativeNav" aria-label="Toggle AdStudio">
                <i class="bi bi-chevron-down"></i>
            </button>
        </div>
        <div class="mb-nav-panel" id="creativeNav">
            @if ($recentCreatives->isEmpty())
                <div class="mb-nav-empty">No creatives yet</div>
            @else
                <div class="mb-side-head">
                    <span>Recent creatives</span>
                    <a href="{{ route('creatives.index') }}" class="mb-side-head-link" wire:navigate>All</a>
                </div>
                @foreach ($recentCreatives as $item)
                    @php
                        $itemName = $item->prompt ?? $item->product_url ?? ('Creative #'.$item->id);
                        // The design's dot only knows completed/generating/queued/failed; our
                        // "processing" (queued job actively rendering) reads as "generating" too.
                        $itemDot = $item->status === 'processing' ? 'generating' : $item->status;
                    @endphp
                    <a class="mb-hist{{ request()->routeIs('creatives.show') && request()->route('creative')?->id === $item->id ? ' active' : '' }}"
                       href="{{ route('creatives.show', $item) }}" wire:navigate
                       title="{{ $itemName }} — {{ $item->status }}">
                        <span class="mb-hist-dot is-{{ $itemDot }}"></span>
                        <span class="mb-hist-name">{{ $itemName }}</span>
                        <span class="mb-hist-time">{{ $item->created_at->diffForHumans(null, true) }}</span>
                    </a>
                @endforeach
            @endif
        </div>
    </div>

    <div class="mb-side-bottom">
        <div class="mb-user" data-pop="user" role="button" tabindex="0" aria-haspopup="menu">
            <span class="mb-avatar">{{ strtoupper(substr(auth()->user()?->name ?? '?', 0, 1)) }}</span>
            <span class="mb-user-text">
                <div class="mb-user-name">{{ auth()->user()?->name }}</div>
                <div class="mb-user-plan">{{ auth()->user()?->email }}</div>
            </span>
            <span class="mb-icon-btn mb-user-gear ms-auto" aria-hidden="true"><i class="bi bi-gear"></i></span>
        </div>
    </div>

    @include('partials.mb.user-menu')
</aside>