@php
    use App\Models\RefundRequest;
    use Illuminate\Support\Str;

    $messages = $refund->messages
        ->sortBy(function ($message) {
            return $message->created_at ?? $message->id;
        })
        ->values();

    $refundStatus = match (true) {
        (bool) $refund->is_completed => [
            'label' => __('Completed'),
            'class' => 'bg-success',
            'icon' => 'fa-check-circle',
        ],

        (int) $refund->status === RefundRequest::STATUS_ACCEPTED => [
            'label' => __('Accepted'),
            'class' => 'bg-info',
            'icon' => 'fa-thumbs-up',
        ],

        (int) $refund->status === RefundRequest::STATUS_DECLINED => [
            'label' => __('Declined'),
            'class' => 'bg-danger',
            'icon' => 'fa-times-circle',
        ],

        default => [
            'label' => __('Pending'),
            'class' => 'bg-warning text-dark',
            'icon' => 'fa-clock',
        ],
    };

    $canMessage = (bool) (
        $availableActions['can_message']
        ?? ! $refund->is_completed
    );
@endphp

<div class="row g-4">
    {{-- Messages --}}
    <div class="col-lg-8">
        <div class="card border-0 bg-light h-100">
            <div
                class="card-header bg-white border-0 py-3
                       d-flex justify-content-between align-items-center"
            >
                <h6 class="fw-700 mb-0">
                    <i class="fas fa-comments text-primary me-2"></i>
                    {{ __('Refund Conversation') }}
                </h6>

                <span class="badge bg-secondary">
                    {{ $messages->count() }}
                    {{ Str::plural(__('message'), $messages->count()) }}
                </span>
            </div>

            <div class="card-body">
                <div
                    class="chat-container pe-2"
                    id="refundChatContainer"
                >
                    @forelse($messages as $message)
                        @php
                            $isCurrentUser = (
                                (int) $message->user_id ===
                                (int) auth()->id()
                            );

                            $senderName = $message->user?->username
                                ?? (
                                    $message->is_buyer
                                        ? __('Buyer')
                                        : __('Seller')
                                );

                            $initials = Str::upper(
                                Str::substr(
                                    trim((string) $senderName),
                                    0,
                                    2
                                )
                            );

                            $senderRole = $message->is_buyer
                                ? __('Buyer')
                                : (
                                    $isCurrentUser
                                        ? __('Administrator')
                                        : __('Seller')
                                );

                            $avatarClass = $message->is_buyer
                                ? 'bg-warning text-dark'
                                : (
                                    $isCurrentUser
                                        ? 'bg-primary text-white'
                                        : 'bg-info text-white'
                                );
                        @endphp

                        <div
                            class="d-flex mb-3
                                   {{ $isCurrentUser ? 'flex-row-reverse' : '' }}"
                        >
                            <div class="flex-shrink-0 mx-2">
                                <div
                                    class="refund-message-avatar {{ $avatarClass }}"
                                    title="{{ $senderName }}"
                                >
                                    {{ $initials !== '' ? $initials : '?' }}
                                </div>
                            </div>

                            <div class="refund-message-content">
                                <div
                                    class="refund-message-bubble
                                           {{ $isCurrentUser
                                               ? 'bg-primary text-white'
                                               : 'bg-white border' }}"
                                >
                                    <div class="small fw-700 mb-1">
                                        {{ $senderName }}
                                    </div>

                                    <div class="refund-message-text">
                                        {{ $message->message }}
                                    </div>
                                </div>

                                <div
                                    class="d-flex flex-wrap align-items-center gap-1
                                           text-muted small mt-1
                                           {{ $isCurrentUser
                                               ? 'justify-content-end'
                                               : '' }}"
                                >
                                    @if($message->created_at)
                                        <span>
                                            <i class="far fa-clock me-1"></i>
                                            {{
                                                $message->created_at->format(
                                                    'M d, Y H:i'
                                                )
                                            }}
                                        </span>
                                    @endif

                                    <span
                                        class="badge
                                               {{ $message->is_buyer
                                                   ? 'bg-warning text-dark'
                                                   : (
                                                       $isCurrentUser
                                                           ? 'bg-primary'
                                                           : 'bg-info'
                                                   ) }}"
                                    >
                                        {{ $senderRole }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-5">
                            <i
                                class="fas fa-comment-slash fa-3x
                                       mb-3 d-block opacity-25"
                            ></i>

                            <h6 class="text-muted">
                                {{ __('No messages yet') }}
                            </h6>

                            <p class="small mb-0">
                                {{
                                    __('The refund conversation will appear here.')
                                }}
                            </p>
                        </div>
                    @endforelse
                </div>

                {{-- Message Form --}}
                @if($canMessage)
                    <hr class="my-4">

                    <form
                        action="{{ route('admin.refunds.messages.store', $refund) }}"
                        method="POST"
                        id="adminRefundMessageForm"
                    >
                        @csrf

                        <div class="mb-2">
                            <label
                                for="refund_message"
                                class="form-label fw-600"
                            >
                                {{ __('Send a message') }}
                                <span class="text-danger">*</span>
                            </label>

                            <textarea
                                id="refund_message"
                                name="message"
                                rows="3"
                                class="form-control
                                       @error('message') is-invalid @enderror"
                                placeholder="{{ __('Write a message to the buyer and seller...') }}"
                                required
                                minlength="2"
                                maxlength="5000"
                            >{{ old('message') }}</textarea>

                            @error('message')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div
                            class="d-flex flex-wrap
                                   justify-content-between
                                   align-items-center gap-2"
                        >
                            <small class="text-muted">
                                <span id="refundMessageCharacterCount">0</span>
                                / 5,000
                            </small>

                            <button
                                type="submit"
                                class="btn btn-primary"
                                id="sendRefundMessageButton"
                            >
                                <i class="fas fa-paper-plane me-1"></i>
                                {{ __('Send Message') }}
                            </button>
                        </div>
                    </form>
                @else
                    <div class="alert alert-secondary mb-0">
                        <i class="fas fa-lock me-2"></i>
                        {{
                            __('This refund has been completed and can no longer receive messages.')
                        }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Refund Information --}}
    <div class="col-lg-4">
        <div class="card border-0 bg-light mb-3">
            <div class="card-body">
                <h6 class="fw-700 mb-3">
                    <i class="fas fa-info-circle me-2 text-primary"></i>
                    {{ __('Refund Information') }}
                </h6>

                <dl class="row mb-0 small">
                    <dt class="col-7 text-muted">
                        {{ __('Status') }}
                    </dt>

                    <dd class="col-5 text-end">
                        <span class="badge {{ $refundStatus['class'] }}">
                            <i
                                class="fas {{ $refundStatus['icon'] }} me-1"
                            ></i>
                            {{ $refundStatus['label'] }}
                        </span>
                    </dd>

                    <dt class="col-7 text-muted">
                        {{ __('Refund ID') }}
                    </dt>

                    <dd class="col-5 text-end fw-600">
                        #{{ $refund->id }}
                    </dd>

                    @if($refund->order_number)
                        <dt class="col-7 text-muted">
                            {{ __('Order') }}
                        </dt>

                        <dd class="col-5 text-end fw-600">
                            {{ $refund->order_number }}
                        </dd>
                    @endif

                    <dt class="col-7 text-muted">
                        {{ __('Total Messages') }}
                    </dt>

                    <dd class="col-5 text-end fw-600">
                        {{ $messages->count() }}
                    </dd>

                    <dt class="col-7 text-muted">
                        {{ __('Requested') }}
                    </dt>

                    <dd class="col-5 text-end">
                        @if($refund->created_at)
                            <span
                                title="{{ $refund->created_at->format('M d, Y H:i') }}"
                            >
                                {{ $refund->created_at->diffForHumans() }}
                            </span>
                        @else
                            {{ __('N/A') }}
                        @endif
                    </dd>

                    @if($refund->updated_at)
                        <dt class="col-7 text-muted">
                            {{ __('Last Updated') }}
                        </dt>

                        <dd class="col-5 text-end">
                            {{ $refund->updated_at->diffForHumans() }}
                        </dd>
                    @endif

                    @if($refund->completed_at)
                        <dt class="col-7 text-muted">
                            {{ __('Completed') }}
                        </dt>

                        <dd class="col-5 text-end">
                            <span
                                title="{{ $refund->completed_at->format('M d, Y H:i') }}"
                            >
                                {{ $refund->completed_at->diffForHumans() }}
                            </span>
                        </dd>
                    @endif

                    @if($refund->refund_reference)
                        <dt class="col-7 text-muted">
                            {{ __('Reference') }}
                        </dt>

                        <dd class="col-5 text-end">
                            <code>{{ $refund->refund_reference }}</code>
                        </dd>
                    @endif
                </dl>
            </div>
        </div>

        {{-- Participants --}}
        <div class="card border-0 bg-light">
            <div class="card-body">
                <h6 class="fw-700 mb-3">
                    <i class="fas fa-users me-2 text-primary"></i>
                    {{ __('Participants') }}
                </h6>

                <div class="mb-3">
                    <small class="text-muted text-uppercase fw-600">
                        {{ __('Buyer') }}
                    </small>

                    <div class="fw-600">
                        {{
                            $refund->buyer?->username
                            ?? __('Buyer #:id', [
                                'id' => $refund->buyer_id,
                            ])
                        }}
                    </div>

                    @if($refund->buyer?->email)
                        <small class="text-muted">
                            {{ $refund->buyer->email }}
                        </small>
                    @endif
                </div>

                <div>
                    <small class="text-muted text-uppercase fw-600">
                        {{ __('Seller') }}
                    </small>

                    <div class="fw-600">
                        {{
                            $refund->seller?->username
                            ?? __('Seller #:id', [
                                'id' => $refund->seller_id,
                            ])
                        }}
                    </div>

                    @if($refund->seller?->email)
                        <small class="text-muted">
                            {{ $refund->seller->email }}
                        </small>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .fw-600 {
        font-weight: 600;
    }

    .fw-700 {
        font-weight: 700;
    }

    .chat-container {
        max-height: 430px;
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    .refund-message-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .refund-message-content {
        max-width: 78%;
        min-width: 0;
    }

    .refund-message-bubble {
        padding: 0.85rem 1rem;
        border-radius: 1rem;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    .chat-container::-webkit-scrollbar {
        width: 6px;
    }

    .chat-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .chat-container::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

    .chat-container::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    @media (max-width: 575.98px) {
        .refund-message-content {
            max-width: 85%;
        }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var chatContainer = document.getElementById(
        'refundChatContainer'
    );

    var messageInput = document.getElementById(
        'refund_message'
    );

    var characterCount = document.getElementById(
        'refundMessageCharacterCount'
    );

    var messageForm = document.getElementById(
        'adminRefundMessageForm'
    );

    var submitButton = document.getElementById(
        'sendRefundMessageButton'
    );

    if (chatContainer) {
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    function updateCharacterCount() {
        if (!messageInput || !characterCount) {
            return;
        }

        characterCount.textContent = messageInput.value.length;

        characterCount.classList.toggle(
            'text-warning',
            messageInput.value.length >= 4500 &&
            messageInput.value.length < 4900
        );

        characterCount.classList.toggle(
            'text-danger',
            messageInput.value.length >= 4900
        );
    }

    if (messageInput) {
        messageInput.addEventListener(
            'input',
            updateCharacterCount
        );

        updateCharacterCount();
    }

    if (messageForm && submitButton) {
        messageForm.addEventListener('submit', function () {
            submitButton.disabled = true;

            submitButton.innerHTML =
                '<i class="fas fa-spinner fa-spin me-1"></i>' +
                @json(__('Sending...'));
        });
    }
});
</script>
@endpush