{{--
    Inbox workspace — three direct children inside this root:
      1. Views column (w-60 shrink-0)
      2. Ticket list column (w-80 shrink-0)
      3. Conversation pane (flex-1 min-w-0)
    The Conversation child renders the 4th column (right context)
    inside the pane.

    Width-collapse guards:
      - root has `min-w-0 overflow-hidden` so flex children that
        contain long text don't push the page wider than the
        viewport.
      - each fixed-width column has `shrink-0`.
      - flex-1 columns also have `min-w-0`.
--}}
<div class="flex h-full min-h-0 w-full min-w-0 overflow-hidden bg-zinc-100 dark:bg-zinc-950" data-test="workspace">
    {{-- ─── Views column ───────────────────────────────────── --}}
    <aside
        class="flex min-h-0 w-52 shrink-0 flex-col gap-5 overflow-y-auto border-r border-zinc-200 bg-zinc-50 px-3 py-4 dark:border-zinc-800 dark:bg-zinc-900"
        data-test="views-sidebar"
    >
        @php
            // Primary source: tenant-scoped CurrentAccount (set by
            // Workspace::render's resolveCurrentAccount). Fallback:
            // the auth user's current_account relationship, so the
            // header is structurally stable even if a future refactor
            // breaks the singleton resolution path. This block is
            // read-only — never assign account_id from it.
            $account = app(\App\Support\CurrentAccount::class)->get()
                ?? auth()->user()?->currentAccount;
        @endphp
        <div class="px-2" data-test="workspace-header">
            <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ __('Workspace') }}</div>
            <div class="mt-1 truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100" data-test="workspace-name">
                {{ $account?->name }}
            </div>
        </div>

        <div>
            <div class="px-2 text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ __('Views') }}</div>
            <nav class="mt-2 flex flex-col gap-0.5">
                @php
                    $viewItem = fn (string $active, string $value) =>
                        'flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm '
                        . ($active === $value
                            ? 'bg-white font-medium text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-zinc-100'
                            : 'text-zinc-600 hover:bg-white dark:text-zinc-400 dark:hover:bg-zinc-800');
                @endphp

                <button
                    type="button"
                    wire:click="$set('viewFilter', 'mine')"
                    class="{{ $viewItem($viewFilter, 'mine') }}"
                    data-test="view-mine"
                    data-active="{{ $viewFilter === 'mine' ? 'true' : 'false' }}"
                >
                    <flux:icon.user class="size-4 text-zinc-500" />
                    {{ __('Assigned to me') }}
                </button>
                <button
                    type="button"
                    wire:click="$set('viewFilter', 'unassigned')"
                    class="{{ $viewItem($viewFilter, 'unassigned') }}"
                    data-test="view-unassigned"
                    data-active="{{ $viewFilter === 'unassigned' ? 'true' : 'false' }}"
                >
                    <flux:icon.inbox class="size-4 text-zinc-500" />
                    {{ __('Unassigned') }}
                </button>
                <button
                    type="button"
                    wire:click="$set('viewFilter', 'all')"
                    class="{{ $viewItem($viewFilter, 'all') }}"
                    data-test="view-all"
                    data-active="{{ $viewFilter === 'all' ? 'true' : 'false' }}"
                >
                    <flux:icon.queue-list class="size-4 text-zinc-500" />
                    {{ __('All tickets') }}
                </button>
            </nav>
        </div>

        <div>
            <div class="px-2 text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ __('Status') }}</div>
            <flux:select wire:model.live="statusFilter" size="sm" class="mt-2" data-test="inbox-status-filter">
                <flux:select.option value="all">{{ __('All statuses') }}</flux:select.option>
                @foreach (\App\Enums\TicketStatus::cases() as $status)
                    <flux:select.option :value="$status->value">{{ ucfirst($status->value) }}</flux:select.option>
                @endforeach
            </flux:select>
        </div>

        <div>
            <div class="px-2 text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ __('Store') }}</div>
            <flux:select wire:model.live="storeFilter" size="sm" class="mt-2" data-test="inbox-store-filter">
                <flux:select.option value="">{{ __('All stores') }}</flux:select.option>
                <flux:select.option value="unassigned" data-test="store-option-unassigned">
                    {{ __('Unassigned store') }}
                </flux:select.option>
                @foreach ($this->availableStores as $store)
                    <flux:select.option :value="(string) $store->id">{{ $store->name }}</flux:select.option>
                @endforeach
            </flux:select>
        </div>

        <div class="mt-auto">
            <flux:button
                :href="route('tickets.create')"
                variant="primary"
                size="sm"
                wire:navigate
                icon="plus"
                class="w-full"
                data-test="workspace-new-ticket"
            >
                {{ __('New ticket') }}
            </flux:button>
        </div>
    </aside>

    {{-- ─── Ticket list column ─────────────────────────────── --}}
    {{-- Width discipline — belt-and-braces:
           • `w-72` sets width: 18rem (288px).
           • `basis-72` sets flex-basis: 18rem so flex math can't
             collapse the column even if a future ancestor changes
             how `width:` interacts with flex.
           • `shrink-0` is the load-bearing class — without it the
             column could shrink to fit the conversation pane's
             content under flex auto-shrink, "sliding" the ticket
             list behind the conversation pane.
           • `overflow-x-hidden` prevents long subject lines from
             pushing horizontal scroll into the column.
         `min-h-0` lets the inner scroll container shrink so the
         ticket list scrolls instead of pushing the pagination bar
         below the viewport.
         Inline `style` is a final defence in depth — if Tailwind's
         JIT misses w-72 / basis-72 for any reason, the literal CSS
         still pins the column. The data-test attributes below let
         WorkspaceTest assert the load-bearing classes survive
         every refactor. --}}
    <div
        class="flex min-h-0 w-72 shrink-0 basis-72 flex-col overflow-hidden overflow-x-hidden border-r border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900"
        style="width: 18rem; min-width: 18rem; max-width: 18rem; flex-basis: 18rem;"
        data-test="ticket-list"
        data-test-classes="w-72 shrink-0 basis-72 overflow-x-hidden"
    >
        <div class="flex shrink-0 items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
            <flux:heading size="sm">
                @switch($viewFilter)
                    @case('mine') {{ __('Assigned to me') }} @break
                    @case('unassigned') {{ __('Unassigned') }} @break
                    @default {{ __('All tickets') }}
                @endswitch
            </flux:heading>
            <span class="text-xs text-zinc-500 dark:text-zinc-400" data-test="ticket-list-count">
                {{ $this->tickets->total() }}
            </span>
        </div>

        {{-- Scroll wrapper: vertical only. `overflow-x-hidden` is the
             load-bearing class — without it a long subject line or
             customer name could push horizontal scroll and visually
             "tuck" the list under the conversation pane. --}}
        <div class="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
            <div class="flex min-w-0 flex-col divide-y divide-zinc-100 dark:divide-zinc-800">
                @forelse ($this->tickets as $ticket)
                    @php
                        $isSelected = $ticket->id === $this->selectedTicketId;
                    @endphp
                    {{-- Layout containment for the ticket-list row.
                         ════════════════════════════════════════════
                         DEVTOOLS-STYLE DIAGNOSIS of the "list bleeds
                         under the conversation pane" regression:

                         Tailwind's `truncate` utility expands to
                         `overflow: hidden; text-overflow: ellipsis;
                         white-space: nowrap;`. Those three together
                         only clip text if the element's effective
                         display is BLOCK or INLINE-BLOCK. A bare
                         `<span>` is `display: inline` — even when
                         it's a flex item, inline content boxes are
                         allowed to bleed beyond the flex item's
                         constrained width because the span itself
                         doesn't establish a containing block for
                         the overflow. The visible symptom is
                         exactly what the operator reported: the
                         customer name and store name "slide out
                         from under the column".

                         The fix is row-level: every text leaf that
                         needs to truncate is now a `<div>` (or has
                         an explicit `block` class), every flex row
                         carries `min-w-0`, every overflowing axis
                         is clipped at the row level so nothing can
                         escape the column's width — even if the
                         flex math has a momentary off-by-one
                         miscalculation.
                         ════════════════════════════════════════════ --}}
                    <button
                        type="button"
                        wire:click="selectTicket({{ $ticket->id }})"
                        class="flex w-full min-w-0 max-w-full flex-col gap-1 overflow-hidden px-4 py-3 text-left transition-colors {{ $isSelected ? 'bg-blue-50 dark:bg-blue-950/30' : 'hover:bg-zinc-50 dark:hover:bg-zinc-800/50' }}"
                        data-test="ticket-list-item"
                        data-test-classes="w-full min-w-0 overflow-hidden"
                        data-ticket-id="{{ $ticket->id }}"
                        data-selected="{{ $isSelected ? 'true' : 'false' }}"
                    >
                        {{-- Row 1: customer name + time. The wrapper
                             is `flex min-w-0 w-full overflow-hidden`
                             so the customer-name child has a
                             constrained width to truncate against. --}}
                        <div
                            class="flex w-full min-w-0 items-center justify-between gap-2 overflow-hidden"
                            data-test="ticket-row-header"
                        >
                            {{-- Customer name — block-level so
                                 `truncate` actually clips (a bare
                                 <span> is inline and lets content
                                 bleed past the flex item's width). --}}
                            <div
                                class="block min-w-0 flex-1 truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100"
                                data-test="ticket-row-customer"
                            >
                                @if ($ticket->customer)
                                    {{ $ticket->customer->name ?: $ticket->customer->email }}
                                @else
                                    <span class="text-zinc-400 dark:text-zinc-500">{{ __('No customer') }}</span>
                                @endif
                            </div>
                            {{-- "5m ago"-style timestamp; shrink-0
                                 because we want this to stay
                                 readable even when the customer
                                 name is huge. --}}
                            <span
                                class="shrink-0 text-xs text-zinc-500 dark:text-zinc-400"
                                data-test="ticket-row-time"
                            >
                                {{ $ticket->updated_at->diffForHumans(short: true) }}
                            </span>
                        </div>

                        {{-- Row 2: ticket subject — block-level div
                             so truncate clips. --}}
                        <div
                            class="block w-full min-w-0 max-w-full truncate text-sm text-zinc-700 dark:text-zinc-200"
                            data-test="ticket-row-subject"
                        >{{ $ticket->subject }}</div>

                        {{-- Row 3 (optional): latest-message snippet.
                             `Str::limit(..., 80)` is the PHP-side
                             belt; `truncate` is the CSS braces. --}}
                        @if ($ticket->latestMessage)
                            <div
                                class="block w-full min-w-0 max-w-full truncate text-xs text-zinc-500 dark:text-zinc-400"
                                data-test="ticket-row-snippet"
                            >
                                {{ \Illuminate\Support\Str::limit($ticket->latestMessage->body, 80) }}
                            </div>
                        @endif

                        {{-- Row 4: badges + optional store name.
                             `flex-wrap` would push badges onto a
                             new line and lengthen the row visually
                             on narrow widths; we keep nowrap and
                             rely on `overflow-hidden` + truncate on
                             the store name to clip cleanly. --}}
                        <div
                            class="mt-1 flex w-full min-w-0 max-w-full items-center gap-1 overflow-hidden"
                            data-test="ticket-row-meta"
                        >
                            <flux:badge
                                size="sm"
                                :color="match ($ticket->status) {
                                    \App\Enums\TicketStatus::Open => 'sky',
                                    \App\Enums\TicketStatus::Pending => 'amber',
                                    \App\Enums\TicketStatus::Resolved => 'lime',
                                    \App\Enums\TicketStatus::Closed => 'zinc',
                                }"
                            >
                                {{ ucfirst($ticket->status->value) }}
                            </flux:badge>
                            @if ($ticket->priority !== \App\Enums\TicketPriority::Normal)
                                <flux:badge
                                    size="sm"
                                    :color="match ($ticket->priority) {
                                        \App\Enums\TicketPriority::Urgent => 'red',
                                        \App\Enums\TicketPriority::High => 'orange',
                                        default => 'zinc',
                                    }"
                                >
                                    {{ ucfirst($ticket->priority->value) }}
                                </flux:badge>
                            @endif
                            @if ($ticket->store)
                                {{-- Store name — `inline-block` so
                                     truncate works on what was
                                     previously a bleeding `<span>`.
                                     `min-w-0 flex-1` lets it absorb
                                     whatever horizontal space the
                                     badges leave. --}}
                                <span
                                    class="ml-1 inline-block min-w-0 flex-1 truncate text-xs text-zinc-500 dark:text-zinc-400"
                                    data-test="ticket-row-store"
                                >{{ $ticket->store->name }}</span>
                            @endif
                        </div>
                    </button>
                @empty
                    <div class="p-8 text-center text-sm text-zinc-500 dark:text-zinc-400" data-test="ticket-list-empty">
                        {{ __('No tickets match these filters.') }}
                    </div>
                @endforelse
            </div>
        </div>

        <div class="shrink-0 border-t border-zinc-200 p-2 dark:border-zinc-800">
            {{ $this->tickets->links() }}
        </div>
    </div>

    {{-- ─── Conversation pane (renders Conversation child) ── --}}
    {{-- Explicit `h-full` + `min-h-0` + `min-w-0` + `overflow-hidden`
         on the pane:
           • `min-w-0` is the load-bearing class — without it, a long
             unbroken token inside the conversation (a customer URL,
             a tracking link, a `<pre>` block) could push the pane's
             min-content width above the available flex space and
             squeeze the ticket-list column to the side / under
             other content.
           • `flex-1` lets the pane fill remaining horizontal space
             after the views aside + ticket list have taken their
             fixed widths.
           • `overflow-hidden` clips any inner overflow at the pane
             edge instead of letting it escape sideways onto the
             ticket list.
         The Conversation child relies on a definite parent height
         to make the timeline's `flex-1 overflow-y-auto` actually
         scroll — without `h-full` + `min-h-0` here, stretched-flex
         height propagation through `<main>` → workspace root →
         pane is unreliable in some browsers and the timeline ends
         up sizing to content. --}}
    <div
        class="flex h-full min-h-0 min-w-0 flex-1 overflow-hidden bg-white dark:bg-zinc-950"
        data-test="conversation-pane"
        data-test-classes="flex-1 min-w-0 overflow-hidden"
    >
        @if ($this->selectedTicketId !== null)
            <livewire:tickets.conversation
                :ticket-id="$this->selectedTicketId"
                :key="'conv-' . $this->selectedTicketId"
            />
        @else
            <div class="flex flex-1 items-center justify-center bg-white p-8 dark:bg-zinc-950" data-test="conversation-no-selection">
                <div class="max-w-sm text-center">
                    <flux:icon.envelope-open class="mx-auto size-12 text-zinc-300 dark:text-zinc-700" />
                    <flux:heading class="mt-4">{{ __('Select a ticket') }}</flux:heading>
                    <flux:subheading>
                        {{ __('Pick a conversation from the list to view its messages, customer context, and add internal notes.') }}
                    </flux:subheading>
                </div>
            </div>
        @endif
    </div>
</div>