@extends('admin.layout')
@section('title', 'Percakapan')
@php
    $fromAdmin = $conversation->admin_id !== null;
    $participant = $conversation->customer ?? $conversation->mitra;
@endphp

@section('subtitle', $fromAdmin
    ? 'Admin → ' . ($participant?->name ?? '—')
    : ($conversation->customer?->name ?? '—') . ' ↔ ' . ($conversation->mitra?->name ?? '—'))

@section('content')
    <a href="{{ route('admin.conversations') }}" class="text-sm text-sub hover:text-brand font-semibold">‹ Kembali ke daftar percakapan</a>

    <div class="max-w-2xl mx-auto mt-4">
        <x-flash />
        <div class="bg-white rounded-2xl border border-line overflow-hidden">
            <div class="p-4 border-b border-line flex items-center justify-between">
                <div>
                    <div class="font-bold">{{ $conversation->topic ?? 'Percakapan' }}</div>
                    <div class="text-xs text-sub mt-0.5">
                        @if ($fromAdmin)
                            <span class="text-accent font-semibold">{{ $conversation->admin?->name ?? 'Admin' }}</span> (admin) →
                            <span class="text-brand-dark font-semibold">{{ $participant?->name }}</span>
                            ({{ $conversation->customer_id ? 'customer' : 'mitra' }})
                        @else
                            <span class="text-brand-dark font-semibold">{{ $conversation->customer?->name }}</span> (customer) ·
                            <span class="text-accent font-semibold">{{ $conversation->mitra?->name }}</span> (mitra)
                        @endif
                        @if ($conversation->order) · Order {{ $conversation->order->code }} @endif
                    </div>
                </div>
            </div>

            <div class="p-4 space-y-2.5 bg-canvas">
                @forelse ($conversation->messages as $msg)
                    @php
                        // Pesan admin selalu di kanan; pada thread customer↔mitra,
                        // kanan berarti mitra seperti sebelumnya.
                        $byAdmin = $msg->sender_admin_id !== null;
                        $right = $byAdmin || (! $fromAdmin && $msg->sender_id !== $conversation->customer_id);
                        $bubble = $byAdmin
                            ? 'bg-accent text-white'
                            : ($right ? 'bg-brand text-white' : 'bg-white border border-line');
                    @endphp
                    <div class="flex {{ $right ? 'justify-end' : 'justify-start' }}">
                        <div class="max-w-[75%]">
                            <div class="rounded-2xl px-3.5 py-2.5 text-sm {{ $bubble }}">
                                {{-- Foto ditampilkan, bukan hanya keterangannya: admin membuka
                                     thread ini justru untuk melihat bukti yang dikirim. --}}
                                @if ($msg->isImage() && $msg->imageUrl())
                                    <a href="{{ $msg->imageUrl() }}" target="_blank" rel="noopener">
                                        <img src="{{ $msg->imageUrl() }}" alt="Foto dari {{ $msg->sender?->name }}"
                                             class="rounded-xl max-h-56 w-auto mb-1.5">
                                    </a>
                                @endif
                                {{ $msg->body }}
                            </div>
                            <div class="text-[10px] text-sub mt-1 {{ $right ? 'text-right' : 'text-left' }}">
                                {{ $byAdmin ? ($msg->senderAdmin?->name ?? 'Admin').' (admin)' : $msg->sender?->name }}
                                · {{ $msg->created_at?->format('d M, H:i') }}
                                @if ($msg->read_at) · <span class="text-brand">dibaca</span> @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-sub text-sm py-6">Belum ada pesan.</p>
                @endforelse
            </div>

            {{-- Admin bisa membalas di semua percakapan. Di percakapan
                 customer↔mitra, pesannya tampil sebagai gelembung resmi
                 "SeribuJasa" di aplikasi — tidak menyamar jadi lawan bicara. --}}
            @unless ($fromAdmin)
                <p class="px-4 pt-4 text-xs text-sub">
                    Ini percakapan antar pengguna. Balasanmu tampil sebagai pesan resmi
                    <span class="font-semibold text-ink">SeribuJasa</span> dan terlihat oleh keduanya.
                </p>
            @endunless

            <form method="POST" action="{{ route('admin.conversations.reply', $conversation) }}"
                  class="p-4 border-t border-line flex items-end gap-2">
                @csrf
                <textarea name="body" rows="2" required maxlength="2000" placeholder="Tulis balasan…"
                          class="flex-1 rounded-xl border border-line px-3.5 py-2.5 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20"></textarea>
                <button class="px-4 py-2.5 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                    Kirim
                </button>
            </form>
        </div>
    </div>
@endsection