<!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>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-7xl px-4 py-10 sm:px-6 lg:px-8">
        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
            <div>
                <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Public Community</p>
                <h1 class="mt-2 text-4xl font-black text-slate-950 dark:text-white">Learn with disciplined traders.</h1>
                <p class="mt-3 max-w-2xl text-slate-600 dark:text-slate-300">Ask questions, share ideas, discuss psychology, and review trades without exposing private account data.</p>
            </div>
            <div class="flex flex-wrap gap-3">
                @if (auth()->user()?->isTrader())
                    <a href="{{ route('community.posts.create') }}" class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-black text-white hover:bg-blue-700">Create Post</a>
                    <a href="{{ route('community.chat') }}" class="rounded-lg border border-blue-100 bg-white px-5 py-3 text-sm font-black text-blue-700 hover:bg-blue-50 dark:border-blue-900 dark:bg-slate-900 dark:text-blue-300">Community Chat</a>
                @elseif (auth()->check())
                    <span class="rounded-lg border border-blue-100 bg-white px-5 py-3 text-sm font-black text-slate-600 dark:border-blue-900 dark:bg-slate-900 dark:text-slate-300">Trader account required</span>
                @else
                    <a href="{{ route('login') }}" class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-black text-white hover:bg-blue-700">Login to Post</a>
                @endif
            </div>
        </div>

        <form method="GET" class="mt-8 grid gap-3 rounded-lg border border-blue-100 bg-white p-4 shadow-sm md:grid-cols-[1fr_auto_auto] dark:border-blue-900/50 dark:bg-slate-900">
            <input name="search" value="{{ request('search') }}" placeholder="Search community posts" class="rounded-lg border-blue-100 bg-white text-sm dark:border-blue-900 dark:bg-slate-950 dark:text-white">
            <select name="category" class="rounded-lg border-blue-100 bg-white text-sm dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                <option value="">All categories</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->slug }}" @selected(request('category') === $category->slug)>{{ $category->name }}</option>
                @endforeach
            </select>
            <button class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-black text-white">Filter</button>
        </form>

        <div class="mt-8 grid gap-6 lg:grid-cols-[1fr_20rem]">
            <div class="space-y-4">
                @forelse ($posts as $post)
                    @php($likedByUser = $post->likedBy(auth()->user()))
                    <article class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl dark:border-blue-900/50 dark:bg-slate-900" data-community-post="{{ $post->id }}">
                        <div class="flex items-start gap-3">
                            <a href="{{ route('community.traders.show', $post->user) }}" class="shrink-0">
                                <x-user-avatar :user="$post->user" class="h-11 w-11" />
                            </a>
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2 text-xs font-bold text-slate-500 dark:text-slate-400">
                                    @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
                                    <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>
                                </div>
                            </div>
                        </div>
                        <h2 class="mt-3 text-2xl font-black text-slate-950 dark:text-white">
                            <a href="{{ route('community.posts.show', $post) }}" class="hover:text-blue-700 dark:hover:text-blue-300">{{ $post->title }}</a>
                        </h2>
                        @if (filled($post->body))
                            <p class="mt-3 line-clamp-3 text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $post->body }}</p>
                        @endif
                        @include('community.partials.image-grid', ['images' => $post->images])
                        <div class="mt-5 flex flex-wrap items-center gap-3 text-sm font-bold text-slate-500 dark:text-slate-400">
                            @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>
                            @endif
                            <span><span data-community-like-count>{{ $post->likes_count }}</span> likes</span>
                            <span><span data-community-comment-count>{{ $post->comments_count }}</span> comments</span>
                            <span>{{ $post->views_count }} views</span>
                        </div>
                    </article>
                @empty
                    <div class="rounded-lg border border-blue-100 bg-white p-8 text-center dark:border-blue-900/50 dark:bg-slate-900">
                        <p class="font-bold text-slate-700 dark:text-slate-200">No community posts found yet.</p>
                    </div>
                @endforelse

                {{ $posts->links() }}
            </div>

            <aside class="space-y-4">
                <div class="rounded-lg border border-blue-100 bg-white p-5 dark:border-blue-900/50 dark:bg-slate-900">
                    <h3 class="font-black text-slate-950 dark:text-white">Categories</h3>
                    <div class="mt-4 flex flex-wrap gap-2">
                        @foreach ($categories as $category)
                            <a href="{{ route('community.index', ['category' => $category->slug]) }}" class="rounded-full bg-blue-50 px-3 py-1 text-xs font-bold text-blue-700 dark:bg-blue-950/60 dark:text-blue-200">{{ $category->name }}</a>
                        @endforeach
                    </div>
                </div>
                @if ($settings->chat_enabled)
                    <div class="rounded-lg border border-blue-100 bg-white p-5 dark:border-blue-900/50 dark:bg-slate-900">
                        <div class="flex items-center justify-between">
                            <h3 class="font-black text-slate-950 dark:text-white">Latest Chat</h3>
                            @if (auth()->user()?->isTrader())
                                <a href="{{ route('community.chat') }}" class="text-xs font-black text-blue-700 dark:text-blue-300">Open</a>
                            @endif
                        </div>
                        <div class="mt-4 space-y-3">
                            @forelse ($latestMessages as $message)
                                <p class="text-sm text-slate-600 dark:text-slate-300"><span class="font-bold text-slate-900 dark:text-white">{{ $message->user->name }}:</span> {{ $message->message }}</p>
                            @empty
                                <p class="text-sm text-slate-500 dark:text-slate-400">No chat messages yet.</p>
                            @endforelse
                        </div>
                    </div>
                @endif
            </aside>
        </div>
    </main>
</div>
</body>
</html>
