{{--
    The customer-facing conversation on a support token.

    Every message lives in the same `token_notes` thread the admin panel writes
    to. A message carrying a client_id was posted here from the portal; one
    carrying a user_id was written by staff. Only note_type = 'customer' rows
    reach this partial — the portal controllers constrain the relation, so
    internal employee notes can never appear.

    Usage: @include('Customer.tokenNotes', ['token' => $r])
--}}
@once
    <style>
        .note-thread {
            min-width: 250px;
            max-width: 320px;
        }

        .note-thread-messages {
            max-height: 240px;
            overflow-y: auto;
            padding-right: 2px;
        }

        .note-msg {
            display: flex;
            flex-direction: column;
            margin-bottom: 8px;
        }

        .note-msg:last-child {
            margin-bottom: 0;
        }

        .note-msg-bubble {
            border-radius: 10px;
            padding: 6px 10px;
            font-size: 13px;
            line-height: 1.35;
            word-break: break-word;
            max-width: 90%;
        }

        /* Staff on the left, the customer's own messages on the right — the
           usual chat convention, so a customer can tell at a glance which
           messages are theirs. */
        .note-msg-admin {
            align-items: flex-start;
        }

        .note-msg-admin .note-msg-bubble {
            background: #f0f1fe;
            color: #012970;
            border-bottom-left-radius: 3px;
        }

        .note-msg-client {
            align-items: flex-end;
        }

        .note-msg-client .note-msg-bubble {
            background: #e0f8e9;
            color: #0c5f33;
            border-bottom-right-radius: 3px;
        }

        .note-msg-meta {
            font-size: 10.5px;
            color: #899bbd;
            margin-top: 2px;
            padding: 0 3px;
        }

        .note-thread-empty {
            font-size: 12.5px;
            color: #899bbd;
            margin-bottom: 8px;
        }

        .note-reply-form {
            margin-top: 8px;
            border-top: 1px solid #eef0f4;
            padding-top: 8px;
        }

        .note-reply-form textarea {
            font-size: 13px;
            resize: vertical;
        }

        .note-reply-error {
            font-size: 11px;
            color: #dc3545;
            margin-top: 3px;
        }

        .note-reply-sent {
            font-size: 11px;
            color: #2eca6a;
            font-weight: 600;
            margin-top: 3px;
        }
    </style>
@endonce

@php
    $threadNotes = $token->notes;
@endphp

<div class="note-thread">
    @if ($threadNotes->isEmpty())
        <div class="note-thread-empty">No messages yet.</div>
    @else
        <div class="note-thread-messages">
            @foreach ($threadNotes as $note)
                {{-- update_time is deliberately not shown here. It is an internal
                     follow-up deadline that drives the Telegram escalation and the
                     token dashboard's "no update" buckets, not a fact about the
                     message — and showing a customer a promised time they can hold
                     you to (or watch expire) is worse than showing nothing. It stays
                     visible in the admin note modal. --}}
                <div class="note-msg note-msg-{{ $note->author_side }}">
                    <div class="note-msg-bubble">{{ $note->note }}</div>
                    <span class="note-msg-meta">
                        {{ $note->author_side === 'client' ? 'You' : $note->author_name }}
                        · {{ date('d-M-Y g:i a', strtotime($note->created_at)) }}
                    </span>
                </div>
            @endforeach
        </div>
    @endif

    {{-- The same setting that hides the token's category and description also
         takes away the reply box, so the thread stays read-only for the
         customer. replyTokenNote() refuses the post for the same reason. --}}
    @if ($token->status == 'Active' && !globalPermission('hide-token-details-in-customer-portal'))
        <form action="{{ route('token-note-reply') }}" method="POST" class="note-reply-form">
            @csrf
            <input type="hidden" name="token_id" value="{{ $token->id }}">
            <textarea name="note" class="form-control" rows="2" maxlength="2000" placeholder="Write a reply..."
                required></textarea>

            {{-- Scoped by token id so a validation message shows only on the
                 thread it belongs to, not on every row in the table. --}}
            @if ($errors->has('note') && (int) old('token_id') === (int) $token->id)
                <div class="note-reply-error">{{ $errors->first('note') }}</div>
            @endif

            @if (session('note_reply_success') == $token->id)
                <div class="note-reply-sent">Reply sent.</div>
            @endif

            <button type="submit" class="btn btn-primary btn-sm mt-2">Send</button>
        </form>
    @endif
</div>