@extends('admin.admin')

@php
    use Illuminate\Support\Str;
@endphp

@section('content')

<!-- Add meta tags for JavaScript -->
<meta name="user-id" content="{{ auth()->id() }}">
<meta name="user-name" content="{{ auth()->user()->name }}">

<div class="page-wrapper chat-page-shell">
    <div class="container-fluid">
        <div class="row">
            <!-- User List Column -->
            <div class="col-lg-3 mb-3 mb-lg-0 d-flex">
                <div class="card chat-user-1 flex-fill chat-column-card">
                    <div class="card-header">
                       <div class="mb-3">
                            <h6>{{  __('All Chats') }}</h6>
                        </div>
                        <div class="position-relative mb-0">
                            <input type="text" name="chatSearch" id="chatSearch" placeholder="{{ __('Search for users') }}" class="form-control">
                            <div class="search-icon-right">
                                <span class="search_btn"><i class="ti ti-search"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="sidebar-body chat-body card-body chat-column-scroll" id="chatsidebar">
                        @php
                            $avatarPalette = ['#FF6B6B', '#F7B32B', '#4ECDC4', '#5C7AEA', '#9B59B6', '#1ABC9C', '#F66D9B', '#FF8C42'];
                        @endphp

                        <ul class="user-list">
                            
                            @forelse($sessions as $chatSession)
                                @php
                                    $visitorName = $chatSession->visitor_name ?? __('Anonymous User');
                                    $initial = strtoupper(mb_substr($visitorName, 0, 1));
                                    $colorIndex = crc32($visitorName) % count($avatarPalette);
                                    $bgColor = $avatarPalette[$colorIndex];
                                    $latestMessageText = optional($chatSession->latestMessage)->message 
                                        ?? optional($chatSession->messages()->latest()->first())->message 
                                        ?? __('No messages yet');
                                    $lastMessagePreview = Str::limit($latestMessageText, 50);
                                    $unreadCount = $chatSession->unread_count ?? 0;
                                @endphp
                                
                                <li class="user-list-item">
                                    <a href="javascript:void(0);" 
                                    class="p-2 border rounded d-block mb-2 userprofile {{ isset($session) && $chatSession->id == $session->id ? 'active' : '' }}" 
                                    data-userid="{{ $chatSession->id }}" 
                                    data-username="{{ $visitorName }}"
                                    data-avatar-bg="{{ $bgColor }}"
                                    data-avatar-initial="{{ $initial }}">
                                        <div class="d-flex align-items-center">
                                            <div class="avatar avatar-lg avatar-online me-2 flex-shrink-0 initial-avatar" style="background-color: {{ $bgColor }};">
                                                {{ $initial }}
                                            </div>
                                            <div class="flex-grow-1 overflow-hidden me-2">
                                                <h6 class="mb-1 text-truncate">{{ $visitorName }}</h6>
                                                <span class="last-message-preview">{{ $lastMessagePreview }}</span>
                                            </div>
                                            @if($unreadCount > 0 && (!isset($session) || $chatSession->id != $session->id))
                                                <div class="unread-badge-container">
                                                    <span class="badge bg-danger rounded-pill unread-count-badge">{{ $unreadCount }}</span>
                                                </div>
                                            @endif
                                        </div>
                                    </a>
                                </li> 
                            @empty
                                <li class="text-center text-muted py-4">
                                    <div class="mt-2">{{ __('No chats found') }}</div>
                                </li>
                            @endforelse
                        </ul>
                    </div>

                </div>
            </div>

            <!-- Chat Messages Column -->
           <div class="col-lg-6 mb-3 mb-lg-0 d-flex px-0">
                <div class="chat chat-messages card flex-fill chat-column-card" id="middle" @if($session) data-session-id="{{ $session->id }}" @endif>

                    {{-- IF NO SESSION → Empty Chat Placeholder --}}
                    @if(!$session)
                        <div class="d-flex justify-content-center align-items-center flex-column h-100 p-4 text-center">
                            <h5 class="mt-3 text-muted">{{ __('No conversation selected') }}</h5>
                            <p class="text-muted mb-0">
                                {{ __('Choose a chat from the left panel to view messages.') }}
                            </p>
                        </div>
                    @else

                    {{-- IF SESSION EXISTS → Full Chat UI --}}
                    <div class="chat-header card-header">
                        <div class="user-details d-flex align-items-center">
                            <div class="d-lg-none">
                                <ul class="list-inline mt-2 me-2">
                                    <li class="list-inline-item">
                                        <a class="text-muted px-0 left_sides" href="#" data-chat="open">
                                            <i class="fas fa-arrow-left"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div id="chatimg">
                            @php
                                $visitorName = $session->visitor_name ?? __('Anonymous User');
                                $initial = strtoupper(mb_substr($visitorName, 0, 1));
                                $colorIndex = crc32($visitorName) % count($avatarPalette);
                                $bgColor = $avatarPalette[$colorIndex];
                            @endphp
                            
                            <div class="avatar avatar-lg me-2 initial-avatar" style="background-color: {{ $bgColor }};">
                                {{ $initial }}
                            </div>
                             </div>
                                <div>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <h6 class="chat-user-name" style="margin: 0;">{{ $visitorName }}</h6>

                                        @php
                                            $assignedAgent = $session->assignedAgent;
                                        @endphp

                                        @if($assignedAgent)
                                            <span id="chat-assigned-to" class="badge bg-info">
                                                @if($assignedAgent->id === auth()->id())
                                                    {{ __('Assigned To') }}: {{ __('You') }}
                                                @else
                                                    {{ __('Assigned To') }}: {{ $assignedAgent->name }}
                                                @endif
                                            </span>
                                        @else
                                            <span id="chat-assigned-to" class="badge bg-secondary">{{ __('Not assigned') }}</span>
                                        @endif
                                    </div>

                                    <small id="session-activity-header">{{ $session->last_activity_at?->diffForHumans() }}</small>
                                </div>
                        </div>
                    </div>

                    <div class="chat-column-scroll">
                        <div class="chat-body card-body chat-scroll chats_scroll" id="chatscroll">
                            <!-- Chat Loading Spinner -->
                            <div id="chat-loading-spinner" class="text-center py-5" style="display: none;">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">{{ __('Loading') }}...</span>
                                </div>
                                <p class="text-muted mt-2 mb-0">{{ __('Loading messages') }}...</p>
                            </div>

                            <div class="messages">
                                <div class="chats">
                                    <div class="chat-messages chat-content Chat window chat-cont-type" id="chat-messages">

                                        @foreach($session->messages as $message)
                                            <div class="message {{ $message->sender_type }}" data-message-id="{{ $message->id }}">
                                                <div class="message-info">

                                                    @if($message->sender_type === 'admin')
                                                        <strong>{{ $message->sender->name }}</strong>
                                                    @elseif($message->sender_type === 'bot')
                                                        <strong>🤖 {{ __('Bot') }}</strong>
                                                    @else
                                                        <strong>{{ $session->visitor_name ?? __('User') }}</strong>
                                                    @endif

                                                    <small class="text-muted message-time" data-timestamp="{{ $message->created_at->toIso8601String() }}">{{ $message->created_at->format('h:i A') }}</small>
                                                </div>

                                                <div class="message-content">
                                                    {{ $message->message }}
                                                </div>
                                            </div>
                                        @endforeach

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="chat-footer">
                        <form id="addmsgform">
                            <div class="chat-message">
                                <div class="form-item input-group position-relative overflow-hidden rounded">
                                    <input type="text" class="form-control" id="messageinput" placeholder="{{ __('Type your message here') }}..">
                                    <button class="btn btn-primary" type="button" id="sendmsg" data-senderid="1">
                                        <i class="ti ti-send"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

                    @endif  {{-- END SESSION CHECK --}}

                </div>
            </div>

            <!-- Visitor Info Column -->
            <div class="col-lg-3 d-flex">
                <div class="card flex-fill chat-column-card">
                    <div class="chat-column-scroll p-0">

                        {{-- IF NO SESSION → Placeholder UI --}}
                        @if(!$session)
                            <div class="d-flex justify-content-center align-items-center flex-column h-100 p-4 text-center">
                                <h6 class="mt-3 text-muted">{{ __('No Conversation Selected') }}</h6>
                                <p class="text-muted small mb-0">
                                    {{ __('Select a chat to view visitor details') }}
                                </p>
                            </div>

                        @else

                        {{-- IF SESSION EXISTS → FULL INFO PANEL --}}
                        <!-- Visitor Info -->
                        <div class="card mb-3 border-0 visitor-info-section">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="ti ti-user me-2"></i>{{ __('Visitor Information') }}</h6>
                            </div>
                            <div class="card-body" id="visitor-info-container">
                                <!-- Skeleton Loader -->
                                <div class="skeleton-loader" id="visitor-skeleton">
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Name') }}</div>
                                        <div class="skeleton-line"></div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Email') }}</div>
                                        <div class="skeleton-line"></div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Phone') }}</div>
                                        <div class="skeleton-line"></div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('IP Address') }}</div>
                                        <div class="skeleton-line"></div>
                                    </div>
                                </div>
                                
                                <!-- Actual Content -->
                                <div id="visitor-info-content" style="display: none;">
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Name') }}</div>
                                        <div class="detail-value" id="visitor-name">{{ $session->visitor_name ?? __('Not provided') }}</div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Email') }}</div>
                                        <div class="detail-value" id="visitor-email">{{ $session->visitor_email ?? __('Not provided') }}</div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Phone') }}</div>
                                        <div class="detail-value" id="visitor-phone">{{ $session->visitor_phone ?? __('Not provided') }}</div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('IP Address') }}</div>
                                        <div class="detail-value" id="visitor-ip">{{ $session->ip_address }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Session Info -->
                        <div class="card mb-3 border-0">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="ti ti-info-circle me-2"></i>{{ __('Session Details') }}</h6>
                            </div>
                            <div class="card-body" id="session-info-container">
                                <!-- Skeleton Loader -->
                                <div class="skeleton-loader" id="session-skeleton">
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Status') }}</div>
                                        <div class="skeleton-line"></div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Started At') }}</div>
                                        <div class="skeleton-line"></div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Last Activity') }}</div>
                                        <div class="skeleton-line"></div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Total Messages') }}</div>
                                        <div class="skeleton-line"></div>
                                    </div>
                                </div>

                                <!-- Actual Content -->
                                <div id="session-info-content" style="display: none;">
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Status') }}</div>
                                        <div class="detail-value" id="session-status">
                                            <span class="badge bg-{{ $session->status === 'active' ? 'success' : 'secondary' }}">
                                                {{ __('' . $session->status . '') }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Started At') }}</div>
                                        <div class="detail-value" id="session-started">{{ $session->created_at->format('M d, Y h:i A') }}</div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Last Activity') }}</div>
                                        <div class="detail-value" id="session-activity">{{ $session->last_activity_at?->diffForHumans() }}</div>
                                    </div>
                                    <div class="session-detail-item">
                                        <div class="detail-label">{{ __('Total Messages') }}</div>
                                        <div class="detail-value" id="session-messages">{{ $session->messages->count() }} {{ __('messages') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Quick Actions -->
                        <div class="card border-0">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="ti ti-bolt me-2"></i>{{ __('Quick Actions') }}</h6>
                            </div>
                            <div class="card-body">
                            @if(auth()->user()->user_type != 5)
                                    <button class="btn btn-sm btn-outline-primary w-100 mb-2" onclick="assignToMe()">
                                        <i class="ti ti-user-check me-1"></i> {{ __('Assign to Me') }}
                                    </button>

                                    <button class="btn btn-sm btn-outline-secondary w-100 mb-2" onclick="assignToStaff()">
                                        <i class="ti ti-user-check me-1"></i> {{ __('Assign to Staff') }}
                                    </button>
                                @endif
                                <button class="btn btn-sm btn-outline-success w-100 mb-2" onclick="sendTemplate('Hello! How can I assist you today?')">
                                    <i class="ti ti-message-circle me-1"></i> {{ __('Send Welcome') }}
                                </button>
                                <button class="btn btn-sm btn-outline-info w-100 mb-2" onclick="sendTemplate('Please wait while we get back to you.')">
                                    <i class="ti ti-clock me-1"></i> {{ __('Send Wait Message') }}
                                </button>
                            </div>
                        </div>

                        @endif

                    </div>
                </div>
            </div>

        </div>
     </div>
        </div>
    </div>

<!-- Staff Assignment Modal -->
<div class="modal fade" id="assignStaffModal" tabindex="-1" aria-labelledby="assignStaffModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignStaffModalLabel">
                    <i class="ti ti-user-check me-2"></i>{{ __('Assign to Staff') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">{{ __('Select Staff Member') }}</label>
                    <select class="form-select" id="staffSelect">
                        <option value="">-- Choose Staff --</option>
                    </select>
                </div>
                <div id="staffLoadingMessage" class="text-center text-muted" style="display: none;">
                    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                    {{ __('Loading staff members') }}...
                </div>
                <div id="noStaffMessage" class="alert alert-warning" style="display: none;">
                    {{ __('No staff members available') }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                <button type="button" class="btn btn-sm btn-primary" id="confirmAssignStaff">
                    {{ __('Assign') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Include Pusher and Laravel Echo -->
<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.15.3/dist/echo.iife.js"></script>

<script>
// Initialize Laravel Echo
@if(config('broadcasting.default') === 'pusher')
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: '{{ config("broadcasting.connections.pusher.key") }}',
        cluster: '{{ config("broadcasting.connections.pusher.options.cluster") }}',
        forceTLS: true,
        encrypted: true
    });
@else
    window.Echo = null;
@endif

// Set current session ID from blade
@if($session)
currentSessionId = {{ $session->id }};
@endif
</script>

<!-- Include External JavaScript -->

@endsection

@include('chatbot::admin.includes')