@extends('layouts.superadmin')

@section('title', 'مكتبة قوالب اللايفات')
@section('page-title', 'مكتبة قوالب وسيناريوهات اللايفات')

@section('content')
@php
    $initialView = request('view','cards');
    if (!in_array($initialView, ['cards','table'])) {
        $initialView = 'cards';
    }
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
    <div class="max-w-6xl mx-auto px-4 rtl text-white">

        {{-- هيدر --}}
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-emerald-500/60 shadow-lg shadow-emerald-500/30">
                    <i class="fa-solid fa-clapperboard text-emerald-400 text-xl"></i>
                </div>
                <div class="text-center sm:text-right">
                    <h1 class="text-xl sm:text-2xl font-bold">مكتبة قوالب وسيناريوهات اللايفات</h1>
                    <p class="text-sm text-slate-300/80">
                        هنا نحفظ أفضل الأفكار والسيناريوهات الجاهزة للايفات، بحيث نقدر نعيد استخدامها بسهولة،
                        ونرسلها لصاحب اللايف بنقرة واحدة بدل ما نرتجل كل مرة من الصفر.
                    </p>
                </div>
            </div>
        </div>

        {{-- فورم إضافة قالب جديد --}}
        <div class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl p-4 sm:p-5">
            <h2 class="text-sm sm:text-base font-semibold mb-3">إضافة قالب لايف جديد</h2>
            <form method="POST" action="{{ route('superadmin.falcon-room.lives-insights.templates.store') }}" class="space-y-3">
                @csrf
                <div class="grid gap-3 md:grid-cols-3 grid-cols-1">
                    <div class="flex flex-col gap-1">
                        <label class="text-xs text-slate-300 mb-1">عنوان اللايف</label>
                        <input type="text" name="title" value="{{ old('title') }}"
                               class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                      focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                               placeholder="مثال: سهرة التعارف الأولى للأعضاء الجدد">
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="text-xs text-slate-300 mb-1">الجمهور المستهدف</label>
                        <select name="audience"
                                class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                       focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            <option value="all">كل التيم</option>
                            <option value="youth">الشباب</option>
                            <option value="girls">الصبايا</option>
                            <option value="mods">المشرفين</option>
                            <option value="guests">الضيوف</option>
                            <option value="core_team">النواة الأساسية</option>
                        </select>
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="text-xs text-slate-300 mb-1">مستوى الطاقة</label>
                        <select name="energy_level"
                                class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                       focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            <option value="low">هادئ / خفيف</option>
                            <option value="medium">متوسط / تفاعلي</option>
                            <option value="high">ناري / حماسي 🔥</option>
                        </select>
                    </div>
                </div>

                <div class="grid gap-3 md:grid-cols-3 grid-cols-1">
                    <div class="flex flex-col gap-1">
                        <label class="text-xs text-slate-300 mb-1">المدة المقترحة (بالساعات)</label>
                        <input type="number" step="0.5" min="0.5" max="6" name="suggested_hours"
                               value="{{ old('suggested_hours', 1.5) }}"
                               class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                      focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    </div>

                    <div class="md:col-span-2 flex flex-col gap-1">
                        <label class="text-xs text-slate-300 mb-1">وصف قصير</label>
                        <input type="text" name="description" value="{{ old('description') }}"
                               class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                      focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                               placeholder="ملخص عن هدف اللايف والجو العام المتوقع.">
                    </div>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">نص / سيناريو اللايف (Body)</label>
                    <textarea name="body" rows="6"
                              class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                     focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                              placeholder="ابدأ بافتتاحية، ثم نقاط الحديث، ثم فقرة تفاعل، ثم ختام + تكليف بسيط...">{{ old('body') }}</textarea>
                    <p class="text-[11px] text-slate-400 mt-1">
                        يمكنك كتابة نقاط مرقمة، أسئلة مقترحة، أو حتى سكربت شبه جاهز يُرسل لصاحب اللايف.
                    </p>
                </div>

                <div class="flex items-center gap-2 mt-2">
                    <button class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold
                                   text-slate-950 hover:bg-emerald-400 transition">
                        <i class="fa-solid fa-plus ml-2 text-xs"></i>
                        حفظ القالب في المكتبة
                    </button>
                    @if(session('success'))
                        <span class="text-[11px] text-emerald-300">{{ session('success') }}</span>
                    @endif
                </div>
            </form>
        </div>

        {{-- فلاتر البحث عن القوالب --}}
        <form method="GET" action="{{ route('superadmin.falcon-room.lives-insights.templates.index') }}"
              class="mb-4 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-3 sm:p-4 shadow-md">

            <input type="hidden" name="view" id="tpl-view-input" value="{{ $initialView }}">

            <div class="grid gap-3 md:grid-cols-4 grid-cols-1">
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">بحث</label>
                    <input type="text" name="q" value="{{ $q }}"
                           placeholder="عنوان / وصف / كلمات داخل السيناريو"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-xs sm:text-sm
                                  text-white placeholder:text-slate-500 focus:outline-none focus:ring-2
                                  focus:ring-emerald-500 focus:border-emerald-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">الجمهور</label>
                    <select name="audience"
                            class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-xs sm:text-sm text-white
                                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <option value="">الكل</option>
                        @foreach($audiences as $key => $label)
                            <option value="{{ $key }}" @selected($audience===$key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">مستوى الطاقة</label>
                    <select name="energy"
                            class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-xs sm:text-sm text-white
                                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <option value="">الكل</option>
                        @foreach($energies as $key => $label)
                            <option value="{{ $key }}" @selected($energy===$key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-2 justify-end">
                    <div class="flex gap-2">
                        <button class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-3 py-2 text-xs sm:text-sm font-semibold
                                       text-slate-950 hover:bg-emerald-400 transition">
                            <i class="fa-solid fa-magnifying-glass ml-1 text-[10px]"></i>
                            بحث
                        </button>
                        <a href="{{ route('superadmin.falcon-room.lives-insights.templates.index') }}"
                           class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-3 py-2 text-xs sm:text-sm
                                  font-medium text-slate-200 hover:bg-slate-800/80 transition">
                            إعادة ضبط
                        </a>
                    </div>
                </div>
            </div>
        </form>

        {{-- قائمة القوالب (جدول + كروت) --}}
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
            <div class="border-b border-slate-800 px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                    <h2 class="text-sm sm:text-base font-semibold">القوالب المحفوظة</h2>
                    <p class="text-[11px] text-slate-400">
                        يمكنك عرض القوالب كـ <span class="font-semibold">جدول</span> أو <span class="font-semibold">كروت</span> مناسبة للهاتف،
                        مع إمكانية فتح أي قالب ونسخ النص مباشرة.
                    </p>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-[11px] text-slate-400 hidden sm:inline">عدد القوالب: {{ $templates->total() }}</span>
                    <div class="inline-flex rounded-xl overflow-hidden border border-slate-700">
                        <button type="button" id="btn-tpl-cards"
                                class="px-3 py-2 text-xs font-semibold bg-slate-800 text-slate-200">
                            <i class="fa-solid fa-grip ml-1"></i> كروت
                        </button>
                        <button type="button" id="btn-tpl-table"
                                class="px-3 py-2 text-xs font-semibold bg-slate-800 text-slate-200 border-r border-slate-700">
                            <i class="fa-solid fa-table ml-1"></i> جدول
                        </button>
                    </div>
                </div>
            </div>

            {{-- كروت --}}
            <div id="tpl-cards-view" class="{{ $initialView === 'table' ? 'hidden' : '' }}">
                <div class="p-4 grid gap-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1">
                    @forelse($templates as $tpl)
                        @php
                            $shortBody = \Illuminate\Support\Str::limit(trim(preg_replace('/\s+/', ' ', strip_tags($tpl->body))), 120);
                        @endphp
                        <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                                    from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">

                            <div class="flex items-start justify-between gap-3 mb-2">
                                <div class="flex flex-col gap-1">
                                    <span class="text-[11px] text-slate-400">عنوان القالب</span>
                                    <span class="font-semibold text-slate-100">{{ $tpl->title }}</span>
                                </div>
                                <span class="text-[11px] text-slate-400">
                                    {{ number_format((float)$tpl->suggested_hours,1) }} س
                                </span>
                            </div>

                            <div class="flex flex-wrap gap-2 mb-3 text-[10px]">
                                <span class="px-2 py-0.5 rounded-full border border-sky-500/40 bg-sky-500/10 text-sky-200">
                                    {{ $audiences[$tpl->audience] ?? $tpl->audience }}
                                </span>
                                <span class="px-2 py-0.5 rounded-full border border-emerald-500/40 bg-emerald-500/10 text-emerald-200">
                                    {{ $energies[$tpl->energy_level] ?? $tpl->energy_level }}
                                </span>
                            </div>

                            @if($tpl->description)
                                <div class="text-[11px] text-slate-300 mb-2">
                                    {{ $tpl->description }}
                                </div>
                            @endif

                            <div class="text-[11px] text-slate-400 mb-3">
                                {{ $shortBody ?: 'لا يوجد نص مختصر، افتح التفاصيل لرؤية السيناريو بالكامل.' }}
                            </div>

                            <button type="button"
                                    class="btn-show-template inline-flex items-center justify-center w-full gap-2 rounded-xl
                                           bg-emerald-500/15 border border-emerald-500/30 px-3 py-1.5 text-xs font-semibold
                                           text-emerald-200 hover:bg-emerald-500/25 transition"
                                    data-title="{{ e($tpl->title) }}"
                                    data-body="{{ e($tpl->body) }}"
                                    data-meta="الجمهور: {{ $audiences[$tpl->audience] ?? $tpl->audience }} • الطاقة: {{ $energies[$tpl->energy_level] ?? $tpl->energy_level }} • مدة مقترحة: {{ number_format((float)$tpl->suggested_hours,1) }} س">
                                <i class="fa-solid fa-eye"></i>
                                عرض السيناريو / نسخ
                            </button>
                        </div>
                    @empty
                        <div class="col-span-full text-center text-slate-400 text-sm py-8">
                            لا يوجد أي قالب بعد. ابدأ بإضافة أول قالب للايفات التيم.
                        </div>
                    @endforelse
                </div>

                @if($templates->hasPages())
                    <div class="px-4 py-3 border-t border-slate-800">
                        {{ $templates->links() }}
                    </div>
                @endif
            </div>

            {{-- جدول --}}
            <div id="tpl-table-view" class="{{ $initialView === 'table' ? '' : 'hidden' }}">
                <div class="overflow-x-auto">
                    <table class="min-w-full text-xs sm:text-sm text-slate-200">
                        <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] uppercase tracking-wide">
                            <tr>
                                <th class="px-3 py-2 text-right">العنوان</th>
                                <th class="px-3 py-2 text-right">الجمهور</th>
                                <th class="px-3 py-2 text-right">الطاقة</th>
                                <th class="px-3 py-2 text-right">المدة (س)</th>
                                <th class="px-3 py-2 text-right">وصف</th>
                                <th class="px-3 py-2 text-right">سيناريو</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-800">
                            @forelse($templates as $tpl)
                                @php
                                    $shortBody = \Illuminate\Support\Str::limit(trim(preg_replace('/\s+/', ' ', strip_tags($tpl->body))), 80);
                                @endphp
                                <tr class="hover:bg-slate-800/50">
                                    <td class="px-3 py-2 align-top font-semibold text-slate-100">{{ $tpl->title }}</td>
                                    <td class="px-3 py-2 align-top text-[11px] text-sky-200">
                                        {{ $audiences[$tpl->audience] ?? $tpl->audience }}
                                    </td>
                                    <td class="px-3 py-2 align-top text-[11px] text-emerald-200">
                                        {{ $energies[$tpl->energy_level] ?? $tpl->energy_level }}
                                    </td>
                                    <td class="px-3 py-2 align-top text-[11px] text-slate-200">
                                        {{ number_format((float)$tpl->suggested_hours,1) }}
                                    </td>
                                    <td class="px-3 py-2 align-top text-[11px] text-slate-300">
                                        {{ $tpl->description ?? '—' }}
                                    </td>
                                    <td class="px-3 py-2 align-top text-[11px] text-slate-300">
                                        <div class="mb-1">
                                            {{ $shortBody ?: '...' }}
                                        </div>
                                        <button type="button"
                                                class="btn-show-template inline-flex items-center gap-2 rounded-xl bg-emerald-500/15
                                                       border border-emerald-500/30 px-3 py-1 text-[11px] font-semibold text-emerald-200
                                                       hover:bg-emerald-500/25 transition"
                                                data-title="{{ e($tpl->title) }}"
                                                data-body="{{ e($tpl->body) }}"
                                                data-meta="الجمهور: {{ $audiences[$tpl->audience] ?? $tpl->audience }} • الطاقة: {{ $energies[$tpl->energy_level] ?? $tpl->energy_level }} • مدة مقترحة: {{ number_format((float)$tpl->suggested_hours,1) }} س">
                                            فتح السيناريو
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-4 py-8 text-center text-slate-400">
                                        لا يوجد أي قالب بعد.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($templates->hasPages())
                    <div class="px-4 py-3 border-t border-slate-800">
                        {{ $templates->links() }}
                    </div>
                @endif
            </div>
        </div>

        {{-- فوتر توضيحي --}}
        <div class="mt-5 text-[11px] text-slate-500 text-center">
            هذه المكتبة هدفها تثبيت <span class="font-semibold text-slate-300">أسلوب موحّد ومحترف للايفات</span> في جيش الوفاء الذهبي،
            بحيث يمكن توزيع نفس الفكرة أكثر من مرة على أعضاء مختلفين بدون ضياع الجودة أو الفكرة الأصلية.
        </div>

        {{-- مودال عرض القالب --}}
        <div id="tplModal" class="fixed inset-0 z-50 hidden">
            <div id="tplBackdrop" class="absolute inset-0 bg-black/60"></div>
            <div class="absolute inset-x-0 bottom-0 sm:inset-y-0 sm:right-0 sm:left-auto
                        w-full sm:w-[560px] max-h-[85vh] sm:max-h-none
                        bg-slate-950 border border-slate-700 rounded-t-2xl sm:rounded-none sm:rounded-l-2xl
                        shadow-2xl overflow-hidden flex flex-col">
                <div class="px-4 py-3 border-b border-slate-800 flex items-center justify-between">
                    <div class="flex flex-col">
                        <span class="text-xs text-slate-400">سيناريو اللايف</span>
                        <span id="tplTitle" class="font-semibold text-slate-100">—</span>
                        <span id="tplMeta" class="text-[11px] text-slate-400">—</span>
                    </div>
                    <button id="tplClose" class="h-9 w-9 rounded-xl bg-slate-800 hover:bg-slate-700 transition flex items-center justify-center">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="p-4 overflow-y-auto">
                    <pre id="tplBody" class="whitespace-pre-wrap text-[12px] text-slate-200 font-normal"></pre>
                </div>
                <div class="px-4 py-3 border-t border-slate-800 flex items-center justify-between">
                    <button id="tplCopy"
                            class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold
                                   text-slate-950 hover:bg-emerald-400 transition">
                        <i class="fa-solid fa-copy ml-2 text-xs"></i>
                        نسخ النص
                    </button>
                    <span class="text-[11px] text-slate-400">
                        النص جاهز للإرسال لصاحب اللايف عبر الواتساب أو التليجرام.
                    </span>
                </div>
            </div>
        </div>

        {{-- Toast --}}
        <div id="tplToast" class="fixed top-4 left-4 z-[60] hidden">
            <div id="tplToastBox" class="rounded-xl border border-slate-700 bg-slate-900 text-slate-200 px-4 py-3 shadow-xl text-sm"></div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Toggle Cards/Table
    const cardsView = document.getElementById('tpl-cards-view');
    const tableView = document.getElementById('tpl-table-view');
    const btnCards  = document.getElementById('btn-tpl-cards');
    const btnTable  = document.getElementById('btn-tpl-table');
    const inputView = document.getElementById('tpl-view-input');

    function setActive(btn, active) {
        if (!btn) return;
        btn.classList.toggle('bg-emerald-500', active);
        btn.classList.toggle('text-slate-950', active);
        btn.classList.toggle('bg-slate-800', !active);
        btn.classList.toggle('text-slate-200', !active);
    }

    function setView(view, persist = true) {
        const isTable = view === 'table';

        if (cardsView) cardsView.classList.toggle('hidden', isTable);
        if (tableView) tableView.classList.toggle('hidden', !isTable);

        setActive(btnCards, !isTable);
        setActive(btnTable, isTable);

        if (inputView) inputView.value = isTable ? 'table' : 'cards';

        if (persist) {
            try { localStorage.setItem('templates_view', isTable ? 'table' : 'cards'); } catch (e) {}
        }

        try {
            const url = new URL(window.location.href);
            url.searchParams.set('view', isTable ? 'table' : 'cards');
            window.history.replaceState({}, '', url);
        } catch (e) {}
    }

    const qsView = new URLSearchParams(window.location.search).get('view');
    let saved = null;
    try { saved = localStorage.getItem('templates_view'); } catch (e) {}

    const initial = (qsView === 'table' || qsView === 'cards') ? qsView : (saved || @json($initialView));
    setView(initial, false);

    if (btnCards) btnCards.addEventListener('click', () => setView('cards'));
    if (btnTable) btnTable.addEventListener('click', () => setView('table'));

    // Modal + Copy
    const modal      = document.getElementById('tplModal');
    const backdrop   = document.getElementById('tplBackdrop');
    const btnClose   = document.getElementById('tplClose');
    const titleEl    = document.getElementById('tplTitle');
    const metaEl     = document.getElementById('tplMeta');
    const bodyEl     = document.getElementById('tplBody');
    const btnCopy    = document.getElementById('tplCopy');
    const toast      = document.getElementById('tplToast');
    const toastBox   = document.getElementById('tplToastBox');

    function showToast(msg) {
        toastBox.textContent = msg;
        toast.classList.remove('hidden');
        setTimeout(() => toast.classList.add('hidden'), 2000);
    }

    function openModal(title, body, meta) {
        titleEl.textContent = title || '—';
        bodyEl.textContent  = body || '';
        metaEl.textContent  = meta || '';
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        modal.classList.add('hidden');
        document.body.style.overflow = '';
    }

    document.querySelectorAll('.btn-show-template').forEach(btn => {
        btn.addEventListener('click', () => {
            const title = btn.dataset.title || '';
            const body  = btn.dataset.body || '';
            const meta  = btn.dataset.meta || '';
            openModal(title, body, meta);
        });
    });

    if (btnClose) btnClose.addEventListener('click', closeModal);
    if (backdrop) backdrop.addEventListener('click', closeModal);
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal();
    });

    if (btnCopy) btnCopy.addEventListener('click', async () => {
        try {
            await navigator.clipboard.writeText(bodyEl.textContent || '');
            showToast('تم نسخ النص ✅');
        } catch (e) {
            showToast('تعذر نسخ النص. انسخ يدويًا.');
        }
    });
});
</script>
@endsection