@extends('layouts.app')

@section('title', ($topic->title ?? __('Topic')) . ' — ' . config('app.name'))

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 mb-6">
        <a href="{{ route('communication.communities.index') }}" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors">{{ __('Communities') }}</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        @if(isset($topic->channel))
            <a href="{{ route('communication.communities.show', $topic->channel->community_id ?? '#') }}" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors">{{ $topic->channel->name ?? __('Channel') }}</a>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        @endif
        <span class="text-slate-700 dark:text-slate-300 font-medium truncate max-w-xs">{{ $topic->title ?? __('Topic') }}</span>
    </nav>

    {{-- Topic Header --}}
    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 p-6 mb-6">
        <div class="flex items-start justify-between gap-4">
            <div class="flex-1 min-w-0">
                <h1 class="text-xl font-bold text-slate-900 dark:text-slate-100 mb-2">{{ $topic->title ?? __('Topic') }}</h1>
                <div class="flex items-center gap-3 text-sm text-slate-500 dark:text-slate-400">
                    <div class="flex items-center gap-1.5">
                        <div class="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
                            <span class="text-xs font-bold text-primary-600 dark:text-primary-400">{{ substr($topic->author->name ?? 'U', 0, 1) }}</span>
                        </div>
                        <span>{{ $topic->author->name ?? __('Unknown') }}</span>
                    </div>
                    <span>·</span>
                    <span>{{ isset($topic) ? $topic->created_at->diffForHumans() : '' }}</span>
                    @if(isset($topic->replies_count))
                        <span>·</span>
                        <span>{{ $topic->replies_count }} {{ __('replies') }}</span>
                    @endif
                </div>
            </div>
            @if(isset($topic->is_pinned) && $topic->is_pinned)
                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 flex-shrink-0">
                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/></svg>
                    {{ __('Pinned') }}
                </span>
            @endif
        </div>

        @if(isset($topic->body) && $topic->body)
            <div class="mt-4 pt-4 border-t border-slate-100 dark:border-slate-700 prose prose-sm dark:prose-invert max-w-none text-slate-700 dark:text-slate-300">
                {!! nl2br(e($topic->body)) !!}
            </div>
        @endif

        {{-- Reactions --}}
        <div class="mt-4 pt-4 border-t border-slate-100 dark:border-slate-700 flex items-center gap-2">
            @foreach(['👍', '❤️', '😂', '😮', '👏'] as $emoji)
                <form method="POST" action="{{ route('communication.reactions.toggle') }}" class="inline">
                    @csrf
                    <input type="hidden" name="reactable_type" value="topic">
                    <input type="hidden" name="reactable_id" value="{{ $topic->id ?? '' }}">
                    <input type="hidden" name="emoji" value="{{ $emoji }}">
                    <button type="submit" class="px-2.5 py-1 rounded-lg bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-sm transition-colors">
                        {{ $emoji }}
                    </button>
                </form>
            @endforeach
        </div>
    </div>

    {{-- Replies --}}
    <div class="space-y-4 mb-6">
        <h2 class="text-sm font-semibold text-slate-700 dark:text-slate-300 uppercase tracking-wide">
            {{ __('Replies') }} @if(isset($replies)) ({{ $replies->total() }}) @endif
        </h2>

        @if(isset($replies) && $replies->count() > 0)
            @foreach($replies as $reply)
                <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-5">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center flex-shrink-0">
                            <span class="text-sm font-bold text-primary-600 dark:text-primary-400">{{ substr($reply->author->name ?? 'U', 0, 1) }}</span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ $reply->author->name ?? __('Unknown') }}</span>
                                <span class="text-xs text-slate-400">{{ $reply->created_at->diffForHumans() }}</span>
                            </div>
                            <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{ $reply->body }}</p>

                            {{-- Reply reactions --}}
                            <div class="mt-3 flex items-center gap-2">
                                @foreach(['👍', '❤️', '👏'] as $emoji)
                                    <form method="POST" action="{{ route('communication.reactions.toggle') }}" class="inline">
                                        @csrf
                                        <input type="hidden" name="reactable_type" value="reply">
                                        <input type="hidden" name="reactable_id" value="{{ $reply->id }}">
                                        <input type="hidden" name="emoji" value="{{ $emoji }}">
                                        <button type="submit" class="px-2 py-0.5 rounded-lg bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-xs transition-colors">
                                            {{ $emoji }}
                                        </button>
                                    </form>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            @if($replies->hasPages())
                <div class="mt-4">{{ $replies->links() }}</div>
            @endif
        @else
            <div class="text-center py-10 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700">
                <svg class="w-10 h-10 text-slate-300 dark:text-slate-600 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                </svg>
                <p class="text-sm text-slate-500 dark:text-slate-400">{{ __('No replies yet. Be the first to respond!') }}</p>
            </div>
        @endif
    </div>

    {{-- Reply Form --}}
    @auth
        <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 p-6">
            <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-4">{{ __('Post a Reply') }}</h3>
            <form method="POST" action="{{ route('communication.topics.reply', $topic->id ?? 0) }}" class="space-y-4">
                @csrf
                <textarea name="body" rows="4" required
                    class="w-full px-3.5 py-2.5 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-xl text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition resize-none"
                    placeholder="{{ __('Write your reply...') }}"></textarea>
                @error('body') <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                <div class="flex justify-end">
                    <button type="submit" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary-600 hover:bg-primary-700 text-white text-sm font-semibold rounded-xl transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                        {{ __('Post Reply') }}
                    </button>
                </div>
            </form>
        </div>
    @else
        <div class="text-center py-6 bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700">
            <p class="text-sm text-slate-500 dark:text-slate-400">
                <a href="{{ route('login') }}" class="font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400">{{ __('Sign in') }}</a>
                {{ __('to post a reply.') }}
            </p>
        </div>
    @endauth

</div>
@endsection