<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $post->title }} - ViZuTrade Community</title>
    <script>
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) document.documentElement.classList.add('dark');
    </script>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
<div x-data="{ darkMode: document.documentElement.classList.contains('dark'), toggleTheme() { this.darkMode = ! this.darkMode; document.documentElement.classList.toggle('dark', this.darkMode); localStorage.theme = this.darkMode ? 'dark' : 'light'; } }">
    <x-public-navbar />
    <main class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
        <a href="{{ route('community.index') }}" class="text-sm font-bold text-blue-700 dark:text-blue-300">Back to Community</a>

        @php($likedByUser = $post->likedBy(auth()->user()))
        <article class="mt-5 rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900" data-community-post="{{ $post->id }}">
            <div class="flex items-center gap-3">
                <a href="{{ route('community.traders.show', $post->user) }}">
                    <x-user-avatar :user="$post->user" class="h-12 w-12" />
                </a>
                <div class="flex flex-wrap items-center gap-2 text-xs font-bold text-slate-500 dark:text-slate-400">
                    <span>{{ $post->category?->name ?? 'General' }}</span>
                    <span>by <a href="{{ route('community.traders.show', $post->user) }}" class="text-blue-700 dark:text-blue-300">{{ $post->user->name }}</a></span>
                    <span>{{ $post->created_at->diffForHumans() }}</span>
                    @if ($post->is_featured)
                        <span class="rounded-full bg-blue-100 px-3 py-1 text-blue-700 dark:bg-blue-900/50 dark:text-blue-200">Featured</span>
                    @endif
                </div>
            </div>

            <h1 class="mt-4 text-4xl font-black text-slate-950 dark:text-white">{{ $post->title }}</h1>
            @if (filled($post->body))
                <div class="mt-5 whitespace-pre-line text-sm leading-7 text-slate-700 dark:text-slate-200">{{ $post->body }}</div>
            @endif

            @include('community.partials.image-grid', ['images' => $post->images])

            <div class="mt-6 flex flex-wrap items-center gap-3">
                @if (auth()->user()?->isTrader())
                    <form
                        method="POST"
                        action="{{ $likedByUser ? route('community.posts.unlike.ajax', $post) : route('community.posts.like.ajax', $post) }}"
                        data-community-like-form
                        data-like-url="{{ route('community.posts.like.ajax', $post) }}"
                        data-unlike-url="{{ route('community.posts.unlike.ajax', $post) }}"
                    >
                        @csrf
                        @if ($likedByUser)
                            @method('DELETE')
                        @endif
                        <button
                            class="rounded-lg px-4 py-2 text-sm font-black transition {{ $likedByUser ? 'bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-200' : 'bg-blue-600 text-white hover:bg-blue-700' }}"
                            data-community-like-button
                        >
                            {{ $likedByUser ? 'Unlike' : 'Like' }}
                        </button>
                    </form>
                    @if (auth()->id() === $post->user_id)
                        <a href="{{ route('community.posts.edit', $post) }}" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-black text-blue-700 dark:border-blue-900 dark:text-blue-300">Edit</a>
                    @endif
                @endif
                <span class="text-sm font-bold text-slate-500 dark:text-slate-400"><span data-community-like-count>{{ $post->likes_count }}</span> likes &bull; <span data-community-comment-count>{{ $post->comments_count }}</span> comments</span>
            </div>
        </article>

        @if (auth()->user()?->isTrader())
            <form method="POST" action="{{ route('community.posts.report', $post) }}" class="mt-5 rounded-lg border border-amber-200 bg-amber-50 p-5 dark:border-amber-900/60 dark:bg-amber-950/30">
                @csrf
                <p class="text-sm font-black text-amber-900 dark:text-amber-100">Report this post</p>
                <div class="mt-3 grid gap-3 md:grid-cols-[12rem_1fr_auto]">
                    <select name="reason" class="rounded-lg border-amber-200 bg-white text-sm dark:border-amber-900 dark:bg-slate-950 dark:text-white">
                        @foreach (['Spam','Abuse','Scam','Wrong category','Unsafe advice','Other'] as $reason)
                            <option>{{ $reason }}</option>
                        @endforeach
                    </select>
                    <input name="details" placeholder="Optional details" class="rounded-lg border-amber-200 bg-white text-sm dark:border-amber-900 dark:bg-slate-950 dark:text-white">
                    <button class="rounded-lg bg-amber-500 px-4 py-2 text-sm font-black text-white">Report</button>
                </div>
            </form>
        @endif

        <section class="mt-8 rounded-lg border border-blue-100 bg-white p-6 dark:border-blue-900/50 dark:bg-slate-900">
            <h2 class="text-2xl font-black text-slate-950 dark:text-white">Comments</h2>
            @if (auth()->user()?->isTrader())
                <form method="POST" action="{{ route('community.comments.store', $post) }}" class="mt-4" data-community-comment-form>
                    @csrf
                    <textarea name="body" rows="3" required placeholder="Add a helpful comment" class="w-full rounded-lg border-blue-100 bg-white text-sm dark:border-blue-900 dark:bg-slate-950 dark:text-white"></textarea>
                    <p class="mt-2 hidden text-sm font-bold text-red-600 dark:text-red-300" data-community-comment-error></p>
                    <button class="mt-3 rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white" data-community-comment-button>Comment</button>
                </form>
            @else
                <p class="mt-3 text-sm text-slate-500 dark:text-slate-400"><a href="{{ route('login') }}" class="font-bold text-blue-700 dark:text-blue-300">Login</a> to comment.</p>
            @endif

            <div class="mt-6 space-y-5" data-community-comments-target>
                @foreach ($post->topLevelComments as $comment)
                    @include('community.partials.comment', ['comment' => $comment, 'post' => $post])
                @endforeach
            </div>
        </section>
    </main>
</div>
</body>
</html>
