{{-- resources/views/general/posts/index.blade.php --}}
@extends($layout)

@section('title', 'نظام المنشورات')

@push('styles')
<style>
    /* Facebook-ish micro animations */
    .fb-pop { animation: fbPop .18s ease-out; }
    @keyframes fbPop { from{transform:scale(.98);opacity:.0} to{transform:scale(1);opacity:1} }

    .fb-drop { animation: fbDrop .35s cubic-bezier(.2,.9,.2,1); }
    @keyframes fbDrop { from{transform:translateY(-10px);opacity:0} to{transform:translateY(0);opacity:1} }

    .fb-soft { transition: all .18s ease; }
    .fb-soft:hover { transform: translateY(-1px); }

    .fb-reaction { transition: transform .12s ease; }
    .fb-reaction:active { transform: scale(.92); }

    /* Mobile: make media grid nicer */
    .attachment-grid { display:grid; gap:.5rem; }
    .attachment-grid.grid-1 { grid-template-columns: 1fr; }
    .attachment-grid.grid-2 { grid-template-columns: 1fr 1fr; }
    .attachment-grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .attachment-grid.grid-4 { grid-template-columns: 1fr 1fr; }
    @media (max-width: 640px){ .attachment-grid { grid-template-columns: 1fr 1fr; } }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-slate-50 dark:bg-slate-950">
    {{-- Top subtle FB header --}}
    <div class="sticky top-0 z-30 border-b border-slate-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-950/70 backdrop-blur-xl">
        <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-3">
            <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                    <h1 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white flex items-center gap-2">
                        <span class="inline-flex h-8 w-8 rounded-xl bg-sky-500/10 text-sky-600 dark:text-sky-300 items-center justify-center">
                            <i class="fa-solid fa-newspaper text-sm"></i>
                        </span>
                        <span class="truncate">المنشورات</span>
                    </h1>
                    <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                        ستايل خفيف مثل فيسبوك — مناسب للموبايل 100%
                    </p>
                </div>

                <div class="flex items-center gap-2">
                    <button id="searchToggle" type="button"
                            class="h-10 w-10 rounded-xl border border-slate-200 dark:border-slate-800
                                   bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300
                                   hover:bg-slate-50 dark:hover:bg-slate-800 fb-soft">
                        <i class="fa-solid fa-magnifying-glass text-sm"></i>
                    </button>

                    <button id="refreshPosts" type="button"
                            class="h-10 w-10 rounded-xl border border-slate-200 dark:border-slate-800
                                   bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300
                                   hover:bg-slate-50 dark:hover:bg-slate-800 fb-soft">
                        <i class="fa-solid fa-rotate text-sm"></i>
                    </button>
                </div>
            </div>

            {{-- Search Box --}}
            <div id="searchBox" class="hidden mt-3">
                <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3">
                    <div class="flex items-center gap-2">
                        <div class="relative flex-1">
                            <input type="text" id="searchInput"
                                   placeholder="ابحث في المنشورات..."
                                   class="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950
                                          px-4 py-2 text-sm text-slate-900 dark:text-white
                                          focus:outline-none focus:ring-2 focus:ring-sky-500">
                            <span class="absolute left-3 top-2.5 text-slate-400 text-sm">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </span>
                        </div>
                        <button id="clearSearch" type="button"
                                class="px-3 py-2 rounded-xl text-sm font-semibold text-slate-600 dark:text-slate-300
                                       hover:bg-slate-100 dark:hover:bg-slate-800">
                            إلغاء
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Layout like FB: center feed, optional side cards --}}
    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-4">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">

            {{-- Left/Right side suggestions (hidden on mobile) --}}
            <aside class="hidden lg:block lg:col-span-4 space-y-4">
                <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 fb-pop">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="inline-flex h-8 w-8 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-300 items-center justify-center">
                            <i class="fa-solid fa-shield-halved text-sm"></i>
                        </span>
                        <div>
                            <div class="text-sm font-bold text-slate-900 dark:text-white">نصائح النشر</div>
                            <div class="text-[11px] text-slate-500 dark:text-slate-400">خليها محترمة، واضحة، ومفيدة.</div>
                        </div>
                    </div>
                    <ul class="text-[12px] text-slate-700 dark:text-slate-200 space-y-1 list-disc pr-5">
                        <li>عنوان ذكي + فكرة واضحة.</li>
                        <li>صور قليلة بس قوية.</li>
                        <li>ردّ على التعليقات بسرعة.</li>
                    </ul>
                </div>

                <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 fb-pop">
                    <div class="flex items-center gap-2">
                        <span class="inline-flex h-8 w-8 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-300 items-center justify-center">
                            <i class="fa-solid fa-wand-magic-sparkles text-sm"></i>
                        </span>
                        <div>
                            <div class="text-sm font-bold text-slate-900 dark:text-white">معلومة</div>
                            <div class="text-[11px] text-slate-500 dark:text-slate-400">الواجهة مصممة للموبايل أولاً.</div>
                        </div>
                    </div>
                </div>
            </aside>

            {{-- Feed --}}
            <main class="lg:col-span-8 space-y-4">

                {{-- Create Post (FB composer) --}}
                @if($postPermission->canCreatePost())
                    <section class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm fb-drop">
                        <div class="p-4 sm:p-5">
                            <div class="flex items-start gap-3">
                                <img src="{{ auth()->user()->avatar_url }}"
                                     alt="{{ auth()->user()->name }}"
                                     class="w-11 h-11 rounded-full object-cover border border-slate-200 dark:border-slate-700">

                                <form id="createPostForm" enctype="multipart/form-data" class="flex-1 space-y-3">
                                    @csrf

                                    <div class="rounded-2xl bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-3">
                                        <textarea id="postContent" name="content" rows="3"
                                                  placeholder="شو في بالك؟ 💭"
                                                  class="w-full bg-transparent text-sm text-slate-900 dark:text-white
                                                         placeholder:text-slate-400 dark:placeholder:text-slate-500
                                                         focus:outline-none resize-none"></textarea>
                                    </div>

                                    {{-- Attachments Preview --}}
                                    <div id="attachmentPreview" class="hidden"></div>

                                    <div class="flex items-center justify-between gap-2 pt-1">
                                        <div class="flex items-center gap-2">
                                            <input type="file" id="fileInput" name="attachments[]" multiple
                                                   accept="image/jpeg,image/png,image/jpg,image/gif,image/webp" class="hidden">

                                            <button type="button" id="attachmentBtn"
                                                    class="inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-semibold
                                                           bg-slate-100 hover:bg-slate-200 text-slate-700
                                                           dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 fb-soft">
                                                <i class="fa-regular fa-image"></i>
                                                صور
                                            </button>

                                            <span class="text-[11px] text-slate-400 hidden sm:inline">
                                                (حتى 5 صور)
                                            </span>
                                        </div>

                                        <button type="submit" id="submitPost"
                                                class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold
                                                       bg-sky-600 hover:bg-sky-700 text-white shadow-sm fb-soft disabled:opacity-50 disabled:cursor-not-allowed">
                                            <span class="submit-text">نشر</span>
                                            <i class="fa-solid fa-paper-plane submit-icon text-xs"></i>
                                            <i class="fa-solid fa-spinner submit-spinner hidden animate-spin text-xs"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                @else
                    <div class="rounded-2xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-4 text-sm text-amber-800 dark:text-amber-200">
                        @if($postPermission->is_banned)
                            تم حظرك من النشر. السبب: {{ $postPermission->ban_reason ?? 'غير محدد' }}
                        @else
                            ليس لديك صلاحية للنشر حالياً.
                        @endif
                    </div>
                @endif

                {{-- Posts feed --}}
                <div id="postsFeed" class="space-y-4">
                    @forelse($posts as $post)
                        @include('general.posts.partials.post-card', ['post' => $post])
                    @empty
                        <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-8 text-center fb-pop">
                            <div class="mx-auto h-14 w-14 rounded-2xl bg-slate-100 dark:bg-slate-800 grid place-items-center text-slate-400 mb-3">
                                <i class="fa-regular fa-file-lines text-2xl"></i>
                            </div>
                            <h3 class="text-lg font-extrabold text-slate-900 dark:text-white mb-1">لا توجد منشورات بعد</h3>
                            <p class="text-sm text-slate-500 dark:text-slate-400">كن أول من ينشر شيئاً! 🚀</p>
                        </div>
                    @endforelse
                </div>

                {{-- Load more --}}
                @if($posts->hasMorePages())
                    <div class="text-center pt-2">
                        <button id="loadMoreBtn" type="button"
                                data-page="{{ $posts->currentPage() + 1 }}"
                                class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl
                                       bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800
                                       text-slate-700 dark:text-slate-200 font-semibold fb-soft">
                            <i class="fa-solid fa-spinner animate-spin hidden" id="loadMoreSpinner"></i>
                            <span>تحميل المزيد</span>
                        </button>
                    </div>
                @endif
            </main>
        </div>
    </div>

    {{-- Report Modal (كما هو عندك) --}}
    <div id="reportModal" class="fixed inset-0 bg-black/50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white dark:bg-slate-900 rounded-2xl max-w-md w-full mx-4 shadow-2xl border border-slate-200 dark:border-slate-800">
            <div class="p-5">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-extrabold text-slate-900 dark:text-white">إبلاغ عن المحتوى</h3>
                    <button type="button" onclick="window.postsSystem.closeReportModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200">
                        <i class="fa-solid fa-xmark text-lg"></i>
                    </button>
                </div>

                <form id="reportForm">
                    @csrf
                    <input type="hidden" id="reportableType" name="reportable_type">
                    <input type="hidden" id="reportableId" name="reportable_id">

                    <div class="mb-3">
                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1">سبب الإبلاغ</label>
                        <select name="reason" id="reportReason"
                                class="w-full px-3 py-2 border border-slate-200 dark:border-slate-800 rounded-xl
                                       focus:outline-none focus:ring-2 focus:ring-sky-500 dark:bg-slate-950 dark:text-white" required>
                            <option value="">اختر السبب</option>
                            <option value="spam">محتوى مزعج</option>
                            <option value="harassment">تحرش أو إساءة</option>
                            <option value="inappropriate">محتوى غير لائق</option>
                            <option value="fake_news">أخبار كاذبة</option>
                            <option value="other">أخرى</option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1">تفاصيل إضافية</label>
                        <textarea name="details" id="reportDetails" rows="3"
                                  class="w-full px-3 py-2 border border-slate-200 dark:border-slate-800 rounded-xl
                                         focus:outline-none focus:ring-2 focus:ring-sky-500 dark:bg-slate-950 dark:text-white"
                                  placeholder="أضف تفاصيل..."></textarea>
                    </div>

                    <div class="flex justify-end gap-2">
                        <button type="button" onclick="window.postsSystem.closeReportModal()"
                                class="px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 font-semibold">
                            إلغاء
                        </button>
                        <button type="submit"
                                class="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-white font-bold">
                            إرسال البلاغ
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<script>
(() => {
  class PostsSystem {
    constructor() {
      this.csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
      this.searchTimeout = null;
      this.isLoading = false;

      // ✅ Routes from your routes/posts.php
      this.routes = {
        store:        @json(route('posts.store')),
        reactPost:    @json(route('posts.react', ['post' => '__ID__'])),
        submitComment:@json(route('posts.submit-comment')),
        submitReply:  @json(route('posts.submit-reply')),
        deleteItem:   @json(route('posts.delete-item')),
        report:       @json(route('posts.report')),
        loadMore:     @json(route('posts.load-more')),
        search:       @json(route('posts.search')),
      };

      // FB Reaction palette types (match your controller accepted values)
      // عدّل الأسماء إذا عندك غير: like/love/laugh/wow/sad/angry
      this.reactions = [
        { k: 'like',  e: '👍', t: 'إعجاب' },
        { k: 'love',  e: '❤️', t: 'حب' },
        { k: 'laugh', e: '😂', t: 'ضحك' },
        { k: 'wow',   e: '😮', t: 'واو' },
        { k: 'sad',   e: '😢', t: 'حزن' },
        { k: 'angry', e: '😡', t: 'غضب' },
      ];

      // image modal state
      this.imgModal = null;
      this.imgList = [];
      this.imgIndex = 0;

      this.bind();
      this.initImageModal();
      this.bindImageOpeners();
    }

    // ----------------- Utils -----------------
    q(sel, root=document){ return root.querySelector(sel); }
    qa(sel, root=document){ return Array.from(root.querySelectorAll(sel)); }
    esc(s){ return (s ?? '').toString()
      .replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')
      .replaceAll('"','&quot;').replaceAll("'","&#039;");
    }
    urlReplace(tpl, id){ return tpl.replace('__ID__', String(id)); }

    async fetchJSON(url, opts={}) {
      const res = await fetch(url, {
        ...opts,
        headers: {
          'Accept': 'application/json',
          ...(opts.headers || {}),
        }
      });
      const data = await res.json().catch(()=> ({}));
      return { res, data };
    }

    toast(msg, type='info'){
      // بسيط وهادئ (لا تخرب UI)
      const t = document.createElement('div');
      t.className =
        'fixed top-4 right-4 z-[9999] max-w-sm px-4 py-3 rounded-2xl shadow-xl text-sm font-semibold ' +
        (type==='success' ? 'bg-emerald-600 text-white' :
         type==='error'   ? 'bg-rose-600 text-white' :
         type==='warning' ? 'bg-amber-500 text-white' :
                            'bg-slate-900 text-white');
      t.textContent = msg;
      document.body.appendChild(t);
      setTimeout(()=> t.remove(), 2400);
    }

    // ----------------- Bind main events -----------------
    bind(){
      // Create post
      const createForm = this.q('#createPostForm');
      if (createForm) {
        createForm.addEventListener('submit', (e)=>{ e.preventDefault(); this.createPost(); });
      }

      // Attachment
      const attachmentBtn = this.q('#attachmentBtn');
      const fileInput = this.q('#fileInput');
      if (attachmentBtn && fileInput) {
        attachmentBtn.addEventListener('click', ()=> fileInput.click());
        fileInput.addEventListener('change', ()=> this.previewFiles(fileInput.files));
      }

      // Search
      const searchToggle = this.q('#searchToggle');
      const searchBox = this.q('#searchBox');
      const searchInput = this.q('#searchInput');
      const clearSearch = this.q('#clearSearch');
      if (searchToggle && searchBox) {
        searchToggle.addEventListener('click', ()=>{
          searchBox.classList.toggle('hidden');
          if (!searchBox.classList.contains('hidden')) searchInput?.focus();
        });
      }
      if (clearSearch && searchInput) {
        clearSearch.addEventListener('click', ()=>{
          searchInput.value = '';
          searchBox?.classList.add('hidden');
          window.location.reload();
        });
      }
      if (searchInput) {
        searchInput.addEventListener('input', (e)=>{
          clearTimeout(this.searchTimeout);
          const q = (e.target.value || '').trim();
          this.searchTimeout = setTimeout(()=> this.search(q), 450);
        });
      }

      // Load more
      const loadMoreBtn = this.q('#loadMoreBtn');
      if (loadMoreBtn) {
        loadMoreBtn.addEventListener('click', ()=> this.loadMore());
      }

      // Refresh
      const refreshBtn = this.q('#refreshPosts');
      if (refreshBtn) refreshBtn.addEventListener('click', ()=> window.location.reload());

      // Global click delegations
      document.addEventListener('click', (e)=> this.handleClick(e));
      document.addEventListener('keydown', (e)=> {
        if (e.key === 'Escape') {
          this.hideAllReactBars();
          this.closeImageModal();
          this.closeReportModal();
        }
      });

      // Long-press on mobile for reaction button
      this.bindLongPress();
    }

    handleClick(e){
      // Toggle comments panel
      const cbtn = e.target.closest('.comment-btn');
      if (cbtn) {
        const pid = cbtn.dataset.postId;
        if (pid) this.toggleComments(pid);
        return;
      }

      // Submit comment
      const sc = e.target.closest('.submit-comment-btn');
      if (sc) {
        const pid = sc.dataset.postId;
        if (pid) this.submitComment(pid);
        return;
      }

      // Toggle reply form
      const rb = e.target.closest('.reply-btn');
      if (rb) {
        const cid = rb.dataset.commentId;
        if (cid) this.toggleReply(cid);
        return;
      }

      // Submit reply
      const sr = e.target.closest('.submit-reply-btn');
      if (sr) {
        const cid = sr.dataset.commentId;
        if (cid) this.submitReply(cid);
        return;
      }

      // Delete item (post/comment/reply)
      const del = e.target.closest('.delete-btn');
      if (del) {
        e.preventDefault();
        const type = del.dataset.type;
        const id = del.dataset.id;
        if (type && id) this.deleteItem(type, id);
        return;
      }

      // Report
      const rep = e.target.closest('.report-btn');
      if (rep) {
        const type = rep.dataset.type;
        const id = rep.dataset.id;
        if (type && id) this.openReportModal(type, id);
        return;
      }

      // Reaction palette item click
      const rxItem = e.target.closest('.fb-react-item');
      if (rxItem) {
        const pid = rxItem.dataset.postId;
        const rtype = rxItem.dataset.reactType;
        if (pid && rtype) this.react('post', pid, rtype);
        return;
      }

      // click outside palette closes it
      if (!e.target.closest('.fb-react-wrap')) {
        this.hideAllReactBars();
      }
    }

    // ----------------- Post create -----------------
    async createPost(){
      if (this.isLoading) return;
      const form = this.q('#createPostForm');
      if (!form) return;

      const fd = new FormData(form);
      const content = (this.q('#postContent')?.value || '').trim();
      const files = this.q('#fileInput')?.files || [];

      if (!content && (!files || files.length === 0)) {
        this.toast('يرجى إضافة نص أو صورة', 'warning');
        return;
      }

      this.isLoading = true;
      this.setSubmitLoading(true);

      const {res, data} = await this.fetchJSON(this.routes.store, {
        method: 'POST',
        body: fd,
        headers: { 'X-CSRF-TOKEN': this.csrf }
      });

      this.setSubmitLoading(false);
      this.isLoading = false;

      if (!res.ok || !data.success) {
        this.toast(data.message || 'فشل نشر المنشور', 'error');
        return;
      }

      this.toast('تم نشر المنشور ✅', 'success');
      setTimeout(()=> window.location.reload(), 700);
    }

    setSubmitLoading(on){
      const btn = this.q('#submitPost');
      if (!btn) return;
      btn.disabled = !!on;

      btn.querySelector('.submit-text')?.classList.toggle('hidden', !!on);
      btn.querySelector('.submit-icon')?.classList.toggle('hidden', !!on);
      btn.querySelector('.submit-spinner')?.classList.toggle('hidden', !on);
    }

    previewFiles(files){
      const box = this.q('#attachmentPreview');
      if (!box) return;
      box.innerHTML = '';

      if (!files || files.length === 0) {
        box.classList.add('hidden');
        return;
      }
      box.classList.remove('hidden');

      const max = 5;
      const list = Array.from(files).slice(0, max);

      const grid = document.createElement('div');
      grid.className = 'grid grid-cols-2 sm:grid-cols-3 gap-2';

      list.forEach((f) => {
        const wrap = document.createElement('div');
        wrap.className = 'rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-700 bg-slate-100';

        const img = document.createElement('img');
        img.className = 'w-full h-28 object-cover';
        img.src = URL.createObjectURL(f);
        img.onload = ()=> URL.revokeObjectURL(img.src);

        wrap.appendChild(img);
        grid.appendChild(wrap);
      });

      box.appendChild(grid);
    }

    // ----------------- Search / load more -----------------
    async search(q){
      if (q.length < 2) return; // لا تزعج السيرفر
      const url = this.routes.search + '?q=' + encodeURIComponent(q);
      const {res, data} = await this.fetchJSON(url);
      if (!res.ok || !data.success) return;

      // ملاحظة: أنت عندك data.posts غالباً HTML أو array
      // إذا كانت array: لازم Controller يرجع html جاهز
      // حالياً بنعمل Reload بسيط على نفس صفحة البحث لو بدك
      // (أفضل: controller يرجع HTML جاهز للـ feed)
      this.toast('تم تطبيق البحث…', 'info');
      // إن كان عندك endpoint يرجّع HTML: عدّل هون
      // window.location.href = this.routes.index + '?q=' + encodeURIComponent(q);
    }

    async loadMore(){
      const btn = this.q('#loadMoreBtn');
      if (!btn || this.isLoading) return;

      const page = parseInt(btn.dataset.page || '2', 10);
      this.isLoading = true;

      this.q('#loadMoreSpinner')?.classList.remove('hidden');
      btn.disabled = true;

      const url = this.routes.loadMore + '?page=' + page;
      const {res, data} = await this.fetchJSON(url);

      this.q('#loadMoreSpinner')?.classList.add('hidden');
      btn.disabled = false;
      this.isLoading = false;

      if (!res.ok || !data.success) {
        this.toast('تعذر تحميل المزيد', 'error');
        return;
      }

      // إذا data.html موجود
      if (data.html) {
        this.q('#postsFeed')?.insertAdjacentHTML('beforeend', data.html);
        this.bindImageOpeners(); // للصور الجديدة
      }

      if (data.has_more) {
        btn.dataset.page = String(page + 1);
      } else {
        btn.classList.add('hidden');
      }
    }

    // ----------------- Comments / Replies -----------------
    toggleComments(postId){
      const panel = this.q(`#comment-panel-${postId}`);
      if (!panel) return;
      panel.classList.toggle('hidden');

      // drop animation
      if (!panel.classList.contains('hidden')) {
        panel.classList.add('fb-drop');
        setTimeout(()=> panel.classList.remove('fb-drop'), 250);
      }
    }

    toggleReply(commentId){
      const f = this.q(`#reply-form-${commentId}`);
      if (!f) return;
      f.classList.toggle('hidden');
      if (!f.classList.contains('hidden')) {
        f.classList.add('fb-drop');
        setTimeout(()=> f.classList.remove('fb-drop'), 250);
        f.querySelector('textarea')?.focus();
      }
    }

    async submitComment(postId){
      const box = this.q(`#comment-form-${postId} textarea`);
      if (!box) return;

      const content = (box.value || '').trim();
      if (!content) return this.toast('اكتب تعليق أولاً', 'warning');

      const {res, data} = await this.fetchJSON(this.routes.submitComment, {
        method:'POST',
        headers:{
          'Content-Type':'application/json',
          'X-CSRF-TOKEN': this.csrf
        },
        body: JSON.stringify({ post_id: Number(postId), content })
      });

      if (!res.ok || !data.success) {
        this.toast(data.message || 'فشل إضافة التعليق', 'error');
        return;
      }

      box.value = '';
      this.toast('تم إضافة التعليق ✅', 'success');

      // append new comment HTML if controller returns it
      if (data.html) {
        this.q(`#comments-${postId}`)?.insertAdjacentHTML('beforeend', data.html);
      } else if (data.comment) {
        // fallback minimal
        this.q(`#comments-${postId}`)?.insertAdjacentHTML('beforeend', `
          <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4">
            <div class="text-sm font-bold text-slate-900 dark:text-white">${this.esc(data.comment.user?.name || 'عضو')}</div>
            <div class="text-[12px] text-slate-700 dark:text-slate-200 mt-2">${this.esc(data.comment.content || content)}</div>
          </div>
        `);
      }

      // update count
      const cnt = this.q(`[data-post-id="${postId}"] .comments-count`);
      if (cnt) cnt.textContent = String((parseInt(cnt.textContent||'0',10) || 0) + 1);
    }

    async submitReply(commentId){
      const wrap = this.q(`#reply-form-${commentId}`);
      const box = wrap?.querySelector('textarea');
      if (!box) return;

      const content = (box.value || '').trim();
      if (!content) return this.toast('اكتب رد أولاً', 'warning');

      const {res, data} = await this.fetchJSON(this.routes.submitReply, {
        method:'POST',
        headers:{
          'Content-Type':'application/json',
          'X-CSRF-TOKEN': this.csrf
        },
        body: JSON.stringify({ comment_id: Number(commentId), content })
      });

      if (!res.ok || !data.success) {
        this.toast(data.message || 'فشل إضافة الرد', 'error');
        return;
      }

      box.value = '';
      this.toast('تم إضافة الرد ✅', 'success');
      wrap.classList.add('hidden');

      // append reply HTML if provided
      if (data.html) {
        this.q(`#replies-${commentId}`)?.insertAdjacentHTML('beforeend', data.html);
      } else if (data.reply) {
        this.q(`#replies-${commentId}`)?.insertAdjacentHTML('beforeend', `
          <div class="reply-item flex items-start gap-2 mr-10">
            <div class="flex-1 rounded-2xl bg-slate-50 dark:bg-slate-800/60 border border-slate-200/60 dark:border-slate-700/60 px-3 py-2">
              <div class="text-[12px] font-bold text-slate-900 dark:text-white">${this.esc(data.reply.user?.name || 'عضو')}</div>
              <div class="text-[13px] text-slate-900 dark:text-slate-100 mt-1">${this.esc(data.reply.content || content)}</div>
            </div>
          </div>
        `);
      }
    }

    // ----------------- Delete -----------------
    async deleteItem(type, id){
      if (!confirm('متأكد من الحذف؟')) return;

      const {res, data} = await this.fetchJSON(this.routes.deleteItem, {
        method:'POST',
        headers:{
          'Content-Type':'application/json',
          'X-CSRF-TOKEN': this.csrf
        },
        body: JSON.stringify({ type, id: Number(id) })
      });

      if (!res.ok || !data.success) {
        this.toast(data.message || 'فشل الحذف', 'error');
        return;
      }

      this.toast('تم الحذف ✅', 'success');

      // remove from DOM
      if (type === 'post') {
        this.q(`[data-post-id="${id}"]`)?.remove();
      } else if (type === 'comment') {
        this.q(`[data-comment-id="${id}"]`)?.remove();
      } else if (type === 'reply') {
        this.q(`[data-reply-id="${id}"]`)?.remove();
      }
    }

    // ----------------- Reactions (FB style) -----------------
    bindLongPress(){
      // on mobile long press to open palette
      let timer = null;
      let targetWrap = null;

      document.addEventListener('touchstart', (e)=>{
        const btn = e.target.closest('[data-fb-like="1"]');
        if (!btn) return;

        const wrap = btn.closest('.fb-react-wrap');
        if (!wrap) return;

        targetWrap = wrap;
        timer = setTimeout(()=>{
          this.showReactBar(targetWrap, true);
        }, 350);
      }, {passive:true});

      document.addEventListener('touchend', ()=>{
        clearTimeout(timer);
        timer = null;
      }, {passive:true});

      // hover desktop
      document.addEventListener('mouseenter', (e)=>{
        const btn = e.target.closest('[data-fb-like="1"]');
        if (!btn) return;
        const wrap = btn.closest('.fb-react-wrap');
        if (!wrap) return;
        this.showReactBar(wrap, false);
      }, true);

      document.addEventListener('mouseleave', (e)=>{
        const wrap = e.target.closest('.fb-react-wrap');
        if (!wrap) return;
        // delay small to allow click on emoji
        setTimeout(()=>{
          if (!wrap.matches(':hover')) this.hideReactBar(wrap);
        }, 120);
      }, true);
    }

    showReactBar(wrap, force){
      this.hideAllReactBars(wrap);
      wrap.classList.add('show');
      const bar = wrap.querySelector('.fb-react-bar');
      if (bar) bar.classList.add('fb-drop');

      setTimeout(()=> bar?.classList.remove('fb-drop'), 220);
    }

    hideReactBar(wrap){
      wrap.classList.remove('show');
    }

    hideAllReactBars(except=null){
      this.qa('.fb-react-wrap.show').forEach(w=>{
        if (except && w === except) return;
        w.classList.remove('show');
      });
    }

    async react(targetType, id, rtype){
      // حالياً استخدمنا react للـ post فقط (لو بدك نفس الشي للكومنت/الرد بنضيفه)
      if (targetType !== 'post') return;

      const url = this.urlReplace(this.routes.reactPost, id);

      const {res, data} = await this.fetchJSON(url, {
        method:'POST',
        headers:{
          'Content-Type':'application/json',
          'X-CSRF-TOKEN': this.csrf
        },
        body: JSON.stringify({ type: rtype })
      });

      if (!res.ok || !data.success) {
        this.toast(data.message || 'فشل التفاعل', 'error');
        return;
      }

      // update UI counts/active
      this.applyPostReactionUI(id, data.reaction_counts || {}, data.user_reaction || null);

      // bounce
      const post = this.q(`[data-post-id="${id}"]`);
      const btn = post?.querySelector('[data-fb-like="1"]');
      btn?.classList.add('fb-react-bounce');
      setTimeout(()=> btn?.classList.remove('fb-react-bounce'), 450);

      this.hideAllReactBars();
    }

    applyPostReactionUI(postId, counts, userReaction){
      const post = this.q(`[data-post-id="${postId}"]`);
      if (!post) return;

      // update numbers in button label area (simple: like count only displayed there in our card)
      const likeBtn = post.querySelector('[data-fb-like="1"]');
      if (likeBtn) {
        const c = likeBtn.querySelector('.reaction-count');
        if (c) c.textContent = String(counts.like ?? 0);
      }

      // update summary top (optional)
      // (أنت كاتب summary = like+love فقط فوق، هون بنحدّثها لو حبيت)
      // خليها بسيطة: Reload ما في داعي.

      // update label
      const label = this.q(`#fbReactLabel-${postId}`);
      if (label) label.textContent = userReaction ? 'تفاعلت' : 'أعجبني';
    }

    // ----------------- Report modal -----------------
    openReportModal(type, id){
      // إذا بدك المودال الموجود عندك (reportModal) نخليه:
      const modal = this.q('#reportModal');
      if (!modal) return;

      this.q('#reportableType')?.setAttribute('value', type);
      this.q('#reportableId')?.setAttribute('value', id);
      modal.classList.remove('hidden');

      // bind once
      const form = this.q('#reportForm');
      if (form && !form.dataset.bound) {
        form.dataset.bound = '1';
        form.addEventListener('submit', (e)=>{
          e.preventDefault();
          this.submitReport();
        });
      }
    }

    closeReportModal(){
      this.q('#reportModal')?.classList.add('hidden');
    }

    async submitReport(){
      const form = this.q('#reportForm');
      if (!form) return;

      const fd = new FormData(form);

      const {res, data} = await this.fetchJSON(this.routes.report, {
        method:'POST',
        body: fd,
        headers:{ 'X-CSRF-TOKEN': this.csrf }
      });

      if (!res.ok || !data.success) {
        this.toast(data.message || 'فشل إرسال البلاغ', 'error');
        return;
      }

      this.toast('تم إرسال البلاغ ✅', 'success');
      this.closeReportModal();
    }

    // ----------------- Image modal -----------------
    initImageModal(){
      const modal = document.createElement('div');
      modal.id = 'fbImgModal';
      modal.className = 'hidden fixed inset-0 z-[9999] bg-black/80 backdrop-blur-sm';
      modal.innerHTML = `
        <div class="w-full h-full flex items-center justify-center p-3">
          <div class="relative w-full max-w-4xl">
            <button id="fbImgClose" class="absolute -top-10 right-0 text-white/90 hover:text-white text-2xl">
              <i class="fa-solid fa-xmark"></i>
            </button>

            <button id="fbImgPrev" class="absolute left-0 top-1/2 -translate-y-1/2 px-3 py-3 rounded-2xl bg-white/10 hover:bg-white/20 text-white">
              <i class="fa-solid fa-chevron-left"></i>
            </button>

            <button id="fbImgNext" class="absolute right-0 top-1/2 -translate-y-1/2 px-3 py-3 rounded-2xl bg-white/10 hover:bg-white/20 text-white">
              <i class="fa-solid fa-chevron-right"></i>
            </button>

            <div class="rounded-2xl overflow-hidden bg-black">
              <img id="fbImgMain" src="" class="w-full max-h-[80vh] object-contain bg-black" />
            </div>
          </div>
        </div>
      `;
      document.body.appendChild(modal);
      this.imgModal = modal;

      this.q('#fbImgClose', modal).addEventListener('click', ()=> this.closeImageModal());
      this.q('#fbImgPrev', modal).addEventListener('click', ()=> this.moveImage(-1));
      this.q('#fbImgNext', modal).addEventListener('click', ()=> this.moveImage(1));

      modal.addEventListener('click', (e)=>{
        if (e.target === modal) this.closeImageModal();
      });

      document.addEventListener('keydown', (e)=>{
        if (modal.classList.contains('hidden')) return;
        if (e.key === 'ArrowLeft') this.moveImage(-1);
        if (e.key === 'ArrowRight') this.moveImage(1);
      });
    }

    bindImageOpeners(){
      // any <a data-fb-img="1" ...>
      this.qa('[data-fb-img="1"]').forEach(a=>{
        if (a.dataset.bound) return;
        a.dataset.bound = '1';
        a.addEventListener('click', (e)=>{
          e.preventDefault();
          try{
            const images = JSON.parse(a.dataset.fbImages || '[]');
            const idx = parseInt(a.dataset.fbIndex || '0', 10) || 0;
            this.openImageModal(images, idx);
          }catch(err){
            // fallback open new tab
            window.open(a.href, '_blank');
          }
        });
      });
    }

    openImageModal(images, index){
      if (!this.imgModal) return;
      this.imgList = Array.isArray(images) ? images : [];
      this.imgIndex = Math.max(0, Math.min(index, this.imgList.length-1));

      const img = this.q('#fbImgMain', this.imgModal);
      if (img) img.src = this.imgList[this.imgIndex] || '';

      this.imgModal.classList.remove('hidden');
    }

    closeImageModal(){
      this.imgModal?.classList.add('hidden');
    }

    moveImage(step){
      if (!this.imgList.length) return;
      this.imgIndex = (this.imgIndex + step + this.imgList.length) % this.imgList.length;
      const img = this.q('#fbImgMain', this.imgModal);
      if (img) img.src = this.imgList[this.imgIndex];
    }
  }

  // expose
  window.postsSystem = new PostsSystem();
})();
</script>
@endsection