@extends('layouts.portal')
@section('title', 'WhatsApp inbox')
@section('subtitle', 'One shared inbox for the academy number. New contacts become leads automatically, and every message is saved on the lead’s timeline.')
@section('actions')
  <a class="btn btn-ghost btn-sm" href="{{ route('admin.whatsapp.templates') }}"><x-icon name="file-text" :size="16"/> Templates</a>
  <a class="btn btn-primary btn-sm" href="{{ route('admin.whatsapp.campaigns') }}"><x-icon name="send" :size="16"/> Campaigns</a>
@endsection
@section('content')
@unless($ready)
  <div class="callout warn mb-2"><x-icon name="alert" :size="20"/><div><b>WhatsApp is not connected yet.</b> Add the phone number ID, token, app secret and verify token in <a href="{{ route('admin.integrations.index') }}#whatsapp">Integrations</a>, then add the webhook <code>{{ url('/webhooks/whatsapp') }}</code> in Meta. Messages already received are still shown here.</div></div>
@endunless
<div class="op-kpis">
  <div class="op-kpi {{ $stats['unread'] ? 'red' : '' }}"><span>Unread</span><b>{{ $stats['unread'] }}</b><small>customer messages waiting</small></div>
  <div class="op-kpi green"><span>Received today</span><b>{{ $stats['today_in'] }}</b><small>incoming messages</small></div>
  <div class="op-kpi"><span>Sent today</span><b>{{ $stats['today_out'] }}</b><small>replies, reminders and campaigns</small></div>
</div>

<div class="wa-inbox">
  <aside class="wa-list" aria-label="Conversations">
    <form class="wa-search" method="get" action="{{ route('admin.whatsapp.index') }}" role="search">
      <div class="searchbox"><x-icon name="search" :size="16"/><input class="input" type="search" name="q" value="{{ $q }}" placeholder="Name or number" aria-label="Search conversations"></div>
      <a class="btn btn-ghost btn-sm {{ request('filter') === 'unread' ? 'is-active' : '' }}" href="{{ route('admin.whatsapp.index', ['filter' => request('filter') === 'unread' ? null : 'unread']) }}">Unread</a>
    </form>
    @forelse($convos as $c)
      @php $m = $last[$c->last_id] ?? null; $who = $m?->lead?->name ?? $m?->user?->name ?? '+'.$c->phone; @endphp
      <a class="wa-item {{ ($contact['phone'] ?? null) === $c->phone ? 'is-active' : '' }}" href="{{ route('admin.whatsapp.show', $c->phone) }}">
        <span class="wa-av">{{ mb_strtoupper(mb_substr(ltrim($who, '+'), 0, 1)) }}</span>
        <span class="wa-item-main">
          <span class="wa-item-top"><b>{{ \Illuminate\Support\Str::limit($who, 26) }}</b><small>{{ $m?->created_at?->isToday() ? $m->created_at->format('H:i') : $m?->created_at?->format('d M') }}</small></span>
          <span class="wa-item-last">@if($m && ! $m->isInbound())<x-icon name="check" :size="13"/> @endif{{ \Illuminate\Support\Str::limit((string) $m?->body, 48) }}</span>
        </span>
        @if($c->unread)<span class="wa-unread" aria-label="{{ $c->unread }} unread">{{ $c->unread }}</span>@endif
      </a>
    @empty
      <div class="empty sm"><x-icon name="inbox" :size="28"/><p>No conversations yet. When someone messages your WhatsApp number it appears here.</p></div>
    @endforelse
  </aside>

  <section class="wa-thread" aria-label="Conversation">
    @if($contact)
      <header class="wa-head">
        <div>
          <b>{{ $contact['lead']?->name ?? $contact['user']?->name ?? '+'.$contact['phone'] }}</b>
          <div class="xs muted">+{{ $contact['phone'] }}
            @if($contact['lead']) · Lead: <a href="{{ route('admin.leads.index', ['q' => $contact['lead']->email ?: $contact['phone']]) }}">{{ \App\Services\LeadService::STAGES[$contact['lead']->status] ?? ucfirst($contact['lead']->status) }}</a>@endif
            @if($contact['user']) · {{ ucfirst(str_replace('_', ' ', $contact['user']->role)) }}@if($contact['user']->student_code) {{ $contact['user']->student_code }}@endif @endif
          </div>
        </div>
        <div class="row" style="gap:6px;flex-wrap:wrap">
          @if($contact['opted_out'])<span class="op-chip red">Opted out (STOP)</span>
          @elseif($contact['lead']?->whatsapp_opt_in || $contact['user']?->whatsapp_opt_in)<span class="op-chip green">Marketing consent</span>@endif
          <span class="op-chip {{ $contact['window'] ? 'green' : '' }}">{{ $contact['window'] ? '24-h window open' : 'Window closed: templates only' }}</span>
        </div>
      </header>
      <div class="wa-msgs" data-scroll-bottom>
        @foreach($thread as $m)
          @if($loop->first || ! $m->created_at->isSameDay($thread[$loop->index - 1]->created_at))<div class="wa-day">{{ $m->created_at->isToday() ? 'Today' : $m->created_at->format('D d M Y') }}</div>@endif
          <div class="wa-msg {{ $m->isInbound() ? 'in' : 'out' }} {{ $m->status === 'failed' ? 'failed' : '' }}">
            @if($m->template)<span class="wa-tpl">Template · {{ $m->template }}</span>@endif
            <div class="wa-body">{!! nl2br(e($m->body)) !!}</div>
            <span class="wa-meta">{{ $m->created_at->format('H:i') }}@unless($m->isInbound()) · {{ $m->sender?->name ?? ($m->campaign_id ? 'Campaign' : 'System') }} · <span class="wa-st st-{{ $m->status }}">{{ $m->status }}</span>@endunless</span>
            @if($m->error)<span class="wa-err">{{ $m->error }}</span>@endif
          </div>
        @endforeach
      </div>
      @if($contact['opted_out'])
        <div class="callout mb-0"><x-icon name="info" :size="18"/><div>This number replied STOP. Messages are blocked until they send START.</div></div>
      @else
      <form class="wa-compose" method="post" action="{{ route('admin.whatsapp.send') }}" data-wa-compose>
        @csrf
        <input type="hidden" name="phone" value="{{ $contact['phone'] }}"><input type="hidden" name="to_inbox" value="1">
        @if($contact['lead'])<input type="hidden" name="lead_id" value="{{ $contact['lead']->id }}">@endif
        <div class="wa-modes" role="radiogroup" aria-label="Message type">
          <label><input type="radio" name="mode" value="text" @checked($contact['window']) @disabled(! $contact['window'])> Message</label>
          <label><input type="radio" name="mode" value="template" @checked(! $contact['window'])> Template</label>
        </div>
        <div data-mode="text" @unless($contact['window']) hidden @endunless>
          <textarea class="textarea" name="body" rows="2" maxlength="4000" placeholder="Type a reply…" aria-label="Reply">{{ old('body') }}</textarea>
        </div>
        <div data-mode="template" @if($contact['window']) hidden @endif>
          @include('admin.whatsapp._template-picker')
        </div>
        <div class="row" style="justify-content:flex-end"><button class="btn btn-primary" type="submit" @disabled(! $ready)><x-icon name="send" :size="16"/> Send</button></div>
      </form>
      @endif
    @else
      <div class="empty"><x-icon name="whatsapp" :size="40"/><h3>Select a conversation</h3><p class="muted">Replies inside 24 hours of the customer’s last message can be free text; after that WhatsApp only allows approved templates.</p></div>
    @endif
  </section>
</div>
@endsection
@push('scripts')<script src="{{ asset_v('assets/js/ops.js') }}" nonce="{{ csp_nonce() }}" defer></script>@endpush