@php
    $user = auth()->user();

    if ($user->hasRole('super-admin')) $layout = 'layouts.superadmin';
    elseif ($user->hasRole('advisor')) $layout = 'layouts.advisor';
    elseif ($user->hasRole('moderator')) $layout = 'layouts.moderator';
    else $layout = 'layouts.member';

    $from      = $from      ?? request('from','');
    $to        = $to        ?? request('to','');
    $qText     = $qText     ?? request('q','');
    $onlyPinned= $onlyPinned?? request('pinned','0');

    $kpis = $kpis ?? [
        'total'      => (int)($posts->total() ?? 0),
        'pinned'     => 0,
        'with_media' => 0,
        'comments'   => 0,
        'reactions'  => 0,
        'latest'     => '',
    ];
@endphp

@extends($layout)
@section('title','منشوراتي')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-3 sm:px-6 py-6 rtl">
    <div class="max-w-6xl mx-auto space-y-5">

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl border border-fuchsia-500/25
                    bg-gradient-to-br from-slate-950 via-fuchsia-950/35 to-slate-950
                    shadow-xl shadow-fuchsia-500/10 p-5 sm:p-6 text-white">
            <div class="pointer-events-none absolute -top-24 -left-16 w-72 h-72 rounded-full bg-fuchsia-400/12 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-72 h-72 rounded-full bg-indigo-400/10 blur-3xl"></div>

            <div class="flex items-start justify-between gap-3">
                <div class="space-y-1">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/15 text-[11px] font-bold">
                        <i class="fa-solid fa-feather-pointed"></i>
                        <span>منشوراتك فقط • ستايل سوشال</span>
                    </div>
                    <h1 class="text-xl sm:text-2xl font-extrabold">منشوراتي</h1>
                    <p class="text-[12px] sm:text-sm text-white/75">
                        هنا بتشوف منشوراتك مرتبة من الأحدث للأقدم + تفاعل/تعليقات بشكل مختصر.
                    </p>
                </div>

                <div class="text-right">
                    <div class="text-[11px] text-white/60">ضمن الفلاتر</div>
                    <div class="text-2xl font-extrabold">{{ number_format((int)($kpis['total'] ?? 0)) }}</div>
                </div>
            </div>

            {{-- KPIs --}}
            <div class="mt-4 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
                @php
                    $pill = fn($label,$val,$cls,$icon) => "
                        <div class='rounded-2xl border border-white/10 bg-white/5 px-3 py-2'>
                            <div class='text-[10px] text-white/60 flex items-center gap-1'>
                                <i class=\"fa-solid {$icon} opacity-80\"></i>
                                <span>{$label}</span>
                            </div>
                            <div class='text-sm font-extrabold {$cls}'>{$val}</div>
                        </div>
                    ";
                @endphp

                {!! $pill('المثبتة', (int)($kpis['pinned'] ?? 0), 'text-amber-200', 'fa-thumbtack') !!}
                {!! $pill('مع صور', (int)($kpis['with_media'] ?? 0), 'text-sky-200', 'fa-image') !!}
                {!! $pill('التعليقات', (int)($kpis['comments'] ?? 0), 'text-indigo-200', 'fa-comments') !!}
                {!! $pill('التفاعلات', (int)($kpis['reactions'] ?? 0), 'text-fuchsia-200', 'fa-heart') !!}
                {!! $pill('آخر نشاط', ($kpis['latest'] ?? '—'), 'text-emerald-200', 'fa-clock') !!}
                {!! $pill('الإجمالي', (int)($kpis['total'] ?? 0), 'text-white', 'fa-layer-group') !!}
            </div>

            {{-- Filters --}}
            <form method="GET" class="mt-4 grid grid-cols-1 sm:grid-cols-5 gap-2">
                <input name="from" type="date" value="{{ $from }}"
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">

                <input name="to" type="date" value="{{ $to }}"
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">

                <input name="q" value="{{ $qText }}" placeholder="بحث بالمحتوى.."
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">

                <select name="pinned" class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">
                    <option value="0" @selected((string)$onlyPinned==='0')>الكل</option>
                    <option value="1" @selected((string)$onlyPinned==='1')>المثبت فقط</option>
                </select>

                <button class="px-4 py-2 rounded-xl bg-fuchsia-500 hover:bg-fuchsia-600 text-white text-sm font-bold">
                    تطبيق
                </button>
            </form>
        </div>

        {{-- LIST --}}
        @if($posts->count())
            <div class="space-y-4">
                @foreach($posts as $p)
                    @php
                        $isPinned = (bool)($p->is_pinned ?? false);
                        $timeTxt  = $p->formatted_time ?? optional($p->created_at)->format('Y-m-d H:i');
                        $content  = trim((string)($p->content ?? ''));
                        $hasMedia = (bool)($p->has_attachments ?? false);
                        $imgs     = (array)($p->attachment_urls ?? []);
                        $reactionsCount = (int)($p->reactions_count ?? $p->reactions_count ?? 0);
                        $commentsCount  = (int)($p->comments_count ?? $p->comments_count ?? 0);
                    @endphp

                    <div class="relative overflow-hidden rounded-3xl border border-white/10
                                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                                shadow-lg shadow-black/30">
                        <div class="absolute inset-0 bg-white/[0.03] pointer-events-none"></div>

                        <div class="p-4 sm:p-5 text-white">
                            {{-- Header --}}
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0 space-y-1">
                                    <div class="flex items-center gap-2">
                                        @if($isPinned)
                                            <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border
                                                        bg-amber-500/15 border-amber-400/25 text-amber-200 text-[11px] font-bold">
                                                <i class="fa-solid fa-thumbtack"></i>
                                                <span>مثبّت</span>
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border
                                                        bg-white/5 border-white/10 text-white/80 text-[11px] font-bold">
                                                <i class="fa-solid fa-circle-nodes"></i>
                                                <span>منشور</span>
                                            </span>
                                        @endif

                                        @if($hasMedia)
                                            <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border
                                                        bg-sky-500/15 border-sky-400/25 text-sky-200 text-[11px] font-bold">
                                                <i class="fa-solid fa-image"></i>
                                                <span>صور</span>
                                            </span>
                                        @endif
                                    </div>

                                    <div class="text-[12px] sm:text-sm text-white/85">
                                        <span class="text-white/60">نُشر:</span>
                                        <span class="font-extrabold">{{ $timeTxt }}</span>
                                    </div>
                                </div>

                                <div class="text-right text-[11px] text-white/60">
                                    <div>رقم</div>
                                    <div class="text-white font-extrabold">#{{ $p->id }}</div>
                                </div>
                            </div>

                            {{-- Content --}}
                            @if($content !== '')
                                <div class="mt-3 rounded-2xl border border-white/10 bg-white/5 p-4">
                                    <div class="text-[13px] sm:text-sm text-white/90 leading-relaxed whitespace-pre-line">
                                        {{ $content }}
                                    </div>
                                </div>
                            @endif

                            {{-- Media --}}
                            @if(!empty($imgs))
                                <div class="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-2">
                                    @foreach($imgs as $img)
                                        <a href="{{ $img }}" target="_blank"
                                           class="group relative overflow-hidden rounded-2xl border border-white/10 bg-black/20">
                                            <img src="{{ $img }}"
                                                 class="w-full h-32 sm:h-36 object-cover opacity-95 group-hover:opacity-100 transition">
                                            <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition"></div>
                                            <div class="absolute bottom-2 left-2 text-[10px] px-2 py-1 rounded-full bg-white/10 border border-white/15 opacity-0 group-hover:opacity-100 transition">
                                                فتح
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            @endif

                            {{-- Social bar --}}
                            <div class="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2">
                                <div class="rounded-2xl border border-white/10 bg-white/5 p-3 text-center">
                                    <div class="text-[10px] text-white/60">تفاعلات</div>
                                    <div class="text-lg font-extrabold text-fuchsia-200">
                                        {{ number_format($reactionsCount) }}
                                    </div>
                                </div>

                                <div class="rounded-2xl border border-white/10 bg-white/5 p-3 text-center">
                                    <div class="text-[10px] text-white/60">تعليقات</div>
                                    <div class="text-lg font-extrabold text-indigo-200">
                                        {{ number_format($commentsCount) }}
                                    </div>
                                </div>

                                <div class="rounded-2xl border border-white/10 bg-white/5 p-3 text-center">
                                    <div class="text-[10px] text-white/60">الحالة</div>
                                    <div class="text-sm font-extrabold text-emerald-200">
                                        نشط
                                    </div>
                                </div>

                                <div class="rounded-2xl border border-white/10 bg-white/5 p-3 text-center">
                                    <div class="text-[10px] text-white/60">إجراءات</div>
                                    <div class="flex items-center justify-center gap-2 mt-1">
                                        {{-- رابط يفتح صفحة المنشورات ويركز على المنشور --}}
                                        <a href="{{ route('posts.index') }}#post-{{ $p->id }}"
                                           class="inline-flex items-center justify-center w-9 h-9 rounded-xl
                                                  bg-white/5 border border-white/10 hover:bg-white/10 transition"
                                           title="عرض في صفحة المنشورات">
                                            <i class="fa-solid fa-eye text-[12px]"></i>
                                        </a>

                                        {{-- placeholders (جاهزين للمستقبل) --}}
                                        <button type="button"
                                                class="inline-flex items-center justify-center w-9 h-9 rounded-xl
                                                       bg-white/5 border border-white/10 opacity-50 cursor-not-allowed"
                                                title="تعديل (قريباً)">
                                            <i class="fa-solid fa-pen text-[12px]"></i>
                                        </button>
                                        <button type="button"
                                                class="inline-flex items-center justify-center w-9 h-9 rounded-xl
                                                       bg-white/5 border border-white/10 opacity-50 cursor-not-allowed"
                                                title="حذف (قريباً)">
                                            <i class="fa-solid fa-trash text-[12px]"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {{-- Mini comments preview (اختياري لو بترجع comments بالكنترول) --}}
                            @if(isset($p->comments) && $p->comments->count())
                                <div class="mt-3 rounded-2xl border border-white/10 bg-white/5 p-4">
                                    <div class="text-xs font-extrabold text-white/90 mb-2 inline-flex items-center gap-2">
                                        <i class="fa-solid fa-comments text-indigo-200"></i>
                                        آخر تعليقات
                                    </div>

                                    <div class="space-y-2">
                                        @foreach($p->comments as $c)
                                            <div class="rounded-xl border border-white/10 bg-black/10 p-3">
                                                <div class="text-[11px] text-white/60">
                                                    <span class="font-bold text-white/85">{{ $c->user?->name ?? 'عضو' }}</span>
                                                    <span class="mx-1 text-white/25">•</span>
                                                    <span>{{ $c->formatted_time ?? optional($c->created_at)->diffForHumans() }}</span>
                                                </div>
                                                <div class="text-[12px] text-white/80 mt-1 whitespace-pre-line">{{ $c->content }}</div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="mt-2 text-[11px] text-white/55">
                                        التعليقات الكاملة من صفحة المنشورات العامة.
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="pt-2">
                {{ $posts->withQueryString()->links() }}
            </div>
        @else
            <div class="rounded-3xl border border-white/10 bg-white/5 p-10 text-center text-white/70">
                لا يوجد منشورات ضمن هذه الفلاتر.
            </div>
        @endif

    </div>
</div>
@endsection