@extends('backEnd.layouts.master')
@section('title', 'Moderator Hub')

@push('styles')
<link rel="stylesheet" href="{{ asset('backEnd/css/moderator-hub.css') }}?v={{ filemtime(public_path('backEnd/css/moderator-hub.css')) }}">
@endpush

@section('content')
@php
    $activeTab = in_array($tab, ['crm', 'calls', 'inquiry', 'inbox', 'assigned'], true) ? $tab : 'orders';
@endphp
<div class="mh-wrap" id="moderatorHub"
     data-active-tab="{{ $activeTab }}"
     data-hub-url="{{ route('admin.support.hub') }}"
     data-poll-url="{{ route('admin.support.hub.poll') }}"
     data-csrf="{{ csrf_token() }}"
     data-can-manage-inbox="{{ ($canManageInbox ?? false) ? '1' : '0' }}"
     data-heartbeat-url="{{ route('admin.support.presence.heartbeat') }}"
     data-inquiry-reply-url="{{ url('admin/support/hub/inquiries/__INQUIRY__/reply') }}"
     data-inquiry-resolve-url="{{ url('admin/support/hub/inquiries/__INQUIRY__/resolve') }}"
     data-inquiry-thread-url="{{ url('admin/support/hub/inquiries/__INQUIRY__/thread') }}"
     data-inbox-reply-url="{{ url('admin/support/hub/inbox/__INBOX__/reply') }}"
     data-inbox-resolve-url="{{ url('admin/support/hub/inbox/__INBOX__/resolve') }}"
     data-inbox-thread-url="{{ url('admin/support/hub/inbox/__INBOX__/thread') }}"
     data-call-start-url="{{ url('admin/support/hub/orders/__ORDER__/call/start') }}"
     data-call-complete-url="{{ url('admin/support/hub/calls/__LOG__/complete') }}"
     data-dismiss-url="{{ url('admin/support/hub/orders/__ORDER__/dismiss') }}"
     data-claim-url="{{ url('admin/support/hub/orders/__ORDER__/claim') }}"
     data-release-url="{{ url('admin/support/hub/orders/__ORDER__/release') }}"
     data-note-url="{{ url('admin/support/hub/orders/__ORDER__/note') }}"
     data-crm-call-start-url="{{ url('admin/support/hub/crm/__CRM__/call/start') }}"
     data-crm-contact-url="{{ url('admin/support/hub/crm/__CRM__/contact') }}">

    <header class="mh-header">
        <div class="mh-header-top">
            <div>
                <h1 class="mh-title"><i class="fas fa-headset"></i> Moderator Hub</h1>
                <p class="mh-sub">Orders · Website · WhatsApp/Messenger · CRM</p>
            </div>
            <div class="mh-header-actions">
                <button type="button" class="mh-refresh-btn" id="mhRefreshBtn" title="Refresh now" aria-label="Refresh">
                    <i class="fas fa-sync-alt"></i>
                </button>
                <div class="mh-header-badges">
                    <span class="mh-header-badge mh-header-badge--orders" id="mhHeaderOrdersBadge" title="Pending orders" @if($pendingCount <= 0) hidden @endif>{{ $pendingCount }}</span>
                    <span class="mh-header-badge mh-header-badge--inquiry" id="mhHeaderInquiryBadge" title="Website inquiries" @if(($inquiryCount ?? 0) <= 0) hidden @endif>{{ $inquiryCount ?? 0 }}</span>
                    <span class="mh-header-badge mh-header-badge--inbox" id="mhHeaderInboxBadge" title="WA/FB inbox" @if(($inboxOpenCount ?? 0) <= 0) hidden @endif>{{ $inboxOpenCount ?? 0 }}</span>
                </div>
            </div>
        </div>
        <p class="mh-live-hint small text-muted mb-2">
            <i class="fas fa-circle text-success me-1" style="font-size:7px"></i>
            Auto refresh ~১৫ sec · এক moderator Hub থেকেই সব customer care
        </p>

        <nav class="mh-tabs" id="mhTabs" role="tablist">
            <button type="button" role="tab" class="mh-tab {{ $activeTab === 'orders' ? 'is-active' : '' }}" data-tab="orders" aria-selected="{{ $activeTab === 'orders' ? 'true' : 'false' }}">
                <i class="fas fa-shopping-bag"></i> Open
                <span class="mh-tab-badge" id="mhOrdersTabBadge" @if($pendingCount <= 0) hidden @endif>{{ $pendingCount }}</span>
            </button>
            <button type="button" role="tab" class="mh-tab {{ $activeTab === 'assigned' ? 'is-active' : '' }}" data-tab="assigned" aria-selected="{{ $activeTab === 'assigned' ? 'true' : 'false' }}">
                <i class="fas fa-user-lock"></i> My Assigned
                <span class="mh-tab-badge mh-tab-badge--assigned" id="mhAssignedTabBadge" @if(($assignedCount ?? 0) <= 0) hidden @endif>{{ $assignedCount ?? 0 }}</span>
            </button>
            <button type="button" role="tab" class="mh-tab {{ $activeTab === 'inquiry' ? 'is-active' : '' }}" data-tab="inquiry" aria-selected="{{ $activeTab === 'inquiry' ? 'true' : 'false' }}">
                <i class="fas fa-globe"></i> Website
                <span class="mh-tab-badge mh-tab-badge--inquiry" id="mhInquiryTabBadge" @if(($inquiryCount ?? 0) <= 0) hidden @endif>{{ $inquiryCount ?? 0 }}</span>
            </button>
            <button type="button" role="tab" class="mh-tab {{ $activeTab === 'crm' ? 'is-active' : '' }}" data-tab="crm" aria-selected="{{ $activeTab === 'crm' ? 'true' : 'false' }}">
                <i class="fas fa-users"></i> CRM
                <span class="mh-tab-badge mh-tab-badge--crm" id="mhCrmTabBadge" @if(($crmCount ?? 0) <= 0) hidden @endif>{{ $crmCount ?? 0 }}</span>
            </button>
            <button type="button" role="tab" class="mh-tab {{ $activeTab === 'calls' ? 'is-active' : '' }}" data-tab="calls" aria-selected="{{ $activeTab === 'calls' ? 'true' : 'false' }}">
                <i class="fas fa-phone"></i> My Calls
            </button>
            <button type="button" role="tab" class="mh-tab {{ $activeTab === 'inbox' ? 'is-active' : '' }}" data-tab="inbox" aria-selected="{{ $activeTab === 'inbox' ? 'true' : 'false' }}">
                <i class="fas fa-inbox"></i> WA/FB
                <span class="mh-tab-badge mh-tab-badge--inbox" id="mhInboxTabBadge" @if(($inboxOpenCount ?? 0) <= 0) hidden @endif>{{ $inboxOpenCount ?? 0 }}</span>
            </button>
        </nav>
    </header>

    <section class="mh-tab-panel mh-section" id="mhOrderPanel" data-tab-panel="orders" role="tabpanel" @if($activeTab !== 'orders') hidden @endif>
        <p class="small text-muted mb-2 mh-tab-hint">Unclaimed pending orders — একসাথে শুধু ১টি order assign করতে পারবেন। Release করলে পরেরটি নিন।</p>
        <div id="mhOrderList">
            @if($activeTab === 'orders')
                @forelse($orderCards as $card)
                @include('backEnd.support.partials.hub-order-card', ['card' => $card])
                @empty
                <div class="mh-empty" id="mhEmptyState">
                    <i class="fas fa-check-circle"></i>
                    <p>No open orders right now.</p>
                    <p class="small">আপনার assigned order আছে কিনা <strong>My Assigned</strong> tab দেখুন।</p>
                </div>
                @endforelse
            @endif
        </div>
    </section>

    <section class="mh-tab-panel mh-section" id="mhAssignedPanel" data-tab-panel="assigned" role="tabpanel" @if($activeTab !== 'assigned') hidden @endif>
        <p class="small text-muted mb-2 mh-tab-hint">আপনার claim করা order — Call, confirm, Approve বা Release করুন।</p>
        <div id="mhAssignedList">
            @if($activeTab === 'assigned')
                @forelse($assignedOrderCards ?? [] as $card)
                @include('backEnd.support.partials.hub-order-card', ['card' => $card])
                @empty
                <div class="mh-empty" id="mhAssignedEmptyState">
                    <i class="fas fa-user-lock"></i>
                    <p>No orders assigned to you.</p>
                    <p class="small">Open tab থেকে order Assign করুন।</p>
                </div>
                @endforelse
            @endif
        </div>
    </section>

    <section class="mh-tab-panel mh-section" id="mhInquiryPanel" data-tab-panel="inquiry" role="tabpanel" @if($activeTab !== 'inquiry') hidden @endif>
        <p class="small text-muted mb-2 mh-tab-hint">
            Website live chat — Report: <a href="{{ route('admin.support.reports.inquiries') }}">Website Inquiry Report</a>
        </p>
        <div id="mhInquiryList">
            @if($activeTab === 'inquiry')
                @forelse($inquiryCards ?? [] as $card)
                @include('backEnd.support.partials.hub-inquiry-card', ['card' => $card])
                @empty
                <div class="mh-empty" id="mhInquiryEmptyState">
                    <i class="fas fa-comments"></i>
                    <p>No website inquiries waiting.</p>
                    <p class="small">Customer home page chat থেকে message পাঠালে এখানে দেখাবে।</p>
                </div>
                @endforelse
            @endif
        </div>
    </section>

    <section class="mh-tab-panel mh-section" id="mhCrmPanel" data-tab-panel="crm" role="tabpanel" @if($activeTab !== 'crm') hidden @endif>
        <div id="mhCrmList">
            @if($activeTab === 'crm')
                @forelse($crmCards ?? [] as $card)
                @include('backEnd.support.partials.hub-crm-card', ['card' => $card])
                @empty
                <div class="mh-empty">
                    <i class="fas fa-user-check"></i>
                    <p>No CRM follow-ups due right now.</p>
                </div>
                @endforelse
            @endif
        </div>
    </section>

    <section class="mh-tab-panel mh-section" id="mhCallsPanel" data-tab-panel="calls" role="tabpanel" @if($activeTab !== 'calls') hidden @endif>
        <div class="mh-calls-help small text-muted mb-3">
            <strong>My Calls</strong> — Hub/Orders/CRM থেকে call log এখানে। Call complete হলে Orders page note-এ sync হয়।
            ✓ dismiss → reason + <a href="{{ route('admin.support.reports.dismissals') }}">Dismiss History</a> report।
            Call report: <a href="{{ route('admin.support.reports.calls') }}">Call Tracking</a>।
        </div>
        <div id="mhCallsList">
            @if($activeTab === 'calls')
                @forelse($recentCalls as $log)
                <article class="mh-call-row">
                    <div class="mh-call-row-main">
                        <strong>{{ $log->order?->invoice_id ? '#'.$log->order->invoice_id : 'CRM' }}</strong>
                        <span>{{ $log->customer_name ?: $log->customer_phone ?: 'Customer' }}</span>
                        @if($log->source === 'crm')
                        <span class="mh-src-badge">CRM</span>
                        @elseif($log->source === 'orders')
                        <span class="mh-src-badge">Order</span>
                        @else
                        <span class="mh-src-badge">Hub</span>
                        @endif
                        @if(!$log->outcome)
                        <span class="mh-src-badge" style="background:#fef3c7;color:#92400e">In progress</span>
                        @endif
                    </div>
                    <div class="mh-call-row-meta">
                        <span class="mh-outcome mh-outcome--{{ $log->outcome ?: 'unknown' }}">{{ str_replace('_', ' ', $log->outcome ?: 'pending') }}</span>
                        <span title="Talk time">Talk: {{ $log->durationLabel() }}</span>
                        @if($log->orderResponseLabel())
                        <span class="mh-response mh-response--{{ $log->orderResponseTier() }}" title="Order placed → call started">
                            Order→Call: {{ $log->orderResponseLabel() }}
                        </span>
                        @endif
                        <span>{{ $log->started_at?->format('d M, h:i A') ?? $log->created_at?->format('d M, h:i A') }}</span>
                    </div>
                    @if($log->order?->created_at && $log->started_at)
                    <div class="mh-call-row-times small text-muted">
                        Order: {{ $log->order->created_at->format('d M, h:i A') }}
                        · Call started: {{ $log->started_at->format('h:i A') }}
                    </div>
                    @endif
                    @if($log->note)
                    <p class="mh-call-note">{{ $log->note }}</p>
                    @endif
                </article>
                @empty
                <div class="mh-empty">
                    <i class="fas fa-phone-slash"></i>
                    <p>এখনো কোনো call log নেই।</p>
                    <p class="small">Orders tab → <strong>Call</strong> চাপুন → call শেষে outcome save করুন।</p>
                </div>
                @endforelse
            @endif
        </div>
    </section>

    <section class="mh-tab-panel mh-section" id="mhInboxPanel" data-tab-panel="inbox" role="tabpanel" @if($activeTab !== 'inbox') hidden @endif>
        <p class="small text-muted mb-2 mh-tab-hint">
            WhatsApp + Messenger webhook message — Website tab থেকে <strong>আলাদা count</strong>।
            <a href="{{ route('admin.support.inbox') }}">Full inbox table view</a>
        </p>
        <div id="mhInboxList">
            @if($activeTab === 'inbox')
                @forelse($inboxCards ?? [] as $card)
                @include('backEnd.support.partials.hub-inbox-card', ['card' => $card, 'canManageInbox' => $canManageInbox ?? false])
                @empty
                <div class="mh-empty" id="mhInboxEmptyState">
                    <i class="fas fa-inbox"></i>
                    <p>No WhatsApp/Messenger conversations waiting.</p>
                    <p class="small">Support → Channel Settings-এ webhook ON থাকলে message এখানে আসবে।</p>
                </div>
                @endforelse
            @endif
        </div>
    </section>
</div>

{{-- Call complete sheet --}}
<div class="mh-sheet-backdrop" id="mhCallSheetBackdrop" hidden></div>
<div class="mh-sheet mh-sheet--wide" id="mhCallSheet" hidden>
    <div class="mh-sheet-handle"></div>
    <h3 class="mh-sheet-title">Complete call</h3>
    <p class="mh-sheet-sub" id="mhCallSheetCustomer"></p>
    <div class="mh-timer" id="mhCallTimer">0:00</div>

    <label class="mh-label">Outcome</label>
    <div class="mh-outcome-grid" id="mhOutcomeGrid">
        @foreach([
            'connected' => 'Connected',
            'confirmed' => 'Confirmed',
            'no_answer' => 'No answer',
            'busy' => 'Busy',
            'cancelled' => 'Cancelled',
            'follow_up' => 'Follow up',
        ] as $value => $label)
        <button type="button" class="mh-outcome-btn" data-outcome="{{ $value }}">{{ $label }}</button>
        @endforeach
    </div>

    <label class="mh-label" for="mhCallNote">Note (optional)</label>
    <textarea id="mhCallNote" class="mh-textarea" rows="2" placeholder="Call summary…"></textarea>

    <button type="button" class="mh-btn mh-btn-primary mh-btn-block" id="mhCallCompleteBtn" disabled>
        Save call log
    </button>
    <button type="button" class="mh-btn mh-btn-ghost mh-btn-block" id="mhCallCancelBtn">Cancel</button>
</div>

{{-- Dismiss reason sheet --}}
<div class="mh-sheet-backdrop" id="mhDismissSheetBackdrop" hidden></div>
<div class="mh-sheet" id="mhDismissSheet" hidden>
    <div class="mh-sheet-handle"></div>
    <h3 class="mh-sheet-title">Dismiss from Hub</h3>
    <p class="mh-sheet-sub" id="mhDismissSheetCustomer"></p>
    <p class="small text-muted mb-2">Reason save হবে — Dismiss History report + Orders note-এ দেখা যাবে।</p>

    <label class="mh-label" for="mhDismissReason">Reason</label>
    <select id="mhDismissReason" class="mh-select">
        @foreach(\App\Models\ModeratorOrderAcknowledgment::DISMISS_REASONS as $value => $label)
        <option value="{{ $value }}">{{ $label }}</option>
        @endforeach
    </select>

    <label class="mh-label mt-2" for="mhDismissDetail">Details (Other হলে required)</label>
    <textarea id="mhDismissDetail" class="mh-textarea" rows="2" placeholder="Optional details…"></textarea>

    <button type="button" class="mh-btn mh-btn-primary mh-btn-block" id="mhDismissSaveBtn">Confirm dismiss</button>
    <button type="button" class="mh-btn mh-btn-ghost mh-btn-block" id="mhDismissCancelBtn">Cancel</button>
</div>

{{-- Release order sheet --}}
<div class="mh-sheet-backdrop" id="mhReleaseSheetBackdrop" hidden></div>
<div class="mh-sheet" id="mhReleaseSheet" hidden>
    <div class="mh-sheet-handle"></div>
    <h3 class="mh-sheet-title">Release order</h3>
    <p class="mh-sheet-sub" id="mhReleaseSheetCustomer"></p>
    <p class="small text-muted mb-2">Release করলে অন্য moderator claim করতে পারবে।</p>

    <label class="mh-label" for="mhReleaseNote">Note (optional)</label>
    <textarea id="mhReleaseNote" class="mh-textarea" rows="2" placeholder="Why releasing…"></textarea>

    <button type="button" class="mh-btn mh-btn-primary mh-btn-block" id="mhReleaseSaveBtn">Confirm release</button>
    <button type="button" class="mh-btn mh-btn-ghost mh-btn-block" id="mhReleaseCancelBtn">Cancel</button>
</div>

{{-- Quick note sheet --}}
<div class="mh-sheet-backdrop" id="mhNoteSheetBackdrop" hidden></div>
<div class="mh-sheet" id="mhNoteSheet" hidden>
    <div class="mh-sheet-handle"></div>
    <h3 class="mh-sheet-title">Add order note</h3>
    <p class="mh-sheet-sub" id="mhNoteSheetCustomer"></p>
    <textarea id="mhOrderNote" class="mh-textarea" rows="3" placeholder="Note for admin…"></textarea>
    <button type="button" class="mh-btn mh-btn-primary mh-btn-block" id="mhNoteSaveBtn">Save note</button>
    <button type="button" class="mh-btn mh-btn-ghost mh-btn-block" id="mhNoteCancelBtn">Cancel</button>
</div>

{{-- CRM contact sheet --}}
<div class="mh-sheet-backdrop" id="mhCrmSheetBackdrop" hidden></div>
<div class="mh-sheet" id="mhCrmSheet" hidden>
    <div class="mh-sheet-handle"></div>
    <h3 class="mh-sheet-title">CRM contact update</h3>
    <p class="mh-sheet-sub" id="mhCrmSheetCustomer"></p>
    <label class="mh-label" for="mhCrmStatus">Status</label>
    <select id="mhCrmStatus" class="mh-select">
        @foreach(\App\Models\CrmCustomer::CONTACT_STATUSES as $key => $meta)
        <option value="{{ $key }}">{{ $meta['label'] }}</option>
        @endforeach
    </select>
    <label class="mh-label mt-2" for="mhCrmNext">Next contact</label>
    <input type="datetime-local" id="mhCrmNext" class="mh-input">
    <label class="mh-label mt-2" for="mhCrmNote">Note</label>
    <textarea id="mhCrmNote" class="mh-textarea" rows="3" placeholder="Call result…"></textarea>
    <button type="button" class="mh-btn mh-btn-primary mh-btn-block" id="mhCrmSaveBtn">Save to CRM</button>
    <button type="button" class="mh-btn mh-btn-ghost mh-btn-block" id="mhCrmCancelBtn">Cancel</button>
</div>

{{-- Website inquiry reply sheet --}}
<div class="mh-sheet-backdrop" id="mhInquirySheetBackdrop" hidden></div>
<div class="mh-sheet mh-sheet--wide" id="mhInquirySheet" hidden>
    <div class="mh-sheet-handle"></div>
    <h3 class="mh-sheet-title">Website Inquiry</h3>
    <p class="mh-sheet-sub" id="mhInquirySheetCustomer"></p>
    <div id="mhInquiryThread" class="mh-inquiry-thread mb-2"></div>
    <label class="mh-label" for="mhInquiryReply">Reply to customer</label>
    <textarea id="mhInquiryReply" class="mh-textarea" rows="3" placeholder="আপনার উত্তর…"></textarea>
    <button type="button" class="mh-btn mh-btn-primary mh-btn-block" id="mhInquiryReplyBtn">Send reply</button>
    <button type="button" class="mh-btn mh-btn-ghost mh-btn-block" id="mhInquiryResolveBtn">Mark resolved</button>
    <button type="button" class="mh-btn mh-btn-ghost mh-btn-block" id="mhInquiryCancelBtn">Close</button>
</div>

{{-- WA/FB inbox reply sheet --}}
<div class="mh-sheet-backdrop" id="mhInboxSheetBackdrop" hidden></div>
<div class="mh-sheet mh-sheet--wide" id="mhInboxSheet" hidden>
    <div class="mh-sheet-handle"></div>
    <h3 class="mh-sheet-title">WhatsApp / Messenger</h3>
    <p class="mh-sheet-sub" id="mhInboxSheetCustomer"></p>
    <div id="mhInboxThread" class="mh-inquiry-thread mb-2"></div>
    @if($canManageInbox ?? false)
    <label class="mh-label" for="mhInboxReply">Reply to customer</label>
    <textarea id="mhInboxReply" class="mh-textarea" rows="3" placeholder="আপনার উত্তর…"></textarea>
    <button type="button" class="mh-btn mh-btn-primary mh-btn-block" id="mhInboxReplyBtn">Send reply</button>
    <button type="button" class="mh-btn mh-btn-ghost mh-btn-block" id="mhInboxResolveBtn">Mark resolved</button>
    @else
    <p class="small text-muted">Reply করতে <strong>support.manage</strong> permission লাগবে।</p>
    @endif
    <button type="button" class="mh-btn mh-btn-ghost mh-btn-block" id="mhInboxCancelBtn">Close</button>
</div>
@endsection

@push('scripts')
@include('backEnd.support.partials.realtime')
<script src="{{ asset('js/moderator-hub.js') }}?v={{ filemtime(public_path('js/moderator-hub.js')) }}"></script>
@endpush