@extends('layouts.app')

@section('content')
    @php
        $otherProfile = $other->profile;
        $showOnline = $otherProfile?->show_online ?? true;
        $showLastSeen = $otherProfile?->show_last_seen ?? true;
        $isOnline = $showOnline && $other->last_seen_at && $other->last_seen_at->diffInMinutes(now()) <= 5;
        $presenceText = $isOnline ? '🟢 Online' : ($showLastSeen && $other->last_seen_at ? 'Active ' . $other->last_seen_at->diffForHumans() : 'Verified connection');

        $actionsHtml = '
            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
                <button type="button" class="matri-call-btn" id="btn-voice-call" onclick="window.WebRTCCall && window.WebRTCCall.startCall(' . $conversation->id . ', \'voice\', { id: ' . $other->id . ', name: \'' . addslashes($other->name) . '\' })" title="Start voice call">
                    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                    <span>Voice Call</span>
                </button>
                <button type="button" class="matri-call-btn" id="btn-video-call" onclick="window.WebRTCCall && window.WebRTCCall.startCall(' . $conversation->id . ', \'video\', { id: ' . $other->id . ', name: \'' . addslashes($other->name) . '\' })" title="Start video call">
                    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
                    <span>Video Call</span>
                </button>
                <a href="' . route('profiles.show', $other->id) . '" class="matri-btn-secondary" style="font-size: 12.5px; padding: 6px 14px;">Profile &rarr;</a>
            </div>
        ';
    @endphp

    <div style="margin-bottom: 16px;">
        <a href="{{ route('messages.index') }}" class="matri-btn-secondary" style="font-size: 12.5px; padding: 5px 14px; display: inline-flex; align-items: center; gap: 6px;">
            <span>&larr;</span>
            <span>Messages</span>
        </a>
    </div>

    {{-- UNIFIED REUSABLE PAGE HEADER --}}
    @include('partials.page-header', [
        'title' => $other->name,
        'subtitle' => $presenceText . ' • Private end-to-end communication with ' . $other->name,
        'actions' => $actionsHtml,
    ])

    <div class="matri-chat-box matri-card-box" 
         data-conversation-id="{{ $conversation->id }}"
         data-user-id="{{ auth()->id() }}"
         data-other-name="{{ $other->name }}"
         data-last-message-id="{{ collect($messages)->max('id') ?? 0 }}"
         style="padding: 20px; display: flex; flex-direction: column; gap: 16px; min-height: 420px;">
        
        <div class="matri-chat-messages" style="display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; max-height: 520px;">
            @forelse ($messages as $message)
                @php($isMine = (bool) $message['mine'])
                <div class="matri-chat-message-row" id="msg-{{ $message['id'] }}" data-client-key="{{ $message['client_key'] ?? '' }}" style="display: flex; flex-direction: column; align-items: {{ $isMine ? 'flex-end' : 'flex-start' }};">
                    <div style="font-size: 11px; color: var(--matri-text-light); margin-bottom: 3px; padding: 0 4px; display: inline-flex; align-items: center; gap: 4px;">
                        <span>{{ $isMine ? 'You' : $other->name }}</span>
                        @if (!$isMine)
                            @include('partials.verified-badge', ['user' => $other])
                        @endif
                    </div>
                    <div class="matri-chat-bubble" style="max-width: 75%; padding: 10px 16px; border-radius: 18px; font-size: 14px; line-height: 1.45; {{ $isMine ? 'background: var(--matri-primary); color: #FFFFFF; border-bottom-right-radius: 4px;' : 'background: #F3ECE2; color: var(--matri-text); border-bottom-left-radius: 4px;' }}">
                        <p style="margin: 0; white-space: pre-wrap; word-break: break-word;">{{ $message['body'] }}</p>
                    </div>
                    <div class="matri-msg-status" style="font-size: 10.5px; color: var(--matri-text-light); margin-top: 3px; padding: 0 4px; display: inline-flex; align-items: center; gap: 4px;">
                        <span>{{ $message['at'] }}</span>
                        @if ($isMine)
                            @if (($message['status'] ?? '') === 'seen')
                                <span title="Seen" style="color: #2563eb; font-weight: 700;">✓✓ Seen</span>
                            @elseif (($message['status'] ?? '') === 'delivered')
                                <span title="Delivered" style="color: #16a34a; font-weight: 700;">✓✓ Delivered</span>
                            @else
                                <span title="Sent" style="color: #78716c; font-weight: 600;">✓ Sent</span>
                            @endif
                        @endif
                    </div>
                </div>
            @empty
                <div class="matri-empty-state-wrap" style="margin: auto; text-align: center;">
                    @include('partials.empty-state', [
                        'iconSvg' => '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>',
                        'title' => 'No messages in this conversation yet.',
                        'description' => 'Send a warm, respectful message to introduce yourself and start connecting.',
                    ])
                </div>
            @endforelse
        </div>

        <div style="border-top: 1px solid var(--matri-border-subtle); padding-top: 16px; margin-top: auto;">
            <form method="POST" action="{{ route('messages.store', $conversation) }}">
                @csrf
                <label for="body" class="matri-filter-label" style="font-size: 12.5px;">Message</label>
                <textarea id="body" name="body" required maxlength="2000" rows="3" placeholder="Write a thoughtful message…" class="matri-form-input" style="width: 100%; border-radius: var(--matri-radius-md); padding: 12px; font-family: inherit; font-size: 14px; resize: vertical;"></textarea>
                @error('body')
                    <p class="matri-alert-error" style="margin-top: 6px;">{{ $message }}</p>
                @enderror
                @error('user')
                    <p class="matri-alert-error" style="margin-top: 6px;">{{ $message }}</p>
                @enderror
                <div style="margin-top: 12px; display: flex; justify-content: space-between; align-items: center;">
                    <span style="font-size: 11px; color: var(--matri-text-light);">Press <kbd style="background:#eee;padding:2px 5px;border-radius:4px;">Ctrl+Enter</kbd> to send</span>
                    <button type="submit" class="matri-btn-primary">
                        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                        <span>Send</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="{{ asset('js/chat.js') }}?v={{ @filemtime(public_path('js/chat.js')) }}"></script>
@endsection