@php
    $messages = $getState() ?? collect();
@endphp

@if($messages->isEmpty())
    <div style="padding:24px;text-align:center;color:#9ca3af;font-size:14px;">
        No messages on this order yet. Use the <strong>Send Message</strong> button above to compose one.
    </div>
@else
    <div style="display:flex;flex-direction:column;gap:16px;">
        @foreach($messages as $message)
            @php
                $isPrivate = $message->is_private_note;
                $isSystem  = !$message->sender_user_id;
                $channels  = $message->channels ?? [];
                $channelLabels = [
                    'email'    => 'Email',
                    'sms'      => 'SMS',
                    'whatsapp' => 'WhatsApp',
                    'push'     => 'Push',
                ];
            @endphp
            <div style="border:1px solid {{ $isPrivate ? '#fef3c7' : '#e5e7eb' }};border-radius:8px;overflow:hidden;">
                {{-- Header --}}
                <div style="display:flex;align-items:center;gap:12px;padding:10px 16px;background:{{ $isPrivate ? '#fffbeb' : '#f9fafb' }};border-bottom:1px solid {{ $isPrivate ? '#fde68a' : '#e5e7eb' }};">
                    <div style="flex:1;">
                        <span style="font-size:13px;font-weight:600;color:#111827;">
                            {{ $message->sender?->name ?? 'System' }}
                        </span>
                        <span style="font-size:12px;color:#6b7280;margin-left:8px;">
                            {{ $message->created_at?->format('d M Y, H:i') ?? '' }}
                        </span>
                    </div>
                    <div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
                        @if($isPrivate)
                            <span style="font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:#fef3c7;color:#b45309;">Private Note</span>
                        @else
                            @if(!$message->is_visible_to_customer)
                                <span style="font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:#f3f4f6;color:#6b7280;">Internal</span>
                            @else
                                <span style="font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:#dcfce7;color:#15803d;">Visible to Customer</span>
                            @endif
                            @foreach($channels as $ch)
                                @php
                                    $sent = ($ch === 'email' && $message->sent_via_email)
                                         || ($ch === 'sms' && $message->sent_via_sms)
                                         || ($ch === 'whatsapp' && $message->sent_via_whatsapp)
                                         || ($ch === 'push' && $message->sent_via_push);
                                @endphp
                                <span style="font-size:11px;padding:2px 8px;border-radius:999px;background:#dbeafe;color:#1d4ed8;">
                                    {{ $channelLabels[$ch] ?? strtoupper($ch) }}{{ $sent ? ' (sent)' : '' }}
                                </span>
                            @endforeach
                        @endif
                    </div>
                </div>
                {{-- Subject --}}
                <div style="padding:8px 16px 0;font-size:13px;font-weight:600;color:#374151;">
                    {{ $message->subject }}
                </div>
                {{-- Body --}}
                <div style="padding:8px 16px 14px;font-size:14px;color:#374151;line-height:1.6;">
                    {!! $message->body !!}
                </div>
            </div>
        @endforeach
    </div>
@endif