@include('whatsappcenter::admin.partials.styles')
<div class="wac-page container-fluid">

  <div class="wac-page-header">
    <div>
      <h4 class="wac-title">WhatsApp Center</h4>
      <p class="wac-subtitle">Bot management, AI training &amp; bulk campaigns</p>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ route('admin.whatsappcenter.replies.create') }}" class="wac-btn-primary" style="padding:.5rem 1.1rem;font-size:.82rem">
        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add Auto Reply
      </a>
      <a href="{{ route('admin.whatsappcenter.settings.index') }}" class="wac-btn-secondary" style="padding:.48rem 1rem;font-size:.82rem">
        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg> Settings
      </a>
    </div>
  </div>

  {{-- Stats ─────────────────────────────────────────────────────────────────── --}}
  <div class="row g-3 mb-4">
    @foreach([
      ['Total Contacts',    $stats['total_conversations'], '#25D366', '💬'],
      ['Active Today',      $stats['active_today'],        '#3b82f6', '🟢'],
      ['Pending Handovers', $stats['pending_handovers'],   '#f59e0b', '🔔'],
      ['Active Replies',    $stats['total_replies'],       '#8b5cf6', '🤖'],
      ['KB Sources',        $stats['training_sources'],    '#0ea5e9', '📚'],
      ['Campaigns Sent',    $stats['campaigns_sent'],      '#64748b', '📣'],
    ] as [$lbl,$val,$color,$ico])
    <div class="col-xl-2 col-sm-4 col-6">
      <div class="wac-stat" style="--wac-accent:{{ $color }}">
        <div class="ico">{{ $ico }}</div>
        <div class="val">{{ $val }}</div>
        <div class="lbl">{{ $lbl }}</div>
      </div>
    </div>
    @endforeach
  </div>

  <div class="row g-4">

    {{-- Quick Nav ──────────────────────────────────────────────────────────── --}}
    <div class="col-lg-4">
      <div class="wac-panel">
        <div class="wac-panel-head">
          <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
          Quick Navigation
        </div>
        <div>
          @foreach([
            ['Auto Replies',      route('admin.whatsappcenter.replies.index'),       'wac-badge-green',  'Bot training rules'],
            ['Bot Flows',         route('admin.whatsappcenter.flows.index'),         'wac-badge-teal',   'Multi-step conversations'],
            ['Flow Leads',        route('admin.whatsappcenter.leads.index'),         'wac-badge-blue',   'Collected lead data'],
            ['AI Training',       route('admin.whatsappcenter.training.index'),      'wac-badge-purple', 'Knowledge base'],
            ['Conversations',     route('admin.whatsappcenter.conversations.index'), 'wac-badge-grey',   'Chat history'],
            ['Campaigns',         route('admin.whatsappcenter.campaigns.index'),     'wac-badge-orange', 'Bulk messaging'],
          ] as [$label,$url,$badge,$sub])
          <a href="{{ $url }}" class="wac-list-item">
            <div style="flex:1">
              <div style="font-weight:600;font-size:.875rem;color:var(--text-primary)">{{ $label }}</div>
              <div style="font-size:.72rem;color:var(--text-secondary)">{{ $sub }}</div>
            </div>
            <span class="wac-badge {{ $badge }}">
              @if($label==='Pending Handovers' && $stats['pending_handovers']>0)
                {{ $stats['pending_handovers'] }}
              @else
                →
              @endif
            </span>
          </a>
          @endforeach
        </div>
      </div>
    </div>

    {{-- Recent Conversations ─────────────────────────────────────────────── --}}
    <div class="col-lg-8">
      <div class="wac-card">
        <div class="wac-card-head">
          <strong>
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color:var(--wac-green)"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
            Recent Conversations
          </strong>
          <a href="{{ route('admin.whatsappcenter.conversations.index') }}" class="wac-badge wac-badge-teal" style="text-decoration:none;cursor:pointer">View All →</a>
        </div>
        <div>
          @forelse($recentConversations as $s)
          <a href="{{ route('admin.whatsappcenter.conversations.show', $s->phone) }}" class="wac-list-item">
            <div class="wac-avatar" style="font-size:.85rem">
              {{ strtoupper(substr($s->contact_name ?: '?', 0, 1)) }}
            </div>
            <div style="flex:1;min-width:0">
              <div style="font-weight:600;font-size:.875rem">{{ $s->contact_name ?: 'Unknown' }}</div>
              <div style="font-size:.75rem;color:var(--text-secondary)">{{ $s->phone }}</div>
            </div>
            <div style="text-align:right;flex-shrink:0">
              <span class="wb {{ $s->state==='HANDOVER' ? 'wb-w' : ($s->state==='IDLE' ? 'wb-m' : 'wb-s') }}">{{ $s->state }}</span>
              <div style="font-size:.68rem;color:var(--text-secondary);margin-top:.2rem">{{ $s->last_message_at?->diffForHumans() }}</div>
            </div>
          </a>
          @empty
          <div class="wac-empty">
            <div class="wac-empty-icon">💬</div>
            <p>No conversations yet. Messages will appear here when users contact your WhatsApp number.</p>
          </div>
          @endforelse
        </div>
      </div>
    </div>

  </div>
</div>