@extends('admin.layouts.app')

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header title="Live Chat" subtitle="Active conversations" icon="fas fa-comments"
        :buttons="[['label' => 'Chat History', 'route' => route('admin.chat.history'), 'icon' => 'fas fa-history', 'color' => 'outline-secondary']]" />

    <div class="row">
        <div class="col-md-3">
            <x-admin.card>
                <h6><i class="fas fa-clock me-1 text-warning"></i> Waiting (<span id="waitingCount">{{ $waitingSessions->count() }}</span>)</h6>
                <div id="waitingList">
                    @forelse($waitingSessions as $session)
                        <div class="d-flex justify-content-between align-items-center border-bottom py-2" data-session-id="{{ $session->id }}">
                            <div>
                                <strong>{{ $session->visitor_name }}</strong>
                                @if($session->client_id === null)
                                    <span class="badge bg-secondary ms-1" style="font-size:0.7em;"><i class="fas fa-user-slash me-1"></i>Misafir</span>
                                @endif
                                <small class="text-muted d-block">{{ $session->visitor_email }}</small>
                                <small class="text-muted">{{ $session->created_at->diffForHumans() }}</small>
                            </div>
                            <button type="button" class="btn btn-sm btn-success js-accept-chat" data-session-id="{{ $session->id }}">
                                <i class="fas fa-check me-1"></i>Accept
                            </button>
                        </div>
                    @empty
                        <p class="text-muted text-center py-3 js-empty-waiting">No waiting chats.</p>
                    @endforelse
                </div>
            </x-admin.card>

            <x-admin.card class="mt-3">
                <h6><i class="fas fa-comments me-1 text-success"></i> Active (<span id="activeCount">{{ $activeSessions->count() }}</span>)</h6>
                <div id="activeList">
                    @forelse($activeSessions as $session)
                        <div class="d-flex justify-content-between align-items-center border-bottom py-2" data-session-id="{{ $session->id }}" data-admin-id="{{ $session->admin_id }}">
                            <div>
                                <strong>{{ $session->visitor_name }}</strong>
                                @if($session->client_id === null)
                                    <span class="badge bg-secondary ms-1" style="font-size:0.7em;"><i class="fas fa-user-slash me-1"></i>Misafir</span>
                                @endif
                                @if($session->admin)
                                    <span class="badge bg-info ms-1 js-assignee" style="font-size:0.7em;">{{ $session->admin->name }}</span>
                                @endif
                                <small class="text-muted d-block">Started {{ $session->started_at?->diffForHumans() }}</small>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary js-open-chat" data-session-id="{{ $session->id }}" data-visitor-name="{{ $session->visitor_name }}">
                                <i class="fas fa-comment-dots me-1"></i>Open
                            </button>
                        </div>
                    @empty
                        <p class="text-muted text-center py-3 js-empty-active">No active chats.</p>
                    @endforelse
                </div>
            </x-admin.card>
        </div>

        <div class="col-md-9">
            <x-admin.card>
                <div id="chatPanel" hidden>
                    <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
                        <h6 class="mb-0"><i class="fas fa-user me-1"></i> <span id="chatPanelVisitor"></span></h6>
                        <div class="d-flex gap-2 align-items-center">
                            <span id="chatPanelAssignee" class="badge bg-info" hidden></span>
                            <select id="chatReassignSelect" class="form-select form-select-sm w-auto" title="Başkasına ata">
                                <option value="">Başkasına ata…</option>
                                @foreach(\App\Models\Admin::permission('view tickets')->where('status','active')->orderBy('name')->get() as $a)
                                    <option value="{{ $a->id }}">{{ $a->name }}</option>
                                @endforeach
                            </select>
                            <button type="button" id="chatPanelAssignBtn" class="btn btn-sm btn-outline-success" title="Bana Ata" hidden>
                                <i class="fas fa-user-check me-1"></i>Bana Ata
                            </button>
                            <button type="button" id="chatPanelInfoBtn" class="btn btn-sm btn-outline-info" title="Visitor Info">
                                <i class="fas fa-id-card"></i>
                            </button>
                            <button type="button" id="chatPanelRefresh" class="btn btn-sm btn-outline-secondary" title="Refresh">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                            <button type="button" id="chatPanelClose" class="btn btn-sm btn-outline-danger">
                                <i class="fas fa-times me-1"></i>Close session
                            </button>
                        </div>
                    </div>

                    <div id="chatPanelMessages" class="overflow-auto mb-2 d-flex flex-column gap-2 px-1" style="height: 420px;"></div>

                    <form id="chatPanelForm" class="d-flex gap-2">
                        <input type="text" id="chatPanelInput" class="form-control" maxlength="2000" placeholder="Type a reply..." required>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>

                <p id="chatPanelEmpty" class="text-muted text-center py-5">
                    <i class="fas fa-comment-dots fa-2x d-block mb-2"></i>
                    Select an active conversation to view messages.
                </p>
            </x-admin.card>
        </div>
    </div>
</div>

    <div class="modal fade" id="visitorInfoModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-id-card me-2"></i>Visitor Info</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="visitorInfoBody">
                    <div class="text-center py-3"><i class="fas fa-spinner fa-spin"></i></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
window.adminChatConfig = {
    adminId: {{ (int) auth('admin')->id() }},
    adminName: @json(auth('admin')->user()?->name ?? 'Admin'),
    routes: {
        accept:   '{{ url("/admin/chat") }}/:id/accept',
        send:     '{{ url("/admin/chat") }}/:id/send',
        messages: '{{ url("/admin/chat") }}/:id/messages',
        close:    '{{ url("/admin/chat") }}/:id/close',
        assign:   '{{ url("/admin/chat") }}/:id/assign',
        reassign: '{{ url("/admin/chat") }}/:id/reassign',
        info:     '{{ url("/admin/chat") }}/:id/info',
        block:    '{{ url("/admin/chat") }}/:id/block',
    },
};
</script>
@vite('resources/js/admin/chat/dashboard.js')
@endpush
