@extends('layouts.app')

@section('title', $document->number)
@section('page-title', 'Documento '.$document->number)

@section('content')
    @include('partials.flash')

    @if (session('document_url'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 break-all">
            Link: <a class="font-semibold underline" href="{{ session('document_url') }}" target="_blank">{{ session('document_url') }}</a>
        </div>
    @endif

    <div class="mb-6 flex flex-col gap-3 lg:flex-row lg:justify-between">
        <div>
            <h1 class="text-2xl font-semibold">{{ $document->title }}</h1>
            <p class="text-sm text-slate-500">
                {{ $document->document_type->label() }} · {{ $document->status->label() }} · {{ $document->view_count }} aberturas · v{{ $document->currentVersion?->version }}
            </p>
        </div>
        <div class="flex flex-wrap gap-2">
            <form method="post" action="{{ route('documents.share', $document) }}">@csrf<button class="rounded-lg bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white">Enviar WhatsApp</button></form>
            <a href="{{ route('signatures.create', ['document_id' => $document->id]) }}" class="rounded-lg border border-emerald-600 px-3 py-1.5 text-sm font-semibold text-emerald-700">Enviar para assinatura</a>
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-4 lg:col-span-2">
            <section class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm prose prose-sm max-w-none">
                {!! $document->currentVersion?->html_body !!}
            </section>

            <section class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <h2 class="text-sm font-semibold">Nova versão</h2>
                <form method="post" action="{{ route('documents.version', $document) }}" class="mt-3 grid gap-3 sm:grid-cols-2">
                    @csrf
                    <input type="number" step="0.01" name="amount" value="{{ $document->amount }}" placeholder="Valor" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    <input type="text" name="intro_message" value="{{ $document->intro_message }}" placeholder="Mensagem introdutória" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    <input type="text" name="change_summary" placeholder="Resumo da alteração" class="sm:col-span-2 rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    <button class="sm:col-span-2 rounded-lg border border-emerald-600 px-3 py-2 text-sm font-semibold text-emerald-700">Criar revisão</button>
                </form>
            </section>

            <section class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <h2 class="text-sm font-semibold">Comentário</h2>
                <form method="post" action="{{ route('documents.comment', $document) }}" class="mt-3 space-y-2">
                    @csrf
                    <textarea name="body" rows="2" required class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"></textarea>
                    <button class="rounded-lg bg-slate-800 px-3 py-1.5 text-sm text-white">Registrar</button>
                </form>
            </section>

            @if ($document->comments->isNotEmpty())
                <section class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                    <h2 class="text-sm font-semibold">Comentários</h2>
                    <ul class="mt-2 space-y-3">
                        @foreach ($document->comments as $comment)
                            <li class="rounded-lg bg-slate-50 px-3 py-2 text-sm">
                                <p>{{ $comment->body }}</p>
                                <p class="mt-1 text-xs text-slate-400">{{ $comment->author_name ?? $comment->author_type }} · {{ $comment->created_at?->format('d/m H:i') }}</p>
                            </li>
                        @endforeach
                    </ul>
                </section>
            @endif
        </div>

        <aside class="space-y-4">
            <section class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <h2 class="text-sm font-semibold">Versões</h2>
                <ul class="mt-2 space-y-1 text-sm">
                    @foreach ($document->versions as $v)
                        <li>v{{ $v->version }} — {{ $v->change_summary }} <span class="text-xs text-slate-400">{{ $v->created_at?->format('d/m H:i') }}</span></li>
                    @endforeach
                </ul>
            </section>
            <section class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <h2 class="text-sm font-semibold">Timeline</h2>
                <ol class="mt-2 space-y-2">
                    @foreach ($document->histories as $h)
                        <li class="border-l-2 border-emerald-200 pl-3 text-sm">
                            <p>{{ $h->message }}</p>
                            <p class="text-xs text-slate-400">{{ $h->created_at?->format('d/m H:i') }}</p>
                        </li>
                    @endforeach
                </ol>
            </section>
        </aside>
    </div>
@endsection
