@extends('layouts.app')

@section('title', 'Support Monitor - Admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/support-panel.css') }}">
@endpush

@section('content')
<div class="row g-3 admin-dashboard">
    <div class="col-lg-2 d-none d-lg-block">
        @include('admin.partials.sidebar')
    </div>

    <div class="col-lg-7 col-12">
        <div class="admin-page-header mb-3">
            <div>
                <h1 class="h5 fw-semibold mb-1"><i class="bi bi-activity me-2 text-danger"></i>Support Monitor</h1>
                <p class="text-muted small mb-0">Support team ki activity, escalations aur user data tracking</p>
            </div>
            <a href="{{ route('support.dashboard') }}" class="btn btn-sm btn-outline-primary">Support Panel</a>
        </div>

        <div class="row g-2 mb-3">
            <div class="col-6 col-md-3">
                <div class="card support-stat-card stat-open shadow-sm py-2 px-3">
                    <div class="x-small text-muted">Open Tickets</div>
                    <div class="h4 fw-semibold mb-0">{{ $stats['open_tickets'] }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card support-stat-card stat-escalated shadow-sm py-2 px-3">
                    <div class="x-small text-muted">Escalated</div>
                    <div class="h4 fw-semibold mb-0">{{ $stats['escalated'] }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card support-stat-card stat-pending shadow-sm py-2 px-3">
                    <div class="x-small text-muted">Pending</div>
                    <div class="h4 fw-semibold mb-0">{{ $stats['pending_tickets'] }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card support-stat-card stat-users shadow-sm py-2 px-3">
                    <div class="x-small text-muted">Today's Actions</div>
                    <div class="h4 fw-semibold mb-0">{{ $stats['today_activities'] }}</div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white py-2"><h6 class="fw-semibold mb-0 small text-uppercase">Activity Log</h6></div>
            <div class="card-body">
                @forelse($activities as $log)
                @php
                    $actionClass = match(true) {
                        str_contains($log->action, 'escalate') => 'action-escalate',
                        str_contains($log->action, 'reply') => 'action-reply',
                        str_contains($log->action, 'create') => 'action-create',
                        default => 'action-view',
                    };
                @endphp
                <div class="activity-log-item {{ $actionClass }}">
                    <div class="d-flex justify-content-between">
                        <span class="small fw-medium">{{ $log->staff?->name ?? 'System' }}</span>
                        <span class="x-small text-muted">{{ $log->created_at->diffForHumans() }}</span>
                    </div>
                    <div class="small text-muted">{{ $log->description }}</div>
                    <span class="badge bg-light text-dark x-small">{{ $log->action }}</span>
                </div>
                @empty
                <p class="text-muted small text-center py-3 mb-0">Abhi koi activity nahi</p>
                @endforelse
            </div>
            @if($activities->hasPages())
            <div class="card-footer bg-white border-0">{{ $activities->links('pagination::bootstrap-5') }}</div>
            @endif
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-2"><h6 class="fw-semibold mb-0 small text-uppercase">Escalated Tickets (Admin Action Required)</h6></div>
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-3">#</th>
                            <th>User</th>
                            <th>Reason</th>
                            <th>By</th>
                            <th class="text-end pe-3">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($escalatedTickets as $ticket)
                        <tr>
                            <td class="ps-3">{{ $ticket->id }}</td>
                            <td class="small">{{ $ticket->user?->name }}</td>
                            <td class="small text-muted">{{ Str::limit($ticket->escalation_reason, 40) }}</td>
                            <td class="small">{{ $ticket->escalatedBy?->name ?? 'N/A' }}</td>
                            <td class="text-end pe-3">
                                <a href="{{ route('support.tickets.show', $ticket->id) }}" class="btn btn-sm btn-danger">Handle</a>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center py-4 text-muted small">Koi escalated ticket nahi</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($escalatedTickets->hasPages())
            <div class="card-footer bg-white border-0">{{ $escalatedTickets->links('pagination::bootstrap-5') }}</div>
            @endif
        </div>
    </div>

    <div class="col-lg-3 col-12">
        <h6 class="text-muted x-small text-uppercase mb-2">Staff Activity (7 Days)</h6>
        <div class="card border-0 shadow-sm mb-3">
            <div class="list-group list-group-flush">
                @forelse($staffSummary as $row)
                <div class="list-group-item py-2 border-0 d-flex justify-content-between">
                    <span class="small">{{ $row->staff?->name ?? 'Unknown' }}</span>
                    <span class="badge bg-primary">{{ $row->total_actions }} actions</span>
                </div>
                @empty
                <div class="p-3 text-muted small text-center">No data</div>
                @endforelse
            </div>
        </div>

        <div class="card border-0 shadow-sm bg-light">
            <div class="card-body small">
                <h6 class="fw-semibold">Monitor kya track karta hai</h6>
                <ul class="mb-0 ps-3 text-muted">
                    <li>User profile views</li>
                    <li>Ticket replies & status</li>
                    <li>Escalations to admin</li>
                    <li>New user/ticket creation</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection