@extends('layouts.app', [
    'title' => 'Inbox | VejalNai',
    'topbarTitle' => 'Shared Inbox',
    'topbarSubtitle' => $organization?->name ?? 'No organization assigned',
    'hideTopbar' => true,
])

@section('content')
    <section class="page flush">
        @if (session('status'))
            <div class="flash">{{ session('status') }}</div>
        @endif

        <div class="panel inbox-shell" style="--inbox-list-w: {{ $_COOKIE['inbox-list-w'] ?? '366' }}px; --inbox-context-w: {{ $_COOKIE['inbox-context-w'] ?? '294' }}px">
            <aside class="inbox-list" style="position: relative;">
                <div class="resizer" data-target="inbox-list-w" data-edge="right" data-default="366" data-min="200" data-max="600"></div>
                @include('conversations.partials.inbox-header')

                <div class="list-scroll">
                    @include('conversations.partials.sidebar-list')
                </div>
            </aside>

            <section class="inbox-thread">
                <div class="panel-header" style="padding: 16px;">
                    <div style="font-weight: 700; font-size: 16px; color: var(--text);">Conversation</div>
                </div>
                <div class="empty-state" style="align-self: center;">
                    Pick a thread from {{ $organization?->name ?? 'the inbox' }} to view messages, customer context, and handoff status.
                </div>
                <div></div>
            </section>

            <aside class="inbox-context" style="position: relative;">
                <div class="resizer" data-target="inbox-context-w" data-edge="left" data-default="294" data-min="0" data-max="500"></div>
                <div class="panel-header" style="padding: 16px;">
                    <div style="font-weight: 700; font-size: 16px; color: var(--text);">Context</div>
                </div>
                <div class="context-scroll" style="flex: 1; min-height: 0; padding-bottom: 24px;">
                    <div class="context-profile">
                        <span class="profile-avatar">VN</span>
                        <h2>{{ $organization?->name ?? 'VejalNai' }}</h2>
                        <span class="muted">{{ $organization?->slug ?? 'workspace' }}</span>
                        <a class="button" href="{{ route('chat-widget.show') }}" style="width: 100%;">View chat widget</a>
                    </div>
                    <div class="context-block">
                        <div class="context-title">
                            <h2>Queue health</h2>
                        </div>
                        <div class="activity-row">
                            <span class="muted">Open threads</span>
                            <strong>{{ $conversations->where('status', 'open')->count() }}</strong>
                        </div>
                        <div class="activity-row">
                            <span class="muted">Human handoffs</span>
                            <strong>{{ $conversations->where('status', 'pending_human')->count() }}</strong>
                        </div>
                    </div>
                    <div class="context-block">
                        <div class="context-title">
                            <h2>Channels</h2>
                        </div>
                        @foreach ($conversations->groupBy('channel') as $channel => $items)
                            <div class="activity-row">
                                <span class="muted">{{ ucfirst($channel) }}</span>
                                <strong>{{ $items->count() }}</strong>
                            </div>
                        @endforeach
                    </div>
                </div>
            </aside>
        </div>
    </section>

    @include('conversations.partials.inbox-scripts')
@endsection
