@extends('layouts.account')

@section('title', $other?->name ?? __('Conversation'))
@section('heading', $other?->name ?? __('Conversation'))
@section('subheading', $conversation->listing?->title)

@section('actions')
    <div class="flex flex-wrap gap-2">
        <form action="{{ route('account.messages.block', $conversation) }}" method="POST">
            @csrf
            <button type="submit" class="btn-ghost btn-sm">
                {{ $conversation->isBlocked() ? __('Unblock') : __('Block') }}
            </button>
        </form>

        <form action="{{ route('account.messages.archive', $conversation) }}" method="POST">
            @csrf
            <button type="submit" class="btn-outline btn-sm">{{ __('Archive') }}</button>
        </form>
    </div>
@endsection

@section('account')
    @if (session('error'))
        <x-alert type="error" class="mb-6">{{ session('error') }}</x-alert>
    @endif

    @if ($conversation->listing)
        <a href="{{ $conversation->listing->publicUrl() }}" class="mb-6 flex items-center gap-4 rounded-xl border border-border bg-surface p-4 transition hover:shadow-card">
            <x-image :src="$conversation->listing->cover_image" :alt="$conversation->listing->title"
                     ratio="4/3" rounded="rounded-lg" class="w-20 shrink-0" />

            <div class="min-w-0">
                <p class="truncate font-display text-sm font-semibold text-text">{{ $conversation->listing->title }}</p>
                <p class="mt-0.5 text-sm text-text-secondary">{{ $conversation->listing->formattedPrice() }}</p>
            </div>
        </a>
    @endif

    <div class="space-y-4">
        @foreach ($conversation->messages as $message)
            @php($mine = $message->isFrom($user))

            <div @class(['flex', 'justify-end' => $mine])>
                <div @class([
                    'max-w-lg rounded-2xl px-4 py-3',
                    'bg-primary/15 text-text' => $mine,
                    'border border-border bg-surface text-text' => ! $mine,
                ])>
                    <p class="whitespace-pre-line text-sm">{{ $message->body }}</p>

                    @if ($message->attachments->isNotEmpty())
                        <ul class="mt-3 space-y-1.5 border-t border-border/60 pt-3">
                            @foreach ($message->attachments as $attachment)
                                <li>
                                    <a href="{{ route('account.messages.download', [$conversation, $attachment]) }}"
                                       class="inline-flex items-center gap-1.5 text-xs font-medium text-text-brand underline-offset-4 hover:underline">
                                        <x-icon name="document" class="size-3.5" />
                                        {{ $attachment->original_name }} ({{ $attachment->humanSize() }})
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif

                    <p class="mt-2 text-right text-xs text-text-muted">
                        {{ $message->created_at->diffForHumans() }}
                        @if ($mine && $message->isRead())
                            · {{ __('Read') }}
                        @endif
                    </p>
                </div>
            </div>
        @endforeach
    </div>

    @if ($conversation->isBlocked())
        <x-alert type="info" class="mt-6" :title="__('This conversation is blocked')">
            {{ __('Neither of you can write here until it is unblocked.') }}
        </x-alert>
    @else
        <form action="{{ route('account.messages.store', $conversation) }}" method="POST"
              enctype="multipart/form-data" class="mt-6 space-y-4 rounded-xl border border-border bg-surface p-5"
              x-data="submitGuard" @submit="submit()">
            @csrf

            <div>
                <label for="body" class="sr-only">{{ __('Your message') }}</label>
                <textarea id="body" name="body" rows="4" required maxlength="5000" class="form-input"
                          placeholder="{{ __('Write a reply…') }}">{{ old('body') }}</textarea>
                @error('body')<p class="form-error">{{ $message }}</p>@enderror
            </div>

            <div class="flex flex-wrap items-end justify-between gap-3">
                <div class="min-w-0 flex-1">
                    <label for="attachments" class="form-label">{{ __('Attach files') }}</label>
                    <input id="attachments" type="file" name="attachments[]" multiple class="form-input">
                    <p class="form-hint">{{ __('Only the two of you can open these.') }}</p>
                </div>

                <button type="submit" class="btn btn-primary" :disabled="submitting">
                    <span x-show="!submitting">{{ __('Send') }}</span>
                    <span x-show="submitting" x-cloak>{{ __('Sending…') }}</span>
                </button>
            </div>
        </form>
    @endif
@endsection