@extends('layouts.nova')

@section('content')
    <main class="min-h-screen bg-slate-950 px-4 py-8" aria-labelledby="thread-title">
        <div class="mx-auto max-w-5xl space-y-5">
            <x-forum.thread.breadcrumbs :thread="$thread" :category="$category" />

            @if (session('status'))
                <div class="rounded-xl border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-300">
                    {{ session('status') }}
                </div>
            @endif

            <section class="rounded-xl border border-white/5 bg-slate-900/70 p-5 backdrop-blur">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                    <div>
                        <h1 id="thread-title" class="text-2xl font-semibold text-white">{{ $thread->title }}</h1>
                        <div class="mt-2 flex flex-wrap items-center gap-2 text-xs text-zinc-400">
                            <span>By {{ $author->name ?? 'Unknown' }}</span>
                            <span aria-hidden="true">•</span>
                            <time datetime="{{ optional($thread->created_at)?->toIso8601String() }}">{{ optional($thread->created_at)?->format('d.m.Y H:i') }}</time>
                        </div>
                    </div>

                    <div class="flex flex-wrap items-center gap-2 text-xs">
                        <span class="rounded-full bg-sky-500/15 px-2.5 py-1 text-sky-300">{{ number_format((int) ($thread->views ?? 0)) }} views</span>
                        <span class="rounded-full bg-cyan-500/15 px-2.5 py-1 text-cyan-300">{{ number_format((int) ($reply_count ?? 0)) }} replies</span>
                        @if ($thread->is_pinned)
                            <span class="rounded-full bg-amber-500/15 px-2.5 py-1 text-amber-300">Pinned</span>
                        @endif
                        @if ($thread->is_locked)
                            <span class="rounded-full bg-red-500/15 px-2.5 py-1 text-red-300">Locked</span>
                        @endif
                    </div>
                </div>

                @can('moderate-forum')
                    <div class="mt-4 flex flex-wrap items-center gap-2 border-t border-white/10 pt-3 text-xs">
                        @if ($thread->is_locked)
                            <form method="POST" action="{{ route('forum.thread.unlock', ['thread' => $thread->id]) }}">
                                @csrf
                                <button type="submit" class="rounded-md bg-red-500/15 px-2.5 py-1 text-red-300 hover:bg-red-500/25">Unlock thread</button>
                            </form>
                        @else
                            <form method="POST" action="{{ route('forum.thread.lock', ['thread' => $thread->id]) }}">
                                @csrf
                                <button type="submit" class="rounded-md bg-red-500/15 px-2.5 py-1 text-red-300 hover:bg-red-500/25">Lock thread</button>
                            </form>
                        @endif

                        @if ($thread->is_pinned)
                            <form method="POST" action="{{ route('forum.thread.unpin', ['thread' => $thread->id]) }}">
                                @csrf
                                <button type="submit" class="rounded-md bg-amber-500/15 px-2.5 py-1 text-amber-300 hover:bg-amber-500/25">Unpin thread</button>
                            </form>
                        @else
                            <form method="POST" action="{{ route('forum.thread.pin', ['thread' => $thread->id]) }}">
                                @csrf
                                <button type="submit" class="rounded-md bg-amber-500/15 px-2.5 py-1 text-amber-300 hover:bg-amber-500/25">Pin thread</button>
                            </form>
                        @endif
                    </div>
                @endcan
            </section>

            @if (isset($opPost) && $opPost)
                <x-forum.thread.post-card :post="$opPost" :thread="$thread" :is-op="true" />
            @endif

            <section class="space-y-4" aria-label="Replies">
                @forelse ($posts as $post)
                    <x-forum.thread.post-card :post="$post" :thread="$thread" />
                @empty
                    <div class="rounded-xl border border-white/10 bg-slate-900/60 px-4 py-6 text-center text-zinc-400">
                        No replies yet.
                    </div>
                @endforelse
            </section>

            @if (method_exists($posts, 'links'))
                <div class="sticky bottom-3 z-10 rounded-xl border border-white/10 bg-slate-900/80 p-2 backdrop-blur supports-[backdrop-filter]:bg-slate-900/70">
                    {{ $posts->withQueryString()->links() }}
                </div>
            @endif

            @auth
                @if (!$thread->is_locked)
                    <form method="POST" action="{{ route('forum.thread.reply', ['thread' => $thread->id]) }}" class="space-y-3 rounded-xl border border-white/5 bg-slate-900/70 p-4 backdrop-blur">
                        @csrf
                        <div class="flex items-center justify-between">
                            <label for="reply-content" class="text-sm font-medium text-zinc-200">Reply</label>
                            <span class="text-xs text-zinc-500">Minimum 2 characters</span>
                        </div>
                        <div class="rounded-lg border border-white/10 bg-slate-950 p-2">
                            <div class="mb-2 flex items-center gap-2 text-xs">
                                <button type="button" class="rounded bg-slate-800 px-2 py-1 text-zinc-200" aria-pressed="true">Write</button>
                                <span class="rounded bg-slate-900 px-2 py-1 text-zinc-500">Preview (coming soon)</span>
                            </div>
                            <textarea id="reply-content" name="content" rows="6" required minlength="2" maxlength="10000" class="w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-zinc-100 placeholder-zinc-500 focus:border-cyan-400 focus:outline-none focus:ring-1 focus:ring-cyan-400">{{ $reply_prefill ?? old('content') }}</textarea>
                        </div>
                        @error('content')
                            <p class="text-xs text-red-400">{{ $message }}</p>
                        @enderror
                        @if (!empty($quoted_post))
                            <p class="text-xs text-cyan-300">Replying with quote from {{ data_get($quoted_post, 'user.name', 'Anonymous') }}.</p>
                        @endif
                        <div class="flex items-center justify-between">
                            <p class="text-xs text-zinc-500">Markdown/BBCode + attachments will be enabled in next pass</p>
                            <button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-sky-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400">Post reply</button>
                        </div>
                    </form>
                @else
                    <div class="rounded-xl border border-red-500/20 bg-red-500/5 px-4 py-3 text-sm text-red-300">
                        This thread is locked. Replies are disabled.
                    </div>
                @endif
            @else
                <div class="rounded-xl border border-white/10 bg-slate-900/60 px-4 py-4 text-sm text-zinc-300">
                    <a href="{{ route('login') }}" class="text-sky-300 hover:text-sky-200">Sign in</a> to post a reply.
                </div>
            @endauth
        </div>
    </main>
@endsection