@extends('layouts.admin')
@section('title', 'CRM Inbox')
@section('content')
@php
  $statusTone = fn ($s) => match ($s) { 'open' => 'success', 'snoozed' => 'warning', 'closed' => 'muted', default => 'info' };
  $pills = [
    ['label' => 'All', 'url' => route('admin.crm.inbox.index'), 'active' => !request()->hasAny(['status','unread','assignee_id','channel'])],
    ['label' => 'Open', 'url' => route('admin.crm.inbox.index', ['status' => 'open']), 'active' => request('status')==='open', 'count' => $stats['open']],
    ['label' => 'Unread', 'url' => route('admin.crm.inbox.index', ['unread' => 1]), 'active' => (bool) request('unread'), 'count' => $stats['unread']],
    ['label' => 'Mine', 'url' => route('admin.crm.inbox.index', ['assignee_id' => auth()->id(), 'status' => 'open']), 'active' => (int) request('assignee_id') === (int) auth()->id(), 'count' => $stats['mine']],
    ['label' => 'Snoozed', 'url' => route('admin.crm.inbox.index', ['status' => 'snoozed']), 'active' => request('status')==='snoozed', 'count' => $stats['snoozed']],
  ];
@endphp
<x-crm.shell title="Inbox" subtitle="Intercom-style workspace — thread, reply, and customer context without leaving the page.">
    <x-slot:stats>
        <x-crm.stat label="Open" :value="$stats['open']" />
        <x-crm.stat label="Unread" :value="$stats['unread']" :tone="$stats['unread'] ? 'warning' : null" />
        <x-crm.stat label="Assigned to you" :value="$stats['mine']" />
        <x-crm.stat label="Snoozed" :value="$stats['snoozed']" />
    </x-slot:stats>
    <x-slot:filters>
        <div class="flex flex-wrap items-center gap-3">
            <x-crm.pills :items="$pills" />
            <form method="get" action="{{ route('admin.crm.inbox.index') }}" class="ml-auto flex min-w-[12rem] flex-1 max-w-sm gap-2">
                @foreach(request()->except(['q','page']) as $k => $v)
                    @if(filled($v) && !is_array($v))<input type="hidden" name="{{ $k }}" value="{{ $v }}">@endif
                @endforeach
                <input type="search" name="q" value="{{ request('q') }}" placeholder="Search subject or lead…" class="admin-input">
            </form>
        </div>
    </x-slot:filters>

    <div class="crm-workspace crm-workspace-3">
        <aside class="crm-pane bg-[#fbfbfc]">
            <div class="crm-pane-scroll">
                @forelse($conversations as $conversation)
                    @php $preview = $conversation->messages->first(); @endphp
                    <a href="{{ route('admin.crm.inbox.index', array_merge(request()->except('c'), ['c' => $conversation->id])) }}"
                       class="crm-thread-row {{ ($active?->id === $conversation->id) ? 'is-active' : '' }}">
                        <div class="flex items-start gap-3">
                            <x-crm.avatar :name="$conversation->lead?->name ?: $conversation->subject" size="sm" />
                            <div class="min-w-0 flex-1">
                                <div class="flex items-start justify-between gap-2">
                                    <div class="truncate text-sm font-semibold text-[#202223]">{{ $conversation->subject ?: 'No subject' }}</div>
                                    <div class="shrink-0 text-[10px] text-[#8c9196]">{{ $conversation->last_message_at?->diffForHumans(null, true) }}</div>
                                </div>
                                <div class="mt-0.5 truncate text-xs text-[#6d7175]">{{ \Illuminate\Support\Str::limit($preview?->body_text, 80) }}</div>
                                <div class="mt-2 flex flex-wrap items-center gap-1.5">
                                    <x-admin.badge :tone="$statusTone($conversation->status)">{{ $conversation->status }}</x-admin.badge>
                                    <span class="text-[10px] uppercase tracking-wide text-[#8c9196]">{{ $conversation->channel }}</span>
                                    @if($conversation->unread_count > 0)
                                        <span class="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[#2c6ecb] px-1 text-[10px] font-bold text-white">{{ $conversation->unread_count }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="p-8"><x-admin.empty title="Inbox zero" description="Form and email threads land here." /></div>
                @endforelse
            </div>
            <div class="border-t border-[var(--color-admin-border)] p-3">{{ $conversations->withQueryString()->links() }}</div>
        </aside>

        <section class="crm-pane min-h-[28rem]">
            @if($active)
                <header class="flex flex-wrap items-start justify-between gap-3 border-b border-[var(--color-admin-border)] px-5 py-4">
                    <div class="min-w-0">
                        <h2 class="truncate text-lg font-semibold tracking-tight">{{ $active->subject ?: 'Conversation' }}</h2>
                        <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-[#6d7175]">
                            <x-admin.badge :tone="$statusTone($active->status)">{{ $active->status }}</x-admin.badge>
                            <span>{{ $active->channel }}</span>
                            @if($active->assignee)<span>· {{ $active->assignee->name }}</span>@endif
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-1.5">
                        <form method="post" action="{{ route('admin.crm.inbox.assign', $active) }}" class="flex gap-1">
                            @csrf
                            <select name="assignee_id" class="admin-input !py-1.5 text-xs">
                                <option value="">Unassigned</option>
                                @foreach($staff as $user)
                                    <option value="{{ $user->id }}" @selected($active->assignee_id === $user->id)>{{ $user->name }}</option>
                                @endforeach
                            </select>
                            <button class="admin-btn !py-1.5 text-xs">Assign</button>
                        </form>
                        <form method="post" action="{{ route('admin.crm.inbox.snooze', $active) }}" class="flex gap-1">
                            @csrf
                            <select name="hours" class="admin-input !py-1.5 text-xs">
                                <option value="4">4h</option>
                                <option value="24" selected>1d</option>
                                <option value="72">3d</option>
                                <option value="168">1w</option>
                            </select>
                            <button class="admin-btn !py-1.5 text-xs">Snooze</button>
                        </form>
                        @if($active->status !== 'closed')
                            <form method="post" action="{{ route('admin.crm.inbox.close', $active) }}">@csrf
                                <button class="admin-btn !py-1.5 text-xs">Close</button>
                            </form>
                        @else
                            <form method="post" action="{{ route('admin.crm.inbox.reopen', $active) }}">@csrf
                                <button class="admin-btn admin-btn-primary !py-1.5 text-xs">Reopen</button>
                            </form>
                        @endif
                    </div>
                </header>

                <div class="crm-pane-scroll space-y-3 bg-[linear-gradient(180deg,#f7f8fa_0%,#fbfbfc_100%)] px-5 py-5">
                    @foreach($active->messages as $message)
                        @php
                            $isNote = $message->direction === 'note';
                            $isOut = $message->direction === 'outbound';
                        @endphp
                        <div class="flex {{ $isOut || $isNote ? 'justify-end' : 'justify-start' }}">
                            <div class="crm-bubble {{ $isNote ? 'crm-bubble-note' : ($isOut ? 'crm-bubble-out' : 'crm-bubble-in') }}">
                                <div class="mb-1 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wide opacity-60">
                                    <span>{{ $isNote ? 'Internal note' : ($isOut ? 'You' : 'Customer') }}</span>
                                    <span>{{ $message->created_at?->format('d M · H:i') }}</span>
                                </div>
                                <div class="whitespace-pre-wrap">{!! nl2br(e($message->body_text)) !!}</div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <footer class="grid gap-3 border-t border-[var(--color-admin-border)] bg-white p-4 lg:grid-cols-2">
                    <form method="post" action="{{ route('admin.crm.inbox.reply', $active) }}" class="space-y-2">
                        @csrf
                        <label class="admin-label">Reply</label>
                        <textarea name="body" rows="3" required class="admin-input" placeholder="Write a customer-facing reply…"></textarea>
                        <button class="admin-btn admin-btn-primary">Send reply</button>
                    </form>
                    <form method="post" action="{{ route('admin.crm.inbox.note', $active) }}" class="space-y-2">
                        @csrf
                        <label class="admin-label">Internal note</label>
                        <textarea name="body" rows="3" required class="admin-input" placeholder="Visible only to staff…"></textarea>
                        <button class="admin-btn">Add note</button>
                    </form>
                </footer>
            @else
                <div class="flex flex-1 flex-col items-center justify-center gap-3 p-10 text-center">
                    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#f1f2f4] text-[#8c9196]">
                        <i data-lucide="inbox" class="h-6 w-6"></i>
                    </div>
                    <div>
                        <div class="font-semibold">Select a conversation</div>
                        <p class="mt-1 text-sm text-[#6d7175]">Pick a thread to reply, assign, or snooze.</p>
                    </div>
                </div>
            @endif
        </section>

        <aside class="crm-pane hidden bg-[#fbfbfc] lg:flex">
            <div class="crm-pane-scroll p-4">
                @if($active)
                    <div class="mb-5 flex items-center gap-3">
                        <x-crm.avatar :name="$active->lead?->name ?: 'Guest'" size="lg" />
                        <div class="min-w-0">
                            <div class="truncate font-semibold">{{ $active->lead?->name ?: 'Unknown contact' }}</div>
                            <div class="truncate text-xs text-[#6d7175]">{{ $active->lead?->email }}</div>
                        </div>
                    </div>
                    @if($active->lead)
                        <a href="{{ route('admin.leads.show', $active->lead) }}" class="admin-btn mb-4 w-full justify-center text-xs">Open lead 360</a>
                        <dl class="mb-5 space-y-2 text-xs">
                            <div class="flex justify-between gap-2"><dt class="text-[#8c9196]">Company</dt><dd class="font-medium">{{ $active->lead->company ?: '—' }}</dd></div>
                            <div class="flex justify-between gap-2"><dt class="text-[#8c9196]">Score</dt><dd class="font-medium">{{ $active->lead->score ?? 0 }}</dd></div>
                            <div class="flex justify-between gap-2"><dt class="text-[#8c9196]">Owner</dt><dd class="font-medium">{{ $active->lead->owner?->name ?: '—' }}</dd></div>
                        </dl>
                    @endif
                    <h3 class="mb-2 text-[11px] font-bold uppercase tracking-wide text-[#8c9196]">Related quotes</h3>
                    <div class="mb-5 space-y-1.5">
                        @forelse($context['quotes'] as $quote)
                            <a href="{{ route('admin.crm.quotes.show', $quote) }}" class="block rounded-lg border border-[var(--color-admin-border)] bg-white px-3 py-2 text-xs hover:border-[#2c6ecb]/40">
                                <div class="font-semibold">{{ $quote->number }}</div>
                                <div class="text-[#6d7175]">{{ $quote->currency }} {{ number_format($quote->total_cents/100, 2) }} · {{ $quote->status }}</div>
                            </a>
                        @empty
                            <p class="text-xs text-[#8c9196]">No quotes linked.</p>
                        @endforelse
                    </div>
                    <h3 class="mb-2 text-[11px] font-bold uppercase tracking-wide text-[#8c9196]">Opportunities</h3>
                    <div class="space-y-1.5">
                        @forelse($context['opportunities'] as $opp)
                            <a href="{{ route('admin.crm.opportunities.show', $opp) }}" class="block rounded-lg border border-[var(--color-admin-border)] bg-white px-3 py-2 text-xs hover:border-[#2c6ecb]/40">
                                <div class="font-semibold">{{ $opp->title }}</div>
                                <div class="text-[#6d7175]">{{ $opp->stage?->name }} · AUD {{ number_format($opp->amount_cents/100, 0) }}</div>
                            </a>
                        @empty
                            <p class="text-xs text-[#8c9196]">No opportunities yet.</p>
                        @endforelse
                    </div>
                @else
                    <p class="text-sm text-[#6d7175]">Customer context appears when a thread is open.</p>
                @endif
            </div>
        </aside>
    </div>
</x-crm.shell>
@endsection