{% extends 'base.html' %}
{% block title %}لوحة النشر • Tedalal Social{% endblock %}
{% block content %}
<section class="intro"><div><div class="eyebrow">YOUR CONTENT COMMAND CENTER</div><h1>انشر مرة، ووصل لجمهورك في كل مكان.</h1><p>اكتب بوست، ارفع صورة أو فيديو، اختار الحسابات والتوقيت. المنصات هتنشر عبر واجهاتها الرسمية بعد الربط والموافقات.</p></div><div class="stat"><b>{{accounts|length}}</b><span>حسابات متصلة</span></div></section>
{% if notice %}<div class="alert">{{notice}}</div>{% endif %}
{% if not base_https %}<div class="warn">أنت على عنوان محلي. ربط الحسابات والنشر بالصور على إنستجرام وتيك توك يحتاج موقعًا عامًا يعمل بـ HTTPS.</div>{% endif %}
<div class="layout">
<section class="panel composer">
<div class="panel-title"><span class="step">01</span><div><h2>بوست جديد</h2><p>المحتوى الذي سينشر على الحسابات التي تختارها</p></div></div>
<form method="post" action="/posts" enctype="multipart/form-data" id="compose">
<input name="token" type="hidden" value="{{csrf}}">
<label for="body">نص المنشور</label>
<textarea id="body" name="body" maxlength="2200" rows="7" placeholder="مثال: محتاج تجدد تصريح العمل أو الإقامة؟ تواصل مع فريق تدلل للمساعدة في تجهيز معاملتك..." required></textarea>
<div class="hint" id="counter">0 / 2200 حرف</div>
<label for="media">صورة أو فيديو <span class="optional">اختياري لفيسبوك فقط</span></label>
<label class="upload" for="media"><div class="upload-icon">↥</div><strong>اضغط لرفع صورة أو فيديو</strong><small>JPG · PNG · MP4 · MOV — حتى 100 MB</small><span id="chosen-file"></span></label>
<input class="file-input" id="media" type="file" name="media" accept="image/jpeg,image/png,video/mp4,video/quicktime">
<div id="preview" class="preview"></div>
<label>انشر على</label>
<div class="account-list">
{% if accounts %}{% for a in accounts %}
<label class="account" for="acc-{{a.id}}"><span class="platform {{a.platform}}">{{'f' if a.platform=='facebook' else '◎' if a.platform=='instagram' else '♪'}}</span><span class="account-main"><strong>{{a.name}}</strong><small>{{'فيسبوك' if a.platform=='facebook' else 'إنستجرام' if a.platform=='instagram' else 'تيك توك'}}</small></span><input id="acc-{{a.id}}" type="checkbox" name="account_ids" value="{{a.id}}" data-platform="{{a.platform}}"></label>
{% endfor %}{% else %}<div class="empty">اربط أول حساب من العمود الجانبي علشان تبدأ النشر.</div>{% endif %}
</div>
<div class="tik-controls" id="tik-controls" hidden>
<label for="privacy">خصوصية تيك توك</label><select name="privacy" id="privacy"><option value="">اختر مستوى الخصوصية</option></select><p class="hint">الاختيارات تتحدث من TikTok لكل حساب، ويجب الالتزام بمستويات الخصوصية المسموحة.</p>
<label class="tick-consent"><input type="checkbox" name="consent" value="yes" id="consent"> أوافق على إرسال هذا المنشور إلى حساب TikTok المحدد عبر واجهة النشر الرسمية.</label>
<p class="hint" id="tik-note">جارٍ تحميل خيارات TikTok...</p>
</div>
<label for="scheduled">ميعاد النشر <span class="optional">سيبه فاضي للنشر في أقرب دورة للعامل</span></label>
<input type="datetime-local" name="scheduled" id="scheduled" min="{{now_local}}"><div class="hint">بتوقيت الإمارات. يتطلب تشغيل worker.py طوال الوقت للنشر المجدول.</div>
<button class="btn primary full" type="submit" {% if not accounts %}disabled{% endif %}>حفظ وبدء النشر ←</button>
</form>
</section>
<aside>
<section class="panel connections"><div class="panel-title"><span class="step">02</span><div><h2>ربط الحسابات</h2><p>الربط الرسمي والآمن عن طريق المنصات</p></div></div>
<div class="connect-option"><span class="platform facebook">f</span><div><strong>فيسبوك + إنستجرام</strong><small>اربط صفحات فيسبوك وإنستجرام الاحترافية التابعة لها</small></div></div>
<a class="btn secondary full" href="/auth/meta">{{'ربط Meta' if meta_configured else 'Meta: أضف مفاتيح المطور أولًا'}}</a>
<div class="connect-option"><span class="platform tiktok">♪</span><div><strong>تيك توك</strong><small>يشترط تصريح video.publish للبوستات العامة</small></div></div>
<a class="btn secondary full" href="/auth/tiktok">{{'ربط TikTok' if tiktok_configured else 'TikTok: أضف مفاتيح المطور أولًا'}}</a>
{% if accounts %}<div class="connected-title">الحسابات المسجلة</div>{% for a in accounts %}<div class="connected"><div><strong>{{a.name}}</strong><small>{{a.platform}}</small></div><form method="post" action="/accounts/{{a.id}}/disconnect" onsubmit="return confirm('إيقاف الاتصال بهذا الحساب وإلغاء مهامه المنتظرة؟')"><input name="token" type="hidden" value="{{csrf}}"><button type="submit">إيقاف</button></form></div>{% endfor %}{% endif %}
</section>
<section class="panel guide"><h3>قبل النشر التلقائي</h3><p>لازم مفاتيح تطبيقات Meta وTikTok، موافقات النشر، واسم نطاق عام بـ HTTPS. التيك توك ممكن يقيّد المنشورات على الوضع الخاص قبل مراجعة التطبيق.</p><p>جرّب النشر على حساب تجريبي أولًا. لا ترفع كلمة السر الخاصة بالفيسبوك أو تيك توك داخل البرنامج.</p></section>
</aside>
</div>
<section class="panel history"><div class="panel-title"><span class="step">03</span><div><h2>سجل المنشورات</h2><p>حالة كل منصة بشكل منفصل</p></div></div>
{% if posts %}<div class="post-list">{% for p in posts %}<article class="post-item"><div class="post-top"><span class="postid">#{{p.id}}</span><span>موعد النشر: {{p.scheduled_at|localtime}}</span></div>
<p>{{p.body}}</p>
{% if p.media_type %}<span class="media-tag">{{'🖼️ صورة' if p.media_type=='image' else '🎬 فيديو'}}</span>{% endif %}
<div class="job-list">
{% for j in jobs.get(p.id, []) %}<div class="job"><span class="jobaccount">{{j.account_name}} <small>({{j.platform}})</small></span>
<span class="status {{j.status}}">{{'تم النشر' if j.status=='published' else 'بانتظار المعالجة' if j.status=='scheduled' else 'يتم النشر' if j.status=='processing' else 'أرسِل وجارٍ التحقق' if j.status=='submitted' else 'فشل النشر'}}</span>
{% if j.remote_link %}<a href="{{j.remote_link}}" target="_blank" rel="noopener noreferrer">افتح المنشور ↗</a>{% endif %}
{% if j.last_error %}<small class="error">{{j.last_error}}</small>{% endif %}
{% if j.status=='failed' %}<form action="/jobs/{{j.id}}/retry" method="post" onsubmit="return confirm('هل تأكدت أن المنصة لم تنشر نسخة سابقة؟')"><input type="hidden" name="token" value="{{csrf}}"><button type="submit" class="retry">إعادة محاولة</button></form>{% endif %}
</div>{% endfor %}
</div></article>{% endfor %}</div>{% else %}<div class="empty">لسه مفيش بوستات. أول منشور هيظهر هنا ومعاه حالة كل منصة.</div>{% endif %}
</section>
<script>
const input=document.querySelector('#body'),counter=document.querySelector('#counter');
input.addEventListener('input',()=>counter.textContent=input.value.length+' / 2200 حرف');
const file=document.querySelector('#media');
file.addEventListener('change',()=>{const f=file.files[0];document.querySelector('#chosen-file').textContent=f?f.name:'';let p=document.querySelector('#preview');p.replaceChildren();if(!f)return;let src=URL.createObjectURL(f);let el=document.createElement(f.type.startsWith('image/')?'img':'video');el.src=src;if(el.tagName==='VIDEO')el.controls=true;p.appendChild(el);});
let accountList=document.querySelectorAll('[data-platform]'), tik=document.querySelector('#tik-controls'),priv=document.querySelector('#privacy'), note=document.querySelector('#tik-note');
let cached=null;let translate={'PUBLIC_TO_EVERYONE':'عام — للجميع','SELF_ONLY':'خاص — لي فقط','FOLLOWER_OF_CREATOR':'المتابعون','MUTUAL_FOLLOW_FRIENDS':'الأصدقاء المتبادلون'};
async function refreshTik(){const selection=[...accountList].filter(x=>x.checked&&x.dataset.platform==='tiktok').map(x=>x.value);tik.hidden=!selection.length;if(!selection.length)return;note.textContent='جارٍ التأكد من صلاحيات الحساب...';try{cached=await (await fetch('/api/tiktok-privacy')).json();let opts=selection.map(id=>cached[id]?.options||[]);let intersection=opts.reduce((a,b)=>a.filter(x=>b.includes(x)));priv.replaceChildren(new Option('اختر مستوى الخصوصية',''));for(let key of intersection)priv.add(new Option(translate[key]||key,key));note.textContent=intersection.length?'اختر الخصوصية المناسبة ووافق على الإرسال.':'تعذر معرفة مستويات الخصوصية. أعد الربط أو راجع الموافقات.';}catch(e){note.textContent='فشل تحميل خيارات TikTok. جرّب مرة أخرى.';}}
accountList.forEach(x=>x.addEventListener('change',refreshTik));
</script>
{% endblock %}