{{-- resources/views/general/posts/partials/post-card.blade.php --}}
@php
    $u = $post->user;
    $avatar = $u->avatar_url ?? asset('images/default-male-avatar.png');
    $name   = $u->name ?? $u->username ?? 'عضو';
@endphp

<article
    class="post-card group rounded-2xl border border-slate-200/80 dark:border-slate-800/80
           bg-white/95 dark:bg-slate-900/90 shadow-sm hover:shadow-md transition
           overflow-hidden"
    data-post-id="{{ $post->id }}"
>

    {{-- Header --}}
    <header class="p-4 sm:p-5 flex items-start justify-between gap-3">
        <div class="flex items-start gap-3 min-w-0">
            <img src="{{ $avatar }}"
                 alt="{{ $name }}"
                 class="w-11 h-11 rounded-full object-cover border border-slate-200 dark:border-slate-700 flex-shrink-0"
                 onerror="this.src='{{ asset('images/default-male-avatar.png') }}'">

            <div class="min-w-0">
                <div class="flex items-center gap-2">
                    <div class="font-bold text-slate-900 dark:text-white truncate">
                        {{ $name }}
                    </div>

                    @if(!empty($post->is_pinned))
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold
                                     bg-amber-500/15 text-amber-700 dark:text-amber-200 border border-amber-500/20">
                            <i class="fa-solid fa-thumbtack text-[10px]"></i> مثبت
                        </span>
                    @endif
                </div>

                <div class="mt-0.5 flex items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400">
                    <i class="fa-regular fa-clock"></i>
                    <span>{{ $post->formatted_time }}</span>
                </div>
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex items-center gap-1">
            <button type="button"
                    class="report-btn p-2 rounded-xl text-slate-400 hover:text-slate-700 dark:hover:text-slate-200
                           hover:bg-slate-100 dark:hover:bg-slate-800 transition"
                    data-type="post"
                    data-id="{{ $post->id }}"
                    title="إبلاغ">
                <i class="fa-regular fa-flag"></i>
            </button>

            @if(!empty($post->can_delete))
                <button type="button"
                        class="delete-btn p-2 rounded-xl text-slate-400 hover:text-rose-600
                               hover:bg-rose-50 dark:hover:bg-rose-900/20 transition"
                        data-type="post"
                        data-id="{{ $post->id }}"
                        title="حذف">
                    <i class="fa-regular fa-trash-can"></i>
                </button>
            @endif
        </div>
    </header>

    {{-- Body --}}
    @if(!empty($post->content))
        <div class="px-4 sm:px-5 pb-3">
            <p class="text-[15px] leading-relaxed text-slate-900 dark:text-slate-100 whitespace-pre-wrap">
                {{ $post->content }}
            </p>
        </div>
    @endif

    {{-- Attachments --}}
    @if(!empty($post->attachment_urls) && count($post->attachment_urls))
        @php
            $urls = $post->attachment_urls;
            $count = count($urls);
        @endphp

        <div class="px-4 sm:px-5 pb-3">
            <div class="grid gap-2 {{ $count === 1 ? 'grid-cols-1' : 'grid-cols-2' }}">
                @foreach($urls as $idx => $url)
                    <a href="{{ $url }}"
                       class="block rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-800"
                       data-fb-img="1"
                       data-fb-index="{{ $idx }}"
                       data-fb-images='@json($urls)'>
                        <img src="{{ $url }}"
                             class="w-full {{ $count===1 ? 'h-72' : 'h-44' }} object-cover hover:scale-[1.01] transition"
                             loading="lazy"
                             alt="attachment">
                    </a>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Reaction summary + comment count --}}
    <div class="px-4 sm:px-5 py-3 flex items-center justify-between text-[12px] text-slate-500 dark:text-slate-400">
        <div class="flex items-center gap-2">
            <span class="inline-flex items-center gap-1">
                <span class="w-5 h-5 rounded-full bg-sky-600 text-white grid place-items-center text-[11px]">👍</span>
                <span class="w-5 h-5 rounded-full bg-rose-600 text-white grid place-items-center text-[11px]">❤</span>
            </span>
            <span class="font-semibold text-slate-700 dark:text-slate-200">
                {{ (int)($post->reaction_counts['like'] ?? 0) + (int)($post->reaction_counts['love'] ?? 0) }}
            </span>
        </div>

        <button type="button"
                class="comment-btn text-[12px] hover:underline"
                data-post-id="{{ $post->id }}">
            <span class="comments-count">{{ (int)$post->comments_count }}</span> تعليق
        </button>
    </div>

    {{-- Action bar (Facebook style) --}}
    <div class="px-3 sm:px-5 pb-3">
        <div class="grid grid-cols-3 gap-2 text-[13px] font-semibold">
            {{-- Like with FB reaction bar --}}
            <div class="fb-react-wrap relative">
                <button type="button"
                        class="reaction-btn w-full flex items-center justify-center gap-2 py-2 rounded-xl
                               bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700
                               text-slate-700 dark:text-slate-200 transition"
                        data-post-id="{{ $post->id }}"
                        data-type="{{ $post->user_reaction ?? 'like' }}"
                        data-fb-like="1">
                    <span class="text-[16px]">👍</span>
                    <span id="fbReactLabel-{{ $post->id }}">{{ $post->user_reaction ? 'تفاعلت' : 'أعجبني' }}</span>
                    <span class="reaction-count text-[12px] opacity-80">{{ (int)($post->reaction_counts['like'] ?? 0) }}</span>
                </button>

                {{-- FB reaction palette (hover/press) --}}
                <div class="fb-react-bar absolute z-30 -top-14 left-1/2 -translate-x-1/2 hidden
                            bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700
                            shadow-xl rounded-2xl px-2 py-1.5">
                    @php
                        $rx = [
                            ['k'=>'like','e'=>'👍','t'=>'إعجاب'],
                            ['k'=>'love','e'=>'❤️','t'=>'حب'],
                            ['k'=>'laugh','e'=>'😂','t'=>'ضحك'],
                            ['k'=>'wow','e'=>'😮','t'=>'واو'],
                            ['k'=>'sad','e'=>'😢','t'=>'حزن'],
                            ['k'=>'angry','e'=>'😡','t'=>'غضب'],
                        ];
                    @endphp

                    <div class="flex items-end gap-1.5">
                        @foreach($rx as $r)
                            <button type="button"
                                    class="fb-react-item w-9 h-9 rounded-full hover:scale-110 transition grid place-items-center"
                                    data-post-id="{{ $post->id }}"
                                    data-react-type="{{ $r['k'] }}"
                                    title="{{ $r['t'] }}">
                                <span class="text-[20px]">{{ $r['e'] }}</span>
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Comment --}}
            <button type="button"
                    class="comment-btn w-full flex items-center justify-center gap-2 py-2 rounded-xl
                           bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700
                           text-slate-700 dark:text-slate-200 transition"
                    data-post-id="{{ $post->id }}">
                <i class="fa-regular fa-comment-dots"></i>
                تعليق
            </button>

            {{-- Share placeholder --}}
            <button type="button"
                    class="w-full flex items-center justify-center gap-2 py-2 rounded-xl
                           bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700
                           text-slate-700 dark:text-slate-200 transition"
                    onclick="window.postsSystem?.showAlert?.('قريباً…', 'info')">
                <i class="fa-solid fa-share"></i>
                مشاركة
            </button>
        </div>
    </div>

    {{-- Comments panel --}}
    <section id="comment-panel-{{ $post->id }}" class="hidden border-t border-slate-200 dark:border-slate-800">
        {{-- Write comment --}}
        <div id="comment-form-{{ $post->id }}" class="p-4 sm:p-5 bg-slate-50/70 dark:bg-slate-950/40">
            <div class="flex items-start gap-3">
                <img src="{{ auth()->user()->avatar_url ?? asset('images/default-male-avatar.png') }}"
                     class="w-9 h-9 rounded-full object-cover border border-slate-200 dark:border-slate-700"
                     onerror="this.src='{{ asset('images/default-male-avatar.png') }}'">

                <div class="flex-1">
                    <textarea class="w-full resize-none rounded-2xl bg-white dark:bg-slate-900
                                     border border-slate-200 dark:border-slate-700
                                     px-4 py-3 text-sm text-slate-900 dark:text-slate-100
                                     focus:outline-none focus:ring-2 focus:ring-sky-500"
                              rows="2"
                              placeholder="اكتب تعليقاً…"></textarea>

                    <div class="mt-2 flex items-center justify-between">
                        <div class="text-[11px] text-slate-500 dark:text-slate-400">
                            Ctrl+Enter للإرسال
                        </div>
                        <button type="button"
                                class="submit-comment-btn inline-flex items-center gap-2 px-4 py-2 rounded-xl
                                       bg-sky-600 hover:bg-sky-700 text-white text-sm font-bold transition"
                                data-post-id="{{ $post->id }}">
                            <i class="fa-solid fa-paper-plane text-[12px]"></i>
                            إرسال
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Comments list --}}
        <div id="comments-{{ $post->id }}" class="p-4 sm:p-5 space-y-3">
            @foreach($post->comments as $comment)
                @include('general.posts.partials.comment-card', ['comment'=>$comment])
            @endforeach
        </div>
    </section>
</article>

<style>
/* ✅ Facebook-like reaction palette show/hide */
.fb-react-wrap.show .fb-react-bar{ display:block; }
.fb-react-wrap .fb-react-bar{ display:none; }

/* drop in animation */
.fb-drop{ animation: fbDrop .22s ease-out both; }
@keyframes fbDrop{ from{opacity:.0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

/* bounce */
.fb-react-bounce{ animation: fbB .45s ease-out; }
@keyframes fbB{ 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
</style>