@extends('dashboard.layouts.master')
@section('title', 'Chat Thread | Admin Panel')

@push('after-styles')
<style>
    /* ── Participants card ── */
    .participant-card {
        background:#f8f9ff; border:1px solid #dde3f5; border-radius:8px;
        padding:14px 18px; display:flex; align-items:center; gap:14px;
        flex:1;
    }
    .participant-card .avatar {
        width:44px; height:44px; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        font-size:18px; font-weight:700; color:#fff; flex-shrink:0;
    }
    .participant-card .avatar.user     { background:#1565c0; }
    .participant-card .avatar.business { background:#2e7d32; }
    .participant-card .p-info strong   { display:block; font-size:14px; }
    .participant-card .p-info small    { color:#888; font-size:12px; }

    .participants-row { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }

    /* ── Read-only banner ── */
    .readonly-banner {
        background:#fff8e1; border:1px solid #ffe082; border-radius:6px;
        padding:10px 16px; margin-bottom:18px;
        display:flex; align-items:center; gap:10px; font-size:13px; color:#856404;
    }
    .readonly-banner .material-icons { font-size:18px; }

    /* ── Chat bubbles ── */
    .chat-wrap {
        background:#f4f6fb; border:1px solid #e2e8f5; border-radius:8px;
        padding:20px; max-height:540px; overflow-y:auto;
    }
    .bubble-row { display:flex; margin-bottom:14px; align-items:flex-end; gap:10px; }
    .bubble-row.right { flex-direction:row-reverse; }

    .bubble-avatar {
        width:32px; height:32px; border-radius:50%; flex-shrink:0;
        display:flex; align-items:center; justify-content:center;
        font-size:13px; font-weight:700; color:#fff;
    }
    .bubble-avatar.user     { background:#1565c0; }
    .bubble-avatar.business { background:#2e7d32; }

    .bubble {
        max-width:65%; padding:10px 14px; border-radius:14px;
        font-size:13px; line-height:1.5; position:relative;
    }
    .bubble-row.left  .bubble { background:#fff; border:1px solid #e0e0e0; border-bottom-left-radius:4px; }
    .bubble-row.right .bubble { background:#002868; color:#fff; border-bottom-right-radius:4px; }

    .bubble .bubble-meta {
        font-size:10px; margin-bottom:4px; font-weight:700; opacity:.7;
        text-transform:uppercase; letter-spacing:.5px;
    }
    .bubble .bubble-time {
        font-size:10px; margin-top:5px; text-align:right; opacity:.55;
    }
    .bubble .attachment-link { font-size:11px; margin-top:6px; display:block; }
    .bubble-row.left  .attachment-link { color:#002868; }
    .bubble-row.right .attachment-link { color:#90caf9; }

    /* ── Action panel ── */
    .action-panel {
        background:#fff5f5; border:1px solid #ffcdd2; border-radius:8px;
        padding:18px 20px; margin-top:24px;
    }
    .action-panel h6 {
        font-size:13px; font-weight:700; color:#c62828; margin-bottom:14px;
        display:flex; align-items:center; gap:6px;
    }
    .action-panel .action-row { display:flex; gap:10px; flex-wrap:wrap; }
</style>
@endpush

@section('content')
@can('offer.chat.show')

<div class="padding">
<div class="box">

    {{-- ── Page Header ── --}}
    <div class="box-header m-b-2">
        <div class="box-header-left">
            <h3 class="d-block">Chat Thread</h3>
            <small class="d-inline-block">
                <a href="{{ route('adminHome') }}">Dashboard</a> /
                <a href="{{ route('offer-management.index') }}">Offer Management</a> /
                <a href="{{ route('offer-management.chat-threads') }}">Chat Thread Monitoring</a> /
                <span>View Thread</span>
            </small>
        </div>
        <div class="box-header-right">
            <a href="{{ route('offer-management.chat-threads') }}" class="btn btn-sm white">
                <i class="material-icons" style="font-size:14px;vertical-align:middle;">arrow_back</i> Back
            </a>
        </div>
    </div>

    <div class="box-body">

        {{-- ── Read-only notice ── --}}
        <div class="readonly-banner">
            <i class="material-icons">lock</i>
            <span>This is a <strong>read-only</strong> view. Chat content cannot be modified. You may take account actions below if necessary.</span>
        </div>

        {{-- ── Participants ── --}}
        <div class="participants-row">
            <div class="participant-card">
                <div class="avatar {{ $chatInfo->sender_type == 2 ? 'business' : 'user' }}">
                    {{ strtoupper(substr($chatInfo->sender_name, 0, 1)) }}
                </div>
                <div class="p-info">
                    <strong>{{ $chatInfo->sender_name }}</strong>
                    <small>
                        {{ $chatInfo->sender_type == 2 ? 'Business' : 'End User' }}
                        &nbsp;&bull;&nbsp;
                        @if($chatInfo->sender_status == 3)
                            <span class="text-danger">Suspended</span>
                        @elseif($chatInfo->sender_status == 2)
                            <span class="text-muted">Deleted</span>
                        @else
                            <span class="text-success">Active</span>
                        @endif
                    </small>
                </div>
            </div>

            <div style="display:flex;align-items:center;color:#aaa;font-size:20px;">
                <i class="material-icons">swap_horiz</i>
            </div>

            <div class="participant-card">
                <div class="avatar {{ $chatInfo->receiver_type == 2 ? 'business' : 'user' }}">
                    {{ strtoupper(substr($chatInfo->receiver_name, 0, 1)) }}
                </div>
                <div class="p-info">
                    <strong>{{ $chatInfo->receiver_name }}</strong>
                    <small>
                        {{ $chatInfo->receiver_type == 2 ? 'Business' : 'End User' }}
                        &nbsp;&bull;&nbsp;
                        @if($chatInfo->receiver_status == 3)
                            <span class="text-danger">Suspended</span>
                        @elseif($chatInfo->receiver_status == 2)
                            <span class="text-muted">Deleted</span>
                        @else
                            <span class="text-success">Active</span>
                        @endif
                    </small>
                </div>
            </div>
        </div>

        {{-- ── Message thread ── --}}
        <div class="chat-wrap" id="chatWrap">
            @forelse($messages as $msg)
                @php $isSender = ($msg->sender_id == $chatInfo->sender_id); @endphp
                <div class="bubble-row {{ $isSender ? 'left' : 'right' }}">
                    <div class="bubble-avatar {{ $isSender ? ($chatInfo->sender_type == 2 ? 'business' : 'user') : ($chatInfo->receiver_type == 2 ? 'business' : 'user') }}">
                        {{ strtoupper(substr($isSender ? $chatInfo->sender_name : $chatInfo->receiver_name, 0, 1)) }}
                    </div>
                    <div class="bubble">
                        <div class="bubble-meta">{{ $isSender ? $chatInfo->sender_name : $chatInfo->receiver_name }}</div>
                        @if($msg->message_type == 2)
                            <div><em>[Image]</em></div>
                        @elseif($msg->message_type == 3)
                            <div><em>[Video]</em></div>
                        @else
                            <div>{{ $msg->message }}</div>
                        @endif
                        @if($msg->attachment)
                            <a class="attachment-link" href="{{ asset('storage/' . $msg->attachment) }}" target="_blank">
                                <i class="material-icons" style="font-size:12px;vertical-align:middle;">attach_file</i> View Attachment
                            </a>
                        @endif
                        <div class="bubble-time">{{ \Carbon\Carbon::parse($msg->created_at)->format('d M Y, H:i') }}</div>
                    </div>
                </div>
            @empty
                <div class="text-center text-muted p-a">No messages found in this conversation.</div>
            @endforelse
        </div>

        {{-- ── Admin Action Panel ── --}}
        @canany(['offer.chat.approve', 'offer.chat.delete'])
        <div class="action-panel">
            <h6>
                <i class="material-icons" style="font-size:16px;">warning</i>
                Account Actions &mdash; <span style="font-weight:400;">Use only if abusive or fraudulent behaviour is detected</span>
            </h6>
            <div class="action-row">
                @can('offer.chat.approve')
                    @if($chatInfo->sender_status != 3 && $chatInfo->sender_status != 2)
                    <button class="btn btn-sm warning" onclick="openSuspend({{ $chatInfo->sender_id }}, '{{ e($chatInfo->sender_name) }}')">
                        Suspend {{ $chatInfo->sender_name }}
                    </button>
                    @endif
                    @if($chatInfo->receiver_status != 3 && $chatInfo->receiver_status != 2)
                    <button class="btn btn-sm warning" onclick="openSuspend({{ $chatInfo->receiver_id }}, '{{ e($chatInfo->receiver_name) }}')">
                        Suspend {{ $chatInfo->receiver_name }}
                    </button>
                    @endif
                @endcan
                @can('offer.chat.delete')
                    @if($chatInfo->sender_status != 2)
                    <button class="btn btn-sm danger" onclick="confirmDelete({{ $chatInfo->sender_id }}, '{{ e($chatInfo->sender_name) }}')">
                        Delete {{ $chatInfo->sender_name }}
                    </button>
                    @endif
                    @if($chatInfo->receiver_status != 2)
                    <button class="btn btn-sm danger" onclick="confirmDelete({{ $chatInfo->receiver_id }}, '{{ e($chatInfo->receiver_name) }}')">
                        Delete {{ $chatInfo->receiver_name }}
                    </button>
                    @endif
                @endcan
            </div>
        </div>
        @endcanany

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

{{-- ── Suspend Modal ── --}}
<div class="modal fade" id="suspendModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Suspend Account</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>You are about to suspend <strong id="suspendName"></strong>. This account will be locked immediately.</p>
                <div class="form-group">
                    <label class="form-label">Reason <span class="text-danger">*</span></label>
                    <textarea id="suspendReason" class="form-control" rows="3" placeholder="Describe the reason for suspension..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm white" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm warning" id="doSuspend">Suspend Account</button>
            </div>
        </div>
    </div>
</div>

@else
<input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
<script>window.location.replace(document.getElementById('redirect_url').value);</script>
@endcan
@endsection

@push('after-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.0/sweetalert2.all.min.js"></script>
<script>
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

// Scroll to bottom of chat
(function() {
    var w = document.getElementById('chatWrap');
    if (w) w.scrollTop = w.scrollHeight;
})();

/* ── Suspend ── */
let suspendUserId = null;
function openSuspend(userId, name) {
    suspendUserId = userId;
    $('#suspendName').text(name);
    $('#suspendReason').val('');
    $('#suspendModal').modal('show');
}
$('#doSuspend').on('click', function() {
    const reason = $('#suspendReason').val().trim();
    if (!reason) { Swal.fire('Required', 'Please enter a suspension reason.', 'warning'); return; }
    $.post("{{ route('offer-management.chat-suspend') }}", {
        _token: "{{ csrf_token() }}",
        user_id: suspendUserId,
        reason: reason
    }, function(res) {
        $('#suspendModal').modal('hide');
        if (res.success) {
            Swal.fire({ icon: 'success', title: 'Done', text: res.msg, timer: 2000, showConfirmButton: false })
                .then(function() { location.reload(); });
        } else {
            Swal.fire('Error', res.msg, 'error');
        }
    });
});

/* ── Delete ── */
function confirmDelete(userId, name) {
    Swal.fire({
        title: 'Delete Account?',
        html: 'You are about to permanently delete <strong>' + name + '</strong>. This cannot be undone.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d32f2f',
        confirmButtonText: 'Yes, Delete',
        cancelButtonText: 'Cancel'
    }).then(function(result) {
        if (result.isConfirmed) {
            $.post("{{ route('offer-management.chat-delete') }}", {
                _token: "{{ csrf_token() }}",
                user_id: userId
            }, function(res) {
                if (res.success) {
                    Swal.fire({ icon: 'success', title: 'Deleted', text: res.msg, timer: 2000, showConfirmButton: false })
                        .then(function() { location.reload(); });
                } else {
                    Swal.fire('Error', res.msg, 'error');
                }
            });
        }
    });
}
</script>
@endpush