@extends('backEnd.layouts.master')
@section('title', 'Customer Support Inbox')

@push('styles')
<style>
.support-timer-green { background:#22c55e; color:#fff; }
.support-timer-yellow { background:#eab308; color:#111; }
.support-timer-orange { background:#f97316; color:#fff; }
.support-timer-red { background:#ef4444; color:#fff; }
.support-channel-messenger { background:#0084ff; color:#fff; }
.support-channel-whatsapp { background:#25d366; color:#fff; }
.support-row:hover { background:#f8fafc !important; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-0 fw-bold"><i class="fas fa-headset me-2 text-primary"></i>Support Inbox</h4>
            <small class="text-muted">Messenger + WhatsApp conversations with response timer</small>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            @can('support.settings')
            <a href="{{ route('admin.support.settings') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-cog me-1"></i> Channels</a>
            <a href="{{ route('admin.support.shifts') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-clock me-1"></i> Shifts</a>
            @endcan
            @can('support.reports')
            <a href="{{ route('admin.support.reports') }}" class="btn btn-outline-info btn-sm"><i class="fas fa-chart-bar me-1"></i> Reports</a>
            @endcan
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-8">
            <div class="btn-group btn-group-sm">
                <a href="{{ route('admin.support.inbox', ['status' => 'active']) }}" class="btn btn-{{ $status !== 'resolved' ? 'primary' : 'outline-primary' }}">Open</a>
                <a href="{{ route('admin.support.inbox', ['status' => 'resolved']) }}" class="btn btn-{{ $status === 'resolved' ? 'primary' : 'outline-primary' }}">Resolved</a>
            </div>
        </div>
        <div class="col-md-4 text-md-end">
            <span class="badge bg-success me-1">Green ≤1m</span>
            <span class="badge bg-warning text-dark me-1">Yellow ≤3m</span>
            <span class="badge bg-orange text-white me-1" style="background:#f97316">Orange ≤10m</span>
            <span class="badge bg-danger">Red 10m+</span>
        </div>
    </div>

    @if($onlineModerators->isNotEmpty())
    <div class="alert alert-light border py-2 mb-3">
        <strong>On shift now:</strong>
        @foreach($onlineModerators as $m)
        <span class="badge bg-success ms-1">{{ $m->name }}</span>
        @endforeach
    </div>
    @endif

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body py-2">
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <strong class="small"><i class="fas fa-circle text-success me-1" style="font-size:8px"></i> Online Moderators</strong>
                <div id="supportPresenceBox" class="d-flex flex-wrap gap-1">
                    <span class="text-muted small">Connecting...</span>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle" id="supportInboxTable">
                <thead class="table-light">
                    <tr>
                        <th>Customer</th>
                        <th>Channel</th>
                        <th>Status</th>
                        <th>Timer</th>
                        <th>Moderator</th>
                        <th>Last Message</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($conversations as $conv)
                    @php
                        $seconds = $conv->secondsSinceLastCustomerMessage() ?? 0;
                        $color = \App\Services\ResponseColorService::getColor($seconds);
                    @endphp
                    <tr class="support-row" data-conv-id="{{ $conv->id }}" data-seconds="{{ $seconds }}">
                        <td>
                            <div class="fw-semibold">{{ $conv->customer->display_name }}</div>
                            @if($conv->customer->priority === 'vip')
                            <span class="badge bg-warning text-dark">VIP</span>
                            @elseif($conv->customer->priority === 'blocked')
                            <span class="badge bg-danger">Blocked</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge support-channel-{{ $conv->channel }}">{{ ucfirst($conv->channel) }}</span>
                        </td>
                        <td><span class="badge bg-light text-dark border">{{ str_replace('_', ' ', $conv->status) }}</span></td>
                        <td>
                            <span class="badge support-timer-{{ $color }} support-timer-badge px-2 py-1">
                                {{ \App\Services\ResponseColorService::label($seconds) }}
                            </span>
                        </td>
                        <td>{{ $conv->moderator?->name ?: '—' }}</td>
                        <td><small class="text-muted">{{ optional($conv->latestMessage)->content ? \Illuminate\Support\Str::limit($conv->latestMessage->content, 40) : '—' }}</small></td>
                        <td class="text-end">
                            <a href="{{ route('admin.support.conversations.show', $conv->id) }}" class="btn btn-sm btn-primary">Open</a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center py-4 text-muted">No conversations yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($conversations->hasPages())
        <div class="card-footer">{{ $conversations->withQueryString()->links() }}</div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    function tickTimers() {
        document.querySelectorAll('#supportInboxTable tr[data-seconds]').forEach(function (row) {
            var sec = parseInt(row.dataset.seconds || '0', 10);
            if (sec <= 0) return;
            sec++;
            row.dataset.seconds = sec;
            var color = sec <= 60 ? 'green' : sec <= 180 ? 'yellow' : sec <= 600 ? 'orange' : 'red';
            var badge = row.querySelector('.support-timer-badge');
            if (!badge) return;
            badge.className = 'badge support-timer-' + color + ' support-timer-badge px-2 py-1';
            var m = Math.floor(sec / 60), s = sec % 60;
            badge.textContent = m + 'm ' + s + 's';
        });
    }
    setInterval(tickTimers, 1000);
})();
</script>
@include('backEnd.support.partials.realtime')
@endpush