@extends('provider.layout')

@section('title', 'Conversation')

@push('styles')
<style>
/* ── Chat card wrapper ──────────────────────────────────────── */
.chat-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    min-height: 480px;
    max-height: 820px;
    background: var(--bg-elevated, #fff);
    border: 1.5px solid rgba(20, 184, 166, 0.14);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(20, 184, 166, 0.07);
}

/* ── Header ─────────────────────────────────────────────────── */
.chat-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, rgba(20,184,166,0.06) 0%, rgba(251,191,36,0.04) 100%);
    border-bottom: 1.5px solid rgba(20, 184, 166, 0.12);
    flex-shrink: 0;
}
.chat-back-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-700, #0f766e);
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.chat-back-btn:hover {
    background: rgba(20, 184, 166, 0.15);
    transform: translateX(-2px);
}
.chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), #f59e0b);
    color: white;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}
.chat-other-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin: 0 0 0.1rem 0;
}
.chat-subject {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--brand-700, #0f766e);
    font-weight: 600;
    overflow: hidden;
}
.chat-subject a {
    color: var(--brand-700, #0f766e);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-subject a:hover { text-decoration: underline; }
.view-ad-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.875rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(20,184,166,0.1), rgba(251,191,36,0.07));
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: var(--brand-700, #0f766e);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.view-ad-pill:hover {
    background: linear-gradient(135deg, rgba(20,184,166,0.18), rgba(251,191,36,0.12));
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(20, 184, 166, 0.18);
}

/* ── Feed ───────────────────────────────────────────────────── */
.chat-feed {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    scroll-behavior: smooth;
    background: #f4f7f6;
}
.chat-feed::-webkit-scrollbar { width: 4px; }
.chat-feed::-webkit-scrollbar-track { background: transparent; }
.chat-feed::-webkit-scrollbar-thumb { background: rgba(20,184,166,0.2); border-radius: 999px; }

/* ── Date divider ───────────────────────────────────────────── */
.date-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 0.5rem;
}
.date-divider::before,
.date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(20, 184, 166, 0.12);
}
.date-divider span {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    padding: 0.2rem 0.625rem;
    background: rgba(20,184,166,0.07);
    border-radius: 9999px;
}

/* ── Message row ────────────────────────────────────────────── */
.msg-row { display: flex; align-items: flex-end; gap: 0.5rem; }
.msg-row.mine   { flex-direction: row-reverse; }
.msg-row.theirs { flex-direction: row; }

/* Big gap whenever sender side changes */
.msg-row.mine   + .msg-row.theirs,
.msg-row.theirs + .msg-row.mine {
    margin-top: 0.875rem;
}
/* Tight spacing within same-sender runs */
.msg-row.mine   + .msg-row.mine,
.msg-row.theirs + .msg-row.theirs {
    margin-top: 0.125rem;
}

/* ── Small avatar ───────────────────────────────────────────── */
.msg-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-400), #fbbf24);
    color: white;
    font-weight: 700;
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-av.mine-av { background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #0f766e)); }

/* ── Bubble ─────────────────────────────────────────────────── */
.msg-bubble-wrap { display: flex; flex-direction: column; max-width: 68%; }
.msg-row.mine   .msg-bubble-wrap { align-items: flex-end; }
.msg-row.theirs .msg-bubble-wrap { align-items: flex-start; }

.msg-sender {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
    padding: 0 0.25rem;
}

.bubble {
    padding: 0.65rem 0.95rem;
    border-radius: 1.125rem;
    font-size: 0.9rem;
    line-height: 1.55;
    word-break: break-word;
}
.bubble.mine {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #0f766e));
    color: #fff;
    border-bottom-right-radius: 0.3rem;
    box-shadow: 0 2px 10px rgba(20, 184, 166, 0.28);
}
.bubble.theirs {
    background: #fff;
    color: var(--text-primary);
    border: 1.5px solid rgba(20, 184, 166, 0.13);
    border-bottom-left-radius: 0.3rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* ── Offer chip ─────────────────────────────────────────────── */
.offer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.bubble.mine  .offer-chip { background: rgba(255,255,255,0.2); color: #fff; }
.bubble.theirs .offer-chip {
    background: rgba(20,184,166,0.08);
    color: var(--brand-700, #0f766e);
    border: 1px solid rgba(20,184,166,0.2);
}

/* ── Contact row ────────────────────────────────────────────── */
.contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.75rem;
    font-weight: 600;
}
.bubble.mine  .contact-row { color: rgba(255,255,255,0.85); border-top-color: rgba(255,255,255,0.2); }
.bubble.theirs .contact-row { color: var(--brand-700, #0f766e); border-top-color: rgba(20,184,166,0.12); }
.contact-row span { display: flex; align-items: center; gap: 0.25rem; }

/* ── Meta ───────────────────────────────────────────────────── */
.msg-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    padding: 0 0.25rem;
}
.msg-row.mine .msg-meta { flex-direction: row-reverse; color: rgba(20,184,166,0.55); }

/* ── Reply box ──────────────────────────────────────────────── */
.chat-reply {
    padding: 0.875rem 1.25rem;
    background: #fff;
    border-top: 1.5px solid rgba(20, 184, 166, 0.12);
    flex-shrink: 0;
}
.reply-inner {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    background: #f0fdfa;
    border: 1.5px solid rgba(20, 184, 166, 0.15);
    border-radius: 1.25rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reply-inner:focus-within {
    border-color: var(--brand-400, #2dd4bf);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
    background: #fff;
}
.reply-textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-family: inherit;
    line-height: 1.5;
    max-height: 120px;
    padding: 0.25rem 0;
}
.reply-textarea::placeholder { color: var(--text-muted); }
.reply-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #0f766e));
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    box-shadow: 0 3px 12px rgba(20, 184, 166, 0.32);
}
.reply-send-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.42);
}
.reply-send-btn:active { transform: scale(0.96); }
</style>
@endpush

@section('content')
@php
    $authId      = auth()->id();
    $other       = $conversation->otherParticipant($authId);
    $adUrl       = $conversation->safeReferenceUrl();
    $displayName = $conversation->getOtherParticipantDisplayName($authId);
@endphp

{{-- Back link above card --}}
<a href="{{ route('provider.messages.inbox') }}"
   style="display:inline-flex;align-items:center;gap:.4rem;color:var(--brand-700,#0f766e);font-size:.875rem;font-weight:600;margin-bottom:1rem;text-decoration:none;transition:opacity .15s"
   onmouseover="this.style.opacity='.75'"
   onmouseout="this.style.opacity='1'">
    <i data-lucide="arrow-left" style="width:16px;height:16px"></i> Back to Messages
</a>

@if(session('success'))
    <div class="alert alert-success" style="margin-bottom:.875rem">
        <i data-lucide="check-circle" style="width:16px;height:16px;flex-shrink:0"></i>
        {{ session('success') }}
    </div>
@endif
@if($errors->has('message'))
    <div class="alert alert-error" style="margin-bottom:.875rem">
        <i data-lucide="alert-circle" style="width:16px;height:16px;flex-shrink:0"></i>
        {{ $errors->first('message') }}
    </div>
@endif

{{-- Main chat card --}}
<div class="chat-wrapper">

    {{-- Header --}}
    <div class="chat-header">
        <a href="{{ route('provider.messages.inbox') }}" class="chat-back-btn" title="Back">
            <i data-lucide="arrow-left" style="width:16px;height:16px"></i>
        </a>

        <div class="chat-avatar">{{ strtoupper(substr($displayName, 0, 1)) }}</div>

        <div style="flex:1;min-width:0">
            <div class="chat-other-name">{{ $displayName }}</div>
            @if($conversation->subject)
                <div class="chat-subject">
                    <i data-lucide="package" style="width:11px;height:11px;flex-shrink:0"></i>
                    @if($adUrl)
                        <a href="{{ $adUrl }}" target="_blank">
                            {{ Str::limit($conversation->subject, 52) }}
                            <i data-lucide="external-link" style="width:10px;height:10px;opacity:.65"></i>
                        </a>
                    @else
                        {{ Str::limit($conversation->subject, 52) }}
                    @endif
                </div>
            @endif
        </div>

        @if($adUrl)
            <a href="{{ $adUrl }}" target="_blank" class="view-ad-pill">
                <i data-lucide="external-link" style="width:12px;height:12px"></i> View Reference
            </a>
        @endif
    </div>

    {{-- Feed --}}
    <div class="chat-feed" id="chat-feed">
        @forelse($conversation->messages as $i => $msg)
            @php
                $isMine    = $msg->sender_id === $authId;
                $senderName = $msg->sender->name ?? $msg->sender_name ?? 'User';
                $msgDate   = $msg->created_at->format('Y-m-d');
                $prevDate  = $i > 0 ? $conversation->messages[$i-1]->created_at->format('Y-m-d') : null;
                $showDate  = $i === 0 || $msgDate !== $prevDate;
                $dateLabel = $msg->created_at->isToday()
                               ? 'Today'
                               : ($msg->created_at->isYesterday() ? 'Yesterday' : $msg->created_at->format('d M Y'));
            @endphp

            @if($showDate)
                <div class="date-divider"><span>{{ $dateLabel }}</span></div>
            @endif

            <div class="msg-row {{ $isMine ? 'mine' : 'theirs' }}">
                @if(!$isMine)
                    <div class="msg-av">{{ strtoupper(substr($senderName, 0, 1)) }}</div>
                @endif

                <div class="msg-bubble-wrap">
                    @if(!$isMine)
                        <div class="msg-sender">{{ $senderName }}</div>
                    @endif

                    <div class="bubble {{ $isMine ? 'mine' : 'theirs' }}">
                        @if($msg->offer_price)
                            <div class="offer-chip">
                                <i data-lucide="tag" style="width:12px;height:12px"></i>
                                Offer: {!! \App\Helpers\CurrencyHelper::format($msg->offer_price) !!}
                            </div>
                        @endif

                        <div style="white-space:pre-wrap">{{ $msg->message }}</div>

                        @if(!$isMine && $msg->offer_price && ($msg->sender_phone || $msg->sender_email))
                            <div class="contact-row">
                                @if($msg->sender_phone)
                                    <a href="tel:{{ $msg->sender_phone }}" style="color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:0.25rem">
                                        <i data-lucide="phone" style="width:11px;height:11px"></i>
                                        {{ $msg->sender_phone }}
                                    </a>
                                @endif
                                @if($msg->sender_email)
                                    <a href="mailto:{{ $msg->sender_email }}" style="color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:0.25rem">
                                        <i data-lucide="mail" style="width:11px;height:11px"></i>
                                        {{ $msg->sender_email }}
                                    </a>
                                @endif
                            </div>
                        @endif
                    </div>

                    <div class="msg-meta">
                        <span>{{ $msg->created_at->format('h:i A') }}</span>
                        @if($isMine)
                            @if($msg->is_read)
                                <span style="display:flex;align-items:center;gap:.15rem;color:rgba(20,184,166,0.7)">
                                    <i data-lucide="check-check" style="width:13px;height:13px"></i>
                                    <span>Read</span>
                                </span>
                            @else
                                <span style="display:flex;align-items:center;gap:.15rem;color:rgba(20,184,166,0.4)">
                                    <i data-lucide="check" style="width:13px;height:13px"></i>
                                    <span>Sent</span>
                                </span>
                            @endif
                        @endif
                    </div>
                </div>

                @if($isMine)
                    <div class="msg-av mine-av">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
                @endif
            </div>

        @empty
            <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:.75rem;color:var(--text-muted);padding:2rem">
                <i data-lucide="message-circle" style="width:40px;height:40px;opacity:.3"></i>
                <span style="font-size:.875rem">No messages yet. Start the conversation!</span>
            </div>
        @endforelse
    </div>

    {{-- Reply --}}
    <div class="chat-reply">
        <form action="{{ route('provider.messages.reply', $conversation) }}" method="POST" id="reply-form">
            @csrf
            <div class="reply-inner">
                <textarea
                    name="message"
                    id="reply-message"
                    class="reply-textarea"
                    placeholder="Type a reply… (Ctrl + Enter to send)"
                    rows="1"
                    required
                    oninput="autoGrow(this)"></textarea>
                <button type="submit" class="reply-send-btn" id="send-reply-btn" title="Send">
                    <i data-lucide="send" style="width:17px;height:17px"></i>
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    const feed = document.getElementById('chat-feed');
    if (feed) feed.scrollTop = feed.scrollHeight;

    document.getElementById('reply-message')?.addEventListener('keydown', function (e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            document.getElementById('reply-form').submit();
        }
    });

    function autoGrow(el) {
        el.style.height = 'auto';
        el.style.height = Math.min(el.scrollHeight, 120) + 'px';
    }
</script>
@endpush

@endsection