// ============================================================
// ADS MANAGER - مدير الإعلانات (Meta / TikTok / YouTube)
// يُحمَّل قبل index.html الرئيسي ويستخدم api / Icon / Btn المعرّفة هناك
// ============================================================

const ADS_PLATFORM_META = {
  meta:    { label: 'ميتا (فيسبوك + إنستغرام)', short: 'Meta',    color: '#1877F2', manager: 'https://adsmanager.facebook.com/', studio: 'https://business.facebook.com/latest/home' },
  tiktok:  { label: 'تيك توك',                  short: 'TikTok',  color: '#111111', manager: 'https://ads.tiktok.com/i18n/dashboard', studio: 'https://www.tiktok.com/creator-center' },
  youtube: { label: 'يوتيوب',                   short: 'YouTube', color: '#FF0000', manager: 'https://ads.google.com/', studio: 'https://studio.youtube.com/' },
};
const ADS_STATUS = {
  draft:     { label: 'مسودة',     cls: 'bg-gray-100 text-gray-700' },
  paused:    { label: 'موقوفة',    cls: 'bg-yellow-100 text-yellow-800' },
  active:    { label: 'تعمل',      cls: 'bg-green-100 text-green-800' },
  completed: { label: 'منتهية',    cls: 'bg-blue-100 text-blue-800' },
  failed:    { label: 'فشل النشر', cls: 'bg-red-100 text-red-800' },
  archived:  { label: 'مؤرشفة',   cls: 'bg-gray-100 text-gray-500' },
};
const ADS_ACTION_LABEL = {
  pause_ad: 'إيقاف إعلان', pause_campaign: 'إيقاف الحملة', resume: 'تشغيل', scale_budget: 'زيادة الميزانية',
  reduce_budget: 'خفض الميزانية', new_creative: 'إبداع جديد', change_targeting: 'تغيير الاستهداف', wait: 'انتظار',
};
// Readable error text: a proxy/server error page (e.g. Render 502 during a
// deploy) arrives as raw HTML, which must never be dumped into the UI.
const adsErrMsg = (e) => {
  const m = String((e && e.message) || e || '');
  const st = e && e.status;
  if (/^\s*</.test(m) || /<html|<!doctype/i.test(m) || [502, 503, 504].includes(st)) {
    return 'الخادم غير متاح مؤقتاً (يُعاد تشغيله أو مشغول). انتظر دقيقة ثم أعد المحاولة.';
  }
  return m.length > 300 ? m.slice(0, 300) + '…' : m;
};
const fmtN = (n) => (n == null ? '—' : Number(n).toLocaleString('en-US', { maximumFractionDigits: 2 }));
const fmtD = (d) => (d ? new Date(d).toLocaleString('ar-LY', { dateStyle: 'short', timeStyle: 'short' }) : '—');

function AdsTab({ active, children, onClick, badge }) {
  return (
    <button onClick={onClick}
      className={`px-4 py-2 rounded-lg text-sm font-semibold smooth flex items-center gap-2 ${active ? 'bg-ink text-paper' : 'text-ink-muted hover:bg-paper-soft hover:text-ink'}`}>
      {children}
      {badge > 0 && <span className="text-[10px] bg-brand text-white rounded-full px-1.5 py-0.5">{badge}</span>}
    </button>
  );
}

function AdsStat({ label, value, sub, color }) {
  return (
    <div className="card-soft rounded-2xl p-4">
      <div className="text-[11px] text-ink-dim font-bold uppercase tracking-widest mb-1">{label}</div>
      <div className="text-2xl font-display font-extrabold" style={color ? { color } : {}}>{value}</div>
      {sub && <div className="text-xs text-ink-muted mt-1">{sub}</div>}
    </div>
  );
}

function AdsBars({ data, field, label }) {
  const max = Math.max(1, ...data.map(d => Number(d[field] || 0)));
  if (!data.length) return <div className="text-xs text-ink-dim py-6 text-center">لا توجد بيانات أداء بعد — اضغط «مزامنة» بعد النشر.</div>;
  return (
    <div>
      <div className="text-[11px] text-ink-dim font-bold mb-2">{label}</div>
      <div className="flex items-end gap-1 h-28">
        {data.map(d => (
          <div key={d.day} className="flex-1 flex flex-col items-center justify-end h-full" title={`${d.day}: ${fmtN(d[field])}`}>
            <div className="w-full rounded-t bg-brand/70 hover:bg-brand smooth" style={{ height: `${(Number(d[field] || 0) / max) * 100}%`, minHeight: 2 }}></div>
            <div className="text-[9px] text-ink-dim mt-1">{d.day.slice(5)}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AdsToast({ msg, kind, onClose }) {
  useEffect(() => { const t = setTimeout(onClose, 6000); return () => clearTimeout(t); }, [msg]);
  if (!msg) return null;
  return (
    <div className={`fixed bottom-6 left-6 z-[80] rounded-xl px-4 py-3 text-sm shadow-lg fade-in max-w-md ${kind === 'error' ? 'bg-red-600 text-white' : 'bg-ink text-paper'}`}>
      <div className="flex items-start gap-3"><span className="flex-1">{msg}</span><button onClick={onClose}><Icon name="close" className="w-4 h-4" /></button></div>
    </div>
  );
}

// ============================================================
// MAIN
// ============================================================
function AdsManager({ user, onClose, initialTab }) {
  const [tab, setTab] = useState(initialTab === 'new' ? 'campaigns' : (initialTab || 'dashboard'));
  const [platforms, setPlatforms] = useState([]);
  const [accounts, setAccounts] = useState([]);
  const [campaigns, setCampaigns] = useState([]);
  const [recs, setRecs] = useState([]);
  const [dash, setDash] = useState(null);
  const [options, setOptions] = useState({ objectives: [], ctas: [], countries: [], default_countries: [] });
  const [selected, setSelected] = useState(null);     // campaign id
  const [wizard, setWizard] = useState(initialTab === 'new');
  const [toast, setToast] = useState(null);
  const [loading, setLoading] = useState(true);

  const say = (msg, kind = 'ok') => setToast({ msg, kind });

  const reloadAll = useCallback(async () => {
    try {
      const [p, a, c, r, d, o] = await Promise.all([
        api('/ads/platforms'), api('/ads/accounts'), api('/ads/campaigns'),
        api('/ads/recommendations?status=pending'), api('/ads/dashboard?days=7'), api('/ads/meta/options'),
      ]);
      setPlatforms(p.platforms); setAccounts(a.accounts); setCampaigns(c.campaigns);
      setRecs(r.recommendations); setDash(d); setOptions(o);
    } catch (e) { say('تعذّر تحميل بيانات مدير الإعلانات: ' + adsErrMsg(e), 'error'); }
    setLoading(false);
  }, []);

  useEffect(() => {
    reloadAll();
    // رسائل عودة OAuth (#/ads?connected=meta أو error=...)
    const h = window.location.hash;
    if (h.includes('connected=')) { const m = h.match(/connected=([a-z]+)/); say(`تم ربط حساب ${ADS_PLATFORM_META[m?.[1]]?.label || ''} بنجاح`); setTab('accounts'); window.history.replaceState({}, '', window.location.pathname + '#/ads'); }
    if (h.includes('error=')) { const m = h.match(/error=([^&]+)/); say('فشل الربط: ' + decodeURIComponent(m?.[1] || ''), 'error'); setTab('accounts'); window.history.replaceState({}, '', window.location.pathname + '#/ads'); }
  }, [reloadAll]);

  const openCampaign = (id) => { setSelected(id); setWizard(false); setTab('campaigns'); };

  return (
    <div className="flex-1 flex flex-col h-full overflow-hidden bg-paper">
      <header className="px-6 py-4 border-b border-line flex items-center gap-4 bg-surface-soft">
        <div className="flex-1">
          <h1 className="font-display font-extrabold text-xl tracking-tight">مدير الإعلانات</h1>
          <p className="text-xs text-ink-muted">يولّد الإعلانات والبوسترات والفيديوهات، ينشرها عبر الواجهات الرسمية، يحلّل الأداء ويحسّنه تلقائياً</p>
        </div>
        <nav className="flex items-center gap-1 flex-wrap">
          <AdsTab active={tab==='dashboard'} onClick={() => setTab('dashboard')}>لوحة التحكم</AdsTab>
          <AdsTab active={tab==='campaigns'} onClick={() => { setTab('campaigns'); setSelected(null); setWizard(false); }}>الحملات</AdsTab>
          <AdsTab active={tab==='recs'} onClick={() => setTab('recs')} badge={recs.length}>التوصيات</AdsTab>
          <AdsTab active={tab==='accounts'} onClick={() => setTab('accounts')}>الحسابات</AdsTab>
          <AdsTab active={tab==='monitor'} onClick={() => setTab('monitor')}>غرفة المتصفحات</AdsTab>
          <AdsTab active={tab==='logs'} onClick={() => setTab('logs')}>السجل</AdsTab>
        </nav>
        <Btn variant="ghost" size="sm" onClick={onClose}><Icon name="close" className="w-4 h-4" /></Btn>
      </header>

      <div className="flex-1 overflow-y-auto">
        {loading ? (
          <div className="h-full flex items-center justify-center"><span className="lp-mark breathe" style={{ width: 36, height: 36 }}><span></span></span></div>
        ) : tab === 'dashboard' ? (
          <AdsDashboard dash={dash} campaigns={campaigns} recs={recs} accounts={accounts} platforms={platforms}
            onNew={() => { setTab('campaigns'); setWizard(true); setSelected(null); }} onOpen={openCampaign} onAccounts={() => setTab('accounts')}
            onRunNow={async () => { try { const r = await api('/ads/scheduler/run-now', { method: 'POST' }); say(`دورة كاملة: ${r.synced} حملة مُزامنة، ${r.recommendations} توصية جديدة`); reloadAll(); } catch (e) { say(adsErrMsg(e), 'error'); } }} />
        ) : tab === 'campaigns' ? (
          wizard ? <AdsWizard user={user} accounts={accounts} options={options} platforms={platforms} say={say}
                     onDone={(c) => { setWizard(false); reloadAll(); setSelected(c.id); }} onCancel={() => setWizard(false)} />
          : selected ? <AdsCampaignDetail id={selected} say={say} options={options} onBack={() => { setSelected(null); reloadAll(); }} onChanged={reloadAll} />
          : <AdsCampaignList campaigns={campaigns} onOpen={openCampaign} onNew={() => setWizard(true)} />
        ) : tab === 'recs' ? (
          <AdsRecs recs={recs} campaigns={campaigns} say={say} onChanged={reloadAll} onOpen={openCampaign} />
        ) : tab === 'accounts' ? (
          <AdsAccounts platforms={platforms} accounts={accounts} say={say} onChanged={reloadAll} />
        ) : tab === 'monitor' ? (
          <AdsMonitor accounts={accounts} campaigns={campaigns} dash={dash} onOpen={openCampaign} />
        ) : (
          <AdsLogs />
        )}
      </div>
      <AdsToast msg={toast?.msg} kind={toast?.kind} onClose={() => setToast(null)} />
    </div>
  );
}

// ============================================================
// DASHBOARD
// ============================================================
function AdsDashboard({ dash, campaigns, recs, accounts, platforms, onNew, onOpen, onAccounts, onRunNow }) {
  const t = dash?.totals || {};
  const active = campaigns.filter(c => c.status === 'active');
  const noAccounts = accounts.length === 0;
  const unconfigured = platforms.filter(p => !p.configured);
  return (
    <div className="max-w-6xl mx-auto px-6 py-8 space-y-8">
      {noAccounts && (
        <div className="card-soft border-yellow-200 bg-yellow-50 rounded-2xl p-5 flex items-center gap-4">
          <div className="flex-1">
            <div className="font-bold text-yellow-900 mb-1">لا يوجد حساب إعلاني مربوط بعد</div>
            <p className="text-sm text-yellow-800">اربط حساب ميتا (فيسبوك + إنستغرام) أو تيك توك أو يوتيوب من تبويب الحسابات. بدون ربط يمكنك التخطيط وتوليد الإبداعات لكن لا يمكن النشر.</p>
            {unconfigured.length > 0 && <p className="text-xs text-yellow-700 mt-2">مفاتيح ناقصة في .env: {unconfigured.map(p => p.missing_config.join('، ')).join(' · ')}</p>}
          </div>
          <Btn variant="brand" onClick={onAccounts}>ربط حساب</Btn>
        </div>
      )}

      <div className="flex items-center justify-between">
        <div>
          <h2 className="font-display font-extrabold text-2xl">آخر 7 أيام</h2>
          <p className="text-sm text-ink-muted">{campaigns.length} حملة · {active.length} تعمل الآن · {recs.length} توصية معلّقة</p>
        </div>
        <div className="flex gap-2">
          <Btn variant="secondary" onClick={onRunNow}>مزامنة الكل الآن</Btn>
          <Btn variant="brand" onClick={onNew}><Icon name="plus" className="w-4 h-4" /> حملة جديدة بالذكاء الاصطناعي</Btn>
        </div>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        <AdsStat label="الإنفاق" value={fmtN(t.spend)} sub="بعملة الحساب" />
        <AdsStat label="الظهور" value={fmtN(t.impressions)} />
        <AdsStat label="النقرات" value={fmtN(t.clicks)} sub={`CTR ${fmtN(t.ctr)}%`} />
        <AdsStat label="تكلفة النقرة" value={fmtN(t.cpc)} />
        <AdsStat label="التحويلات" value={fmtN(t.conversions)} color="#16A34A" />
      </div>

      <div className="grid md:grid-cols-3 gap-4">
        <div className="card-soft rounded-2xl p-5 md:col-span-2"><AdsBars data={dash?.trend || []} field="clicks" label="النقرات يومياً" /></div>
        <div className="card-soft rounded-2xl p-5">
          <div className="text-[11px] text-ink-dim font-bold mb-3">حسب المنصة</div>
          {(dash?.by_platform || []).length === 0 && <div className="text-xs text-ink-dim">لا بيانات بعد</div>}
          {(dash?.by_platform || []).map(p => (
            <div key={p.platform} className="flex items-center justify-between py-2 border-b border-line last:border-0 text-sm">
              <span className="font-semibold flex items-center gap-2"><span className="w-2 h-2 rounded-full" style={{ background: ADS_PLATFORM_META[p.platform]?.color }}></span>{ADS_PLATFORM_META[p.platform]?.short}</span>
              <span className="text-ink-muted text-xs">{fmtN(p.clicks)} نقرة · {fmtN(p.spend)} إنفاق · CTR {fmtN(p.ctr)}%</span>
            </div>
          ))}
        </div>
      </div>

      <div>
        <h3 className="text-xs font-bold uppercase tracking-widest text-ink-dim mb-3">الحملات النشطة والأخيرة</h3>
        {campaigns.length === 0 ? <div className="card-soft rounded-2xl p-8 text-center text-sm text-ink-muted">لا توجد حملات بعد. ابدأ بوصف منتجك وسيكتب مدير الحملات الخطة والنسخ الإعلانية ويصمّم البوسترات.</div>
        : <div className="grid md:grid-cols-2 gap-3">{campaigns.slice(0, 6).map(c => <AdsCampaignCard key={c.id} c={c} onOpen={onOpen} />)}</div>}
      </div>
    </div>
  );
}

function AdsCampaignCard({ c, onOpen }) {
  const st = ADS_STATUS[c.status] || ADS_STATUS.draft;
  const pm = ADS_PLATFORM_META[c.platform];
  const p = c.perf_7d || {};
  return (
    <button onClick={() => onOpen(c.id)} className="card-soft hover:border-line-strong rounded-2xl p-4 text-right smooth">
      <div className="flex items-center gap-2 mb-2">
        <span className="w-2.5 h-2.5 rounded-full" style={{ background: pm?.color }}></span>
        <span className="font-bold truncate flex-1">{c.name}</span>
        <span className={`text-[10px] px-2 py-0.5 rounded-full font-bold ${st.cls}`}>{st.label}</span>
      </div>
      <div className="text-xs text-ink-muted flex gap-3 flex-wrap">
        <span>{pm?.short}</span><span>·</span><span>{c.daily_budget} {c.currency}/يوم</span><span>·</span>
        <span>{(c.creatives || []).length} إبداع</span>
        {c.autopilot && <span className="text-brand font-bold">· طيار آلي</span>}
      </div>
      {(p.impressions > 0) && <div className="text-xs text-ink-dim mt-2">7 أيام: {fmtN(p.impressions)} ظهور · {fmtN(p.clicks)} نقرة · {fmtN(p.spend)} إنفاق</div>}
      {c.last_error && <div className="text-xs text-red-600 mt-2 truncate">⚠ {c.last_error}</div>}
    </button>
  );
}

function AdsCampaignList({ campaigns, onOpen, onNew }) {
  const [filter, setFilter] = useState('all');
  const list = campaigns.filter(c => filter === 'all' || c.status === filter || c.platform === filter);
  return (
    <div className="max-w-6xl mx-auto px-6 py-8">
      <div className="flex items-center justify-between mb-6">
        <div className="flex gap-1 flex-wrap">
          {[['all', 'الكل'], ['active', 'تعمل'], ['paused', 'موقوفة'], ['draft', 'مسودات'], ['meta', 'Meta'], ['tiktok', 'TikTok'], ['youtube', 'YouTube']].map(([k, l]) => (
            <button key={k} onClick={() => setFilter(k)} className={`px-3 py-1.5 rounded-lg text-xs font-semibold smooth ${filter === k ? 'bg-ink text-paper' : 'text-ink-muted hover:bg-paper-soft'}`}>{l}</button>
          ))}
        </div>
        <Btn variant="brand" onClick={onNew}><Icon name="plus" className="w-4 h-4" /> حملة جديدة</Btn>
      </div>
      {list.length === 0 ? <div className="card-soft rounded-2xl p-10 text-center text-sm text-ink-muted">لا توجد حملات مطابقة.</div>
      : <div className="grid md:grid-cols-2 gap-3">{list.map(c => <AdsCampaignCard key={c.id} c={c} onOpen={onOpen} />)}</div>}
    </div>
  );
}

// ============================================================
// WIZARD: brief → AI plan → review creatives → save
// ============================================================
function AdsWizard({ user, accounts, options, platforms, say, onDone, onCancel }) {
  const [step, setStep] = useState(1);
  const [platform, setPlatform] = useState('meta');
  const [brief, setBrief] = useState('');
  const [objective, setObjective] = useState('traffic');
  const [budget, setBudget] = useState(5);
  const [countries, setCountries] = useState(['LY']);
  const [landing, setLanding] = useState('');
  const [accountId, setAccountId] = useState('');
  const [plan, setPlan] = useState(null);
  const [busy, setBusy] = useState(false);
  const [autopilot, setAutopilot] = useState(false);

  const platAccounts = accounts.filter(a => a.platform === platform && a.is_active);
  useEffect(() => { setAccountId(platAccounts.find(a => a.is_default)?.id || platAccounts[0]?.id || ''); }, [platform, accounts.length]);

  const toggleCountry = (c) => setCountries(cs => cs.includes(c) ? cs.filter(x => x !== c) : [...cs, c]);

  const doPlan = async () => {
    if (brief.trim().length < 5) return say('اكتب وصفاً للمنتج أو الخدمة أولاً', 'error');
    setBusy(true);
    try {
      const r = await api('/ads/campaigns/plan', { method: 'POST', body: JSON.stringify({ platform, brief, objective, daily_budget: Number(budget), countries, landing_url: landing || null, account_id: accountId || null }) });
      setPlan(r.plan); setStep(2);
      say(r.plan._generated_by === 'template' ? 'لا يوجد مفتاح نموذج متاح — استُخدم قالب محلي. أضف مفتاح Claude/GPT/Gemini من الإعدادات لنتائج أقوى.' : `كتب الخطة: ${r.plan._generated_by.replace('ai:', '')}`);
    } catch (e) { say(adsErrMsg(e), 'error'); }
    setBusy(false);
  };

  const updCreative = (i, k, v) => setPlan(p => ({ ...p, creatives: p.creatives.map((c, j) => j === i ? { ...c, [k]: v } : c) }));

  const save = async () => {
    setBusy(true);
    try {
      const c = await api('/ads/campaigns', { method: 'POST', body: JSON.stringify({
        platform, account_id: accountId || null, name: plan.name, objective, brief, landing_url: landing || null,
        daily_budget: Number(plan.daily_budget || budget), targeting: plan.targeting, placements: platform === 'meta' ? ['facebook', 'instagram'] : [platform],
        creatives: plan.creatives.map(cr => ({ ...cr, type: platform === 'youtube' ? 'video' : (cr.type || 'image') })),
        autopilot, autopilot_rules: { min_confidence: 0.8, max_daily_budget: Number(plan.daily_budget || budget) * 3 }, plan,
      }) });
      say('تم حفظ الحملة كمسودة. الخطوة التالية: توليد الوسائط ثم النشر.');
      onDone(c);
    } catch (e) { say(adsErrMsg(e), 'error'); }
    setBusy(false);
  };

  return (
    <div className="max-w-4xl mx-auto px-6 py-8">
      <div className="flex items-center gap-3 mb-6">
        <Btn variant="ghost" size="sm" onClick={onCancel}><Icon name="arrow_right" className="w-4 h-4" /></Btn>
        <h2 className="font-display font-extrabold text-2xl">حملة جديدة</h2>
        <div className="mr-auto flex gap-2 text-xs">
          {[1, 2].map(s => <span key={s} className={`px-2.5 py-1 rounded-full font-bold ${step === s ? 'bg-ink text-paper' : 'bg-paper-soft text-ink-dim'}`}>{s === 1 ? '١ الوصف' : '٢ مراجعة الخطة'}</span>)}
        </div>
      </div>

      {step === 1 && (
        <div className="space-y-5">
          <div>
            <label className="text-xs font-bold text-ink-dim block mb-2">المنصة</label>
            <div className="grid grid-cols-3 gap-2">
              {Object.entries(ADS_PLATFORM_META).map(([k, v]) => {
                const pinfo = platforms.find(p => p.platform === k);
                return (
                  <button key={k} onClick={() => setPlatform(k)} className={`card-soft rounded-xl p-3 text-right smooth ${platform === k ? 'border-ink ring-1 ring-ink' : ''}`}>
                    <div className="flex items-center gap-2 font-bold text-sm"><span className="w-2.5 h-2.5 rounded-full" style={{ background: v.color }}></span>{v.label}</div>
                    <div className="text-[10px] text-ink-dim mt-1">{pinfo?.connected_accounts ? `${pinfo.connected_accounts} حساب مربوط` : 'غير مربوط — يمكنك التخطيط فقط'}</div>
                  </button>
                );
              })}
            </div>
          </div>
          <div>
            <label className="text-xs font-bold text-ink-dim block mb-2">صف المنتج أو الخدمة والعرض والجمهور (كلما كان الوصف أدق كانت الإعلانات أقوى)</label>
            <textarea value={brief} onChange={e => setBrief(e.target.value)} rows={5} className="w-full rounded-xl border border-line bg-surface p-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand/30"
              placeholder="مثال: مزاد ماكينا الدولي للسيارات — سيارات أمريكية من مزادات كوبارت وIAAI بأسعار الجملة، شحن إلى ليبيا خلال 45 يوماً، فحص مجاني، عرض خصم 10% على عمولة أول سيارة. الجمهور: تجار سيارات وأفراد في ليبيا وتونس 25-50 سنة." />
          </div>
          <div className="grid md:grid-cols-3 gap-4">
            <div>
              <label className="text-xs font-bold text-ink-dim block mb-2">الهدف</label>
              <select value={objective} onChange={e => setObjective(e.target.value)} className="w-full rounded-xl border border-line bg-surface p-2.5 text-sm">
                {options.objectives.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
              </select>
            </div>
            <div>
              <label className="text-xs font-bold text-ink-dim block mb-2">الميزانية اليومية</label>
              <input type="number" min="1" step="0.5" value={budget} onChange={e => setBudget(e.target.value)} className="w-full rounded-xl border border-line bg-surface p-2.5 text-sm" />
              {platform === 'tiktok' && <div className="text-[10px] text-ink-dim mt-1">تيك توك: الحد الأدنى 20/يوم</div>}
            </div>
            <div>
              <label className="text-xs font-bold text-ink-dim block mb-2">الحساب الإعلاني</label>
              <select value={accountId} onChange={e => setAccountId(e.target.value)} className="w-full rounded-xl border border-line bg-surface p-2.5 text-sm">
                <option value="">— بدون (مسودة فقط) —</option>
                {platAccounts.map(a => <option key={a.id} value={a.id}>{a.name} ({a.currency})</option>)}
              </select>
            </div>
          </div>
          <div>
            <label className="text-xs font-bold text-ink-dim block mb-2">الدول المستهدفة</label>
            <div className="flex flex-wrap gap-1.5">
              {options.countries.map(c => <button key={c.code} onClick={() => toggleCountry(c.code)} className={`px-2.5 py-1 rounded-lg text-xs font-semibold smooth ${countries.includes(c.code) ? 'bg-brand text-white' : 'bg-paper-soft text-ink-muted hover:text-ink'}`}>{c.name}</button>)}
            </div>
          </div>
          <div>
            <label className="text-xs font-bold text-ink-dim block mb-2">رابط الهبوط (موقعك / صفحة المنتج / واتساب)</label>
            <input value={landing} onChange={e => setLanding(e.target.value)} dir="ltr" className="w-full rounded-xl border border-line bg-surface p-2.5 text-sm" placeholder="https://macchinaa.net/..." />
          </div>
          <div className="flex justify-end">
            <Btn variant="brand" size="lg" disabled={busy} onClick={doPlan}>{busy ? 'مدير الحملات يكتب الخطة…' : 'اكتب الخطة والنسخ الإعلانية'} <Icon name="sparkles" className="w-4 h-4" /></Btn>
          </div>
        </div>
      )}

      {step === 2 && plan && (
        <div className="space-y-5">
          <div className="card-soft rounded-2xl p-5 space-y-3">
            <div className="flex items-center gap-3">
              <input value={plan.name} onChange={e => setPlan({ ...plan, name: e.target.value })} className="font-bold text-lg bg-transparent border-b border-line focus:outline-none flex-1" />
              <span className="text-[10px] text-ink-dim">{plan._generated_by}</span>
            </div>
            <p className="text-sm text-ink-muted"><b>الجمهور:</b> {plan.audience_summary}</p>
            <p className="text-sm text-ink-muted"><b>الميزانية:</b> {plan.daily_budget}/يوم — {plan.budget_rationale}</p>
            <p className="text-sm text-ink-muted"><b>أفضل الأوقات:</b> {plan.best_times}</p>
            <p className="text-xs text-ink-dim"><b>الاستهداف:</b> {(plan.targeting?.countries || []).join('، ')} · {plan.targeting?.age_min}-{plan.targeting?.age_max} سنة {(plan.targeting?.interests_keywords || []).length ? '· اهتمامات: ' + plan.targeting.interests_keywords.join('، ') : ''}</p>
            {plan.kpis && <p className="text-xs text-ink-dim"><b>الأهداف:</b> CTR ≥ {plan.kpis.target_ctr}% · CPC ≤ {plan.kpis.target_cpc} · CPA ≤ {plan.kpis.target_cpa}</p>}
            {(plan.risks || []).length > 0 && <p className="text-xs text-yellow-700">⚠ {plan.risks.join(' · ')}</p>}
          </div>

          <div className="grid md:grid-cols-3 gap-3">
            {plan.creatives.map((cr, i) => (
              <div key={i} className="card-soft rounded-2xl p-4 space-y-2">
                <div className="flex items-center justify-between"><span className="font-bold">نسخة {cr.variant_label}</span><span className="text-[10px] text-ink-dim">{cr.angle}</span></div>
                <input value={cr.headline} onChange={e => updCreative(i, 'headline', e.target.value)} className="w-full text-sm font-bold bg-paper-soft rounded-lg p-2" placeholder="العنوان" />
                <textarea value={cr.primary_text} onChange={e => updCreative(i, 'primary_text', e.target.value)} rows={4} className="w-full text-sm bg-paper-soft rounded-lg p-2" placeholder="النص الأساسي" />
                <input value={cr.description} onChange={e => updCreative(i, 'description', e.target.value)} className="w-full text-xs bg-paper-soft rounded-lg p-2" placeholder="الوصف" />
                <select value={cr.call_to_action} onChange={e => updCreative(i, 'call_to_action', e.target.value)} className="w-full text-xs bg-paper-soft rounded-lg p-2">
                  {options.ctas.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
                <div className="text-[10px] text-ink-dim">{(cr.hashtags || []).join(' ')}</div>
                <details className="text-[11px] text-ink-muted"><summary className="cursor-pointer">وصف الصورة + سكربت الفيديو</summary>
                  <textarea value={cr.image_prompt || ''} onChange={e => updCreative(i, 'image_prompt', e.target.value)} rows={3} dir="ltr" className="w-full bg-paper-soft rounded-lg p-2 mt-1" />
                  <textarea value={cr.video_script || ''} onChange={e => updCreative(i, 'video_script', e.target.value)} rows={3} className="w-full bg-paper-soft rounded-lg p-2 mt-1" />
                </details>
              </div>
            ))}
          </div>

          <label className="flex items-center gap-3 card-soft rounded-xl p-4 cursor-pointer">
            <input type="checkbox" checked={autopilot} onChange={e => setAutopilot(e.target.checked)} />
            <div><div className="font-bold text-sm">تفعيل الطيار الآلي</div><div className="text-xs text-ink-muted">يوقف الإعلانات الخاسرة ويزيد ميزانية الرابحة تلقائياً (حتى 3× الميزانية) عند ثقة ≥ 80%. يمكن تغييره لاحقاً.</div></div>
          </label>

          <div className="flex justify-between">
            <Btn variant="secondary" onClick={() => setStep(1)}>تعديل الوصف</Btn>
            <Btn variant="brand" size="lg" disabled={busy} onClick={save}>{busy ? 'جارٍ الحفظ…' : 'حفظ الحملة والانتقال لتوليد الوسائط'}</Btn>
          </div>
        </div>
      )}
    </div>
  );
}

// ============================================================
// CAMPAIGN DETAIL
// ============================================================
function AdsCampaignDetail({ id, say, options, onBack, onChanged }) {
  const [c, setC] = useState(null);
  const [busy, setBusy] = useState('');
  const [analysis, setAnalysis] = useState(null);
  const [days, setDays] = useState(7);
  const [pageSel, setPageSel] = useState('');

  const load = useCallback(() => api(`/ads/campaigns/${id}`).then(setC).catch(e => say(adsErrMsg(e), 'error')), [id]);
  useEffect(() => { load(); }, [load]);

  const run = async (label, fn, after) => {
    setBusy(label);
    try { const r = await fn(); if (after) after(r); await load(); onChanged && onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); }
    setBusy('');
  };

  if (!c) return <div className="p-10 text-center text-sm text-ink-dim">تحميل…</div>;
  const st = ADS_STATUS[c.status] || ADS_STATUS.draft;
  const pm = ADS_PLATFORM_META[c.platform];
  const published = !!c.external_campaign_id;
  const rep = c.report || {};
  const t = rep.totals || {};
  const missingMedia = (c.creatives || []).filter(x => x.is_active && !x.has_media);
  const pendingRecs = (c.recommendations || []).filter(r => r.status === 'pending');

  return (
    <div className="max-w-6xl mx-auto px-6 py-8 space-y-6">
      <div className="flex items-center gap-3 flex-wrap">
        <Btn variant="ghost" size="sm" onClick={onBack}><Icon name="arrow_right" className="w-4 h-4" /></Btn>
        <span className="w-3 h-3 rounded-full" style={{ background: pm?.color }}></span>
        <h2 className="font-display font-extrabold text-2xl flex-1 truncate">{c.name}</h2>
        <span className={`text-xs px-2.5 py-1 rounded-full font-bold ${st.cls}`}>{st.label}</span>
        {c.autopilot && <span className="text-xs px-2.5 py-1 rounded-full font-bold bg-brand-soft text-brand">طيار آلي</span>}
      </div>

      {c.last_error && <div className="rounded-xl bg-red-50 border border-red-200 p-3 text-sm text-red-800">⚠ آخر خطأ من المنصة: {c.last_error}</div>}

      {/* Action bar */}
      <div className="card-soft rounded-2xl p-4 flex flex-wrap items-center gap-2">
        <div className="text-xs text-ink-muted ml-auto">
          {pm?.label} · {c.account_name || 'بدون حساب'} · {c.daily_budget} {c.currency}/يوم · {(c.targeting?.countries || []).join('، ')}
          {published && <span dir="ltr"> · ID {c.external_campaign_id}</span>}
        </div>
        {!published && (
          <>
            <Btn variant="secondary" size="sm" disabled={!!busy} onClick={() => run('media', () => api(`/ads/campaigns/${id}/creatives/generate-media`, { method: 'POST', body: JSON.stringify({ make_video: c.platform !== 'meta' }) }), r => say(`تم توليد ${r.results.length} وسائط (${[...new Set(r.results.map(x => x.provider || 'خطأ'))].join('، ')})`))}>
              {busy === 'media' ? 'جارٍ التصميم…' : <><Icon name="sparkles" className="w-4 h-4" /> ولّد البوسترات/الفيديو</>}
            </Btn>
            {c.platform === 'meta' && c.account_id && <AdsMetaPagePicker campaign={c} value={pageSel} onChange={setPageSel} />}
            <Btn variant="brand" size="sm" disabled={!!busy || missingMedia.length > 0 || !c.account_id}
              title={!c.account_id ? 'اربط حساباً أولاً' : missingMedia.length ? 'ولّد الوسائط أولاً' : ''}
              onClick={() => run('publish', () => api(`/ads/campaigns/${id}/publish`, { method: 'POST', body: JSON.stringify(pageSel ? { page_id: pageSel } : null) }), () => say('نُشرت الحملة في المنصة بحالة موقوفة. راجعها ثم اضغط «تشغيل».'))}>
              {busy === 'publish' ? 'جارٍ النشر…' : <><Icon name="rocket" className="w-4 h-4" /> انشر (موقوفة)</>}
            </Btn>
          </>
        )}
        {published && (
          <>
            {c.status === 'active'
              ? <Btn variant="secondary" size="sm" disabled={!!busy} onClick={() => run('status', () => api(`/ads/campaigns/${id}/status`, { method: 'POST', body: JSON.stringify({ active: false }) }), () => say('تم إيقاف الحملة'))}><Icon name="pause" className="w-4 h-4" /> إيقاف</Btn>
              : <Btn variant="brand" size="sm" disabled={!!busy} onClick={() => run('status', () => api(`/ads/campaigns/${id}/status`, { method: 'POST', body: JSON.stringify({ active: true }) }), () => say('الحملة تعمل الآن'))}><Icon name="play" className="w-4 h-4" /> تشغيل</Btn>}
            <Btn variant="secondary" size="sm" disabled={!!busy} onClick={() => run('sync', () => api(`/ads/campaigns/${id}/sync?days=${days}`, { method: 'POST' }), r => say(`مزامنة: ${r.rows} صف أداء، ${r.new_recommendations.length} توصية جديدة${r.autopilot.length ? '، الطيار الآلي: ' + r.autopilot.join('؛ ') : ''}`))}>{busy === 'sync' ? '…' : 'مزامنة الأداء'}</Btn>
            <Btn variant="secondary" size="sm" disabled={!!busy} onClick={() => run('analyze', () => api(`/ads/campaigns/${id}/analyze?days=${days}`, { method: 'POST' }), r => { setAnalysis(r.analysis); say('اكتمل التحليل'); })}>{busy === 'analyze' ? 'يحلّل…' : <><Icon name="sparkles" className="w-4 h-4" /> تحليل ذكي</>}</Btn>
            <AdsBudgetEditor c={c} busy={busy} onSave={(v) => run('budget', () => api(`/ads/campaigns/${id}/budget`, { method: 'POST', body: JSON.stringify({ daily_budget: v }) }), () => say('تم تعديل الميزانية في المنصة'))} />
            <a href={pm?.manager} target="_blank" rel="noopener" className="text-xs text-ink-muted hover:text-ink underline">افتح في {pm?.short}</a>
          </>
        )}
        <label className="flex items-center gap-1.5 text-xs cursor-pointer">
          <input type="checkbox" checked={c.autopilot} onChange={e => run('ap', () => api(`/ads/campaigns/${id}`, { method: 'PATCH', body: JSON.stringify({ autopilot: e.target.checked }) }))} /> طيار آلي
        </label>
        <Btn variant="danger" size="sm" disabled={!!busy} onClick={() => { if (confirm('حذف الحملة نهائياً من النظام؟ (ستُوقف في المنصة إن كانت تعمل)')) run('del', () => api(`/ads/campaigns/${id}`, { method: 'DELETE' }), onBack); }}><Icon name="trash" className="w-4 h-4" /></Btn>
      </div>

      {/* Performance */}
      {published && (
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <h3 className="text-xs font-bold uppercase tracking-widest text-ink-dim">الأداء</h3>
            {[7, 14, 30].map(d => <button key={d} onClick={() => setDays(d)} className={`text-[11px] px-2 py-0.5 rounded ${days === d ? 'bg-ink text-paper' : 'text-ink-dim'}`}>{d} يوم</button>)}
          </div>
          <div className="grid grid-cols-2 md:grid-cols-6 gap-3">
            <AdsStat label="الإنفاق" value={fmtN(t.spend)} sub={rep.currency} />
            <AdsStat label="الظهور" value={fmtN(t.impressions)} sub={`وصول ${fmtN(t.reach)}`} />
            <AdsStat label="النقرات" value={fmtN(t.clicks)} sub={`CTR ${fmtN(t.ctr)}%`} />
            <AdsStat label="CPC" value={fmtN(t.cpc)} sub={`CPM ${fmtN(t.cpm)}`} />
            <AdsStat label="التحويلات" value={fmtN(t.conversions)} sub={t.conversions ? `CPA ${fmtN(t.cost_per_conversion)}` : ''} color="#16A34A" />
            <AdsStat label="مشاهدات/تفاعل" value={fmtN(t.video_views)} sub={`${fmtN(t.engagements)} تفاعل`} />
          </div>
          <div className="grid md:grid-cols-2 gap-3">
            <div className="card-soft rounded-2xl p-4"><AdsBars data={rep.trend || []} field="clicks" label="النقرات يومياً" /></div>
            <div className="card-soft rounded-2xl p-4"><AdsBars data={rep.trend || []} field="spend" label="الإنفاق يومياً" /></div>
          </div>
          {(rep.per_ad || []).length > 0 && (
            <div className="card-soft rounded-2xl p-4 overflow-x-auto">
              <table className="w-full text-xs">
                <thead><tr className="text-ink-dim text-right"><th className="py-1">الإعلان</th><th>الظهور</th><th>النقرات</th><th>CTR</th><th>CPC</th><th>الإنفاق</th><th>التحويلات</th></tr></thead>
                <tbody>{rep.per_ad.map(a => <tr key={a.creative_id || a.external_ad_id} className="border-t border-line"><td className="py-1.5 font-bold">نسخة {a.label}</td><td>{fmtN(a.impressions)}</td><td>{fmtN(a.clicks)}</td><td>{fmtN(a.ctr)}%</td><td>{fmtN(a.cpc)}</td><td>{fmtN(a.spend)}</td><td>{fmtN(a.conversions)}</td></tr>)}</tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {analysis && (
        <div className="card-soft rounded-2xl p-5 space-y-2 border-brand/30">
          <div className="flex items-center justify-between"><h3 className="font-bold">تحليل مدير الحملات</h3><span className="text-[10px] text-ink-dim">{analysis._generated_by}</span></div>
          <p className="text-sm">{analysis.summary}</p>
          {analysis.winner && <p className="text-sm"><b>الرابح:</b> {analysis.winner}</p>}
          {(analysis.problems || []).length > 0 && <ul className="text-sm text-red-700 list-disc pr-5">{analysis.problems.map((p, i) => <li key={i}>{p}</li>)}</ul>}
          {analysis.next_creative_brief && <p className="text-sm text-ink-muted"><b>الإبداع التالي المقترح:</b> {analysis.next_creative_brief}</p>}
        </div>
      )}

      {/* Recommendations */}
      {pendingRecs.length > 0 && (
        <div>
          <h3 className="text-xs font-bold uppercase tracking-widest text-ink-dim mb-3">توصيات معلّقة</h3>
          <div className="space-y-2">{pendingRecs.map(r => <AdsRecRow key={r.id} r={r} say={say} onChanged={() => { load(); onChanged && onChanged(); }} />)}</div>
        </div>
      )}

      {/* Creatives */}
      <div>
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-xs font-bold uppercase tracking-widest text-ink-dim">الإبداعات (A/B/C)</h3>
          {!published && <Btn variant="ghost" size="sm" onClick={() => run('addcr', () => api(`/ads/campaigns/${id}/creatives`, { method: 'POST', body: JSON.stringify({ variant_label: String.fromCharCode(65 + (c.creatives || []).length), headline: '', primary_text: '', type: c.platform === 'youtube' ? 'video' : 'image' }) }))}><Icon name="plus" className="w-4 h-4" /> إضافة نسخة</Btn>}
        </div>
        <div className="grid md:grid-cols-3 gap-3">
          {(c.creatives || []).map(cr => <AdsCreativeCard key={cr.id} cr={cr} campaign={c} options={options} say={say} onChanged={load} />)}
        </div>
      </div>

      <details className="text-xs text-ink-dim"><summary className="cursor-pointer">الوصف الأصلي والخطة</summary><pre className="whitespace-pre-wrap bg-paper-soft rounded-xl p-3 mt-2">{c.brief}</pre></details>
    </div>
  );
}

function AdsMetaPagePicker({ campaign, value, onChange }) {
  const [pages, setPages] = useState([]);
  useEffect(() => { api('/ads/accounts').then(r => { const a = r.accounts.find(x => x.id === campaign.account_id); setPages(a?.assets?.pages || []); if (!value && a?.assets?.page_id) onChange(a.assets.page_id); else if (!value && a?.assets?.pages?.[0]) onChange(a.assets.pages[0].id); }).catch(() => {}); }, [campaign.account_id]);
  if (!pages.length) return <span className="text-[11px] text-red-600">لا توجد صفحة فيسبوك في الحساب — تحقّق من الحساب</span>;
  return (
    <select value={value} onChange={e => onChange(e.target.value)} className="text-xs rounded-lg border border-line bg-surface p-1.5">
      {pages.map(p => <option key={p.id} value={p.id}>صفحة: {p.name}{p.instagram_username ? ` + IG @${p.instagram_username}` : ''}</option>)}
    </select>
  );
}

function AdsBudgetEditor({ c, busy, onSave }) {
  const [v, setV] = useState(c.daily_budget);
  useEffect(() => setV(c.daily_budget), [c.daily_budget]);
  return (
    <span className="flex items-center gap-1 text-xs">
      <input type="number" min="1" step="0.5" value={v} onChange={e => setV(e.target.value)} className="w-20 rounded-lg border border-line bg-surface p-1.5 text-xs" />
      <Btn variant="ghost" size="sm" disabled={!!busy || Number(v) === Number(c.daily_budget)} onClick={() => onSave(Number(v))}>حفظ الميزانية</Btn>
    </span>
  );
}

function AdsCreativeCard({ cr, campaign, options, say, onChanged }) {
  const [edit, setEdit] = useState(false);
  const [f, setF] = useState({ headline: cr.headline || '', primary_text: cr.primary_text || '', description: cr.description || '', call_to_action: cr.call_to_action, generation_prompt: cr.generation_prompt || '' });
  const [busy, setBusy] = useState(false);
  const published = !!cr.external_ad_id;
  const isVideo = cr.type === 'video' || (cr.media_url || '').match(/\.(mp4|mov)$/);
  const save = async () => { setBusy(true); try { await api(`/ads/creatives/${cr.id}`, { method: 'PATCH', body: JSON.stringify(f) }); setEdit(false); onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); } setBusy(false); };
  const regen = async () => { setBusy(true); try { await api(`/ads/campaigns/${campaign.id}/creatives/generate-media`, { method: 'POST', body: JSON.stringify({ creative_ids: [cr.id], make_video: cr.type === 'video' }) }); onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); } setBusy(false); };
  const upload = async (file) => {
    if (!file) return; setBusy(true);
    try {
      const fd = new FormData(); fd.append('file', file);
      const res = await fetch(API_BASE + `/ads/creatives/${cr.id}/upload`, { method: 'POST', headers: { Authorization: `Bearer ${getToken()}` }, body: fd });
      if (!res.ok) throw new Error((await res.json()).detail || 'فشل الرفع');
      onChanged();
    } catch (e) { say(adsErrMsg(e), 'error'); }
    setBusy(false);
  };
  const toggle = async () => { setBusy(true); try { await api(`/ads/creatives/${cr.id}`, { method: 'PATCH', body: JSON.stringify({ is_active: !cr.is_active }) }); onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); } setBusy(false); };
  return (
    <div className={`card-soft rounded-2xl overflow-hidden ${!cr.is_active ? 'opacity-60' : ''}`}>
      <div className="aspect-square bg-paper-soft flex items-center justify-center relative">
        {cr.media_url ? (isVideo ? <video src={cr.media_url} controls className="w-full h-full object-cover" poster={cr.thumbnail_url || undefined} /> : <img src={cr.media_url} alt="" className="w-full h-full object-cover" />)
          : <div className="text-xs text-ink-dim text-center p-4">لا توجد وسائط بعد<br />ولّدها بالذكاء الاصطناعي أو ارفع ملفاً</div>}
        <span className="absolute top-2 right-2 text-[10px] font-bold bg-ink text-paper px-2 py-0.5 rounded-full">نسخة {cr.variant_label}</span>
        {published && <span className="absolute top-2 left-2 text-[10px] font-bold bg-green-600 text-white px-2 py-0.5 rounded-full">منشور</span>}
      </div>
      <div className="p-3 space-y-1.5">
        {edit ? (
          <>
            <input value={f.headline} onChange={e => setF({ ...f, headline: e.target.value })} className="w-full text-sm font-bold bg-paper-soft rounded-lg p-2" />
            <textarea value={f.primary_text} onChange={e => setF({ ...f, primary_text: e.target.value })} rows={4} className="w-full text-sm bg-paper-soft rounded-lg p-2" />
            <input value={f.description} onChange={e => setF({ ...f, description: e.target.value })} className="w-full text-xs bg-paper-soft rounded-lg p-2" />
            <select value={f.call_to_action} onChange={e => setF({ ...f, call_to_action: e.target.value })} className="w-full text-xs bg-paper-soft rounded-lg p-2">{options.ctas.map(x => <option key={x}>{x}</option>)}</select>
            <textarea value={f.generation_prompt} onChange={e => setF({ ...f, generation_prompt: e.target.value })} rows={2} dir="ltr" className="w-full text-[11px] bg-paper-soft rounded-lg p-2" placeholder="image prompt" />
            <div className="flex gap-2"><Btn size="sm" disabled={busy} onClick={save}>حفظ</Btn><Btn size="sm" variant="ghost" onClick={() => setEdit(false)}>إلغاء</Btn></div>
          </>
        ) : (
          <>
            <div className="font-bold text-sm">{cr.headline || <span className="text-ink-dim">بلا عنوان</span>}</div>
            <div className="text-xs text-ink-muted whitespace-pre-wrap line-clamp-4">{cr.primary_text}</div>
            <div className="text-[10px] text-ink-dim">{cr.call_to_action} · {cr.generated_by}{cr.ai_score ? ` · تقييم ${cr.ai_score}/10` : ''}</div>
            <div className="flex flex-wrap gap-1 pt-1">
              {!published && <Btn size="sm" variant="ghost" onClick={() => setEdit(true)}><Icon name="edit" className="w-3.5 h-3.5" /></Btn>}
              {!published && <Btn size="sm" variant="ghost" disabled={busy} onClick={regen}><Icon name="sparkles" className="w-3.5 h-3.5" /> {busy ? '…' : 'ولّد'}</Btn>}
              {!published && <label className="inline-flex items-center gap-1 text-xs text-ink-muted hover:text-ink cursor-pointer px-2"><Icon name="download" className="w-3.5 h-3.5" /> ارفع<input type="file" accept="image/*,video/mp4,video/quicktime" className="hidden" onChange={e => upload(e.target.files[0])} /></label>}
              {published && <Btn size="sm" variant="ghost" disabled={busy} onClick={toggle}>{cr.is_active ? 'إيقاف الإعلان' : 'تشغيل الإعلان'}</Btn>}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ============================================================
// RECOMMENDATIONS
// ============================================================
function AdsRecRow({ r, say, onChanged, campaignName }) {
  const [busy, setBusy] = useState(false);
  const act = async (kind) => {
    setBusy(true);
    try { const res = await api(`/ads/recommendations/${r.id}/${kind}`, { method: 'POST' }); say(kind === 'apply' ? res.result : 'تم تجاهل التوصية'); onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); }
    setBusy(false);
  };
  const pr = r.priority <= 1 ? 'border-red-300' : r.priority === 2 ? 'border-yellow-300' : 'border-line';
  return (
    <div className={`card-soft rounded-xl p-4 border ${pr} flex items-start gap-4`}>
      <div className="flex-1">
        <div className="flex items-center gap-2 flex-wrap">
          <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-paper-soft">{ADS_ACTION_LABEL[r.action] || r.action}</span>
          <span className="font-bold text-sm">{r.title}</span>
          {campaignName && <span className="text-xs text-ink-dim">· {campaignName}</span>}
          <span className="text-[10px] text-ink-dim mr-auto">ثقة {Math.round(r.confidence * 100)}% · {r.source} · {fmtD(r.created_at)}</span>
        </div>
        <p className="text-sm text-ink-muted mt-1">{r.reason}</p>
        {r.expected_impact && <p className="text-xs text-green-700 mt-1">الأثر المتوقع: {r.expected_impact}</p>}
        {r.result && <p className="text-xs text-ink-dim mt-1">النتيجة: {r.result}</p>}
      </div>
      {r.status === 'pending' && <div className="flex flex-col gap-1"><Btn size="sm" variant="brand" disabled={busy} onClick={() => act('apply')}>طبّق</Btn><Btn size="sm" variant="ghost" disabled={busy} onClick={() => act('dismiss')}>تجاهل</Btn></div>}
      {r.status !== 'pending' && <span className="text-xs text-ink-dim">{r.status === 'applied' ? 'مطبّقة' : r.status === 'auto_applied' ? 'طبّقها الطيار الآلي' : 'متجاهَلة'}</span>}
    </div>
  );
}

function AdsRecs({ recs, campaigns, say, onChanged, onOpen }) {
  const [all, setAll] = useState(null);
  const [showAll, setShowAll] = useState(false);
  useEffect(() => { if (showAll) api('/ads/recommendations?status=all').then(r => setAll(r.recommendations)).catch(() => {}); }, [showAll, recs.length]);
  const names = Object.fromEntries(campaigns.map(c => [c.id, c.name]));
  const list = showAll ? (all || []) : recs;
  return (
    <div className="max-w-5xl mx-auto px-6 py-8">
      <div className="flex items-center justify-between mb-4">
        <h2 className="font-display font-extrabold text-2xl">توصيات مدير الحملات</h2>
        <label className="text-xs flex items-center gap-2"><input type="checkbox" checked={showAll} onChange={e => setShowAll(e.target.checked)} /> عرض السجل الكامل</label>
      </div>
      <p className="text-sm text-ink-muted mb-6">تُولَّد التوصيات تلقائياً كل مزامنة من قواعد الأداء (CTR، CPC، CPA) ومن التحليل الذكي. طبّقها بضغطة أو فعّل الطيار الآلي ليطبّقها عنك.</p>
      {list.length === 0 ? <div className="card-soft rounded-2xl p-10 text-center text-sm text-ink-muted">لا توجد توصيات حالياً. بعد نشر حملة وجمع ~1500 ظهور ستظهر التوصيات هنا.</div>
      : <div className="space-y-2">{list.map(r => <AdsRecRow key={r.id} r={r} say={say} onChanged={onChanged} campaignName={names[r.campaign_id]} />)}</div>}
    </div>
  );
}

// ============================================================
// ACCOUNTS
// ============================================================
function AdsAccounts({ platforms, accounts, say, onChanged }) {
  const [tokenFor, setTokenFor] = useState(null);
  const [token, setToken] = useState('');
  const [busy, setBusy] = useState('');

  const oauth = async (p) => {
    setBusy(p);
    try { const r = await api(`/ads/oauth/${p}/start`); window.location.href = r.url; } catch (e) { say(adsErrMsg(e), 'error'); setBusy(''); }
  };
  const connectToken = async () => {
    setBusy('token');
    try { const r = await api('/ads/accounts/connect-token', { method: 'POST', body: JSON.stringify({ platform: tokenFor, access_token: token }) }); say(`تم ربط ${r.accounts.length} حساب`); setTokenFor(null); setToken(''); onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); }
    setBusy('');
  };
  const connectServer = async () => {
    setBusy('server');
    try { const r = await api('/ads/accounts/connect-server-token', { method: 'POST' }); say(`تم ربط ${r.accounts.length} حساب من مفتاح السيرفر`); onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); }
    setBusy('');
  };
  const verify = async (a) => { setBusy('v' + a.id); try { const r = await api(`/ads/accounts/${a.id}/verify`, { method: 'POST' }); say(`الحساب صالح · ${r.info.accounts} حساب إعلاني مرئي`); onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); } setBusy(''); };
  const del = async (a) => { if (!confirm('فصل هذا الحساب؟ الحملات المرتبطة تبقى لكن لن تستطيع مزامنتها.')) return; try { await api(`/ads/accounts/${a.id}`, { method: 'DELETE' }); onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); } };
  const setAsset = async (a, k, v) => { try { await api(`/ads/accounts/${a.id}`, { method: 'PATCH', body: JSON.stringify({ assets: { [k]: v } }) }); onChanged(); } catch (e) { say(adsErrMsg(e), 'error'); } };

  return (
    <div className="max-w-5xl mx-auto px-6 py-8 space-y-6">
      <div><h2 className="font-display font-extrabold text-2xl">الحسابات الإعلانية</h2><p className="text-sm text-ink-muted">الربط يتم عبر الواجهات الرسمية (OAuth) أو بتوكن مباشر. لا نستخدم أتمتة متصفح على فيسبوك/تيك توك حتى لا تُحظر حساباتك.</p></div>

      <div className="grid md:grid-cols-3 gap-3">
        {platforms.map(p => {
          const pm = ADS_PLATFORM_META[p.platform];
          return (
            <div key={p.platform} className="card-soft rounded-2xl p-4 space-y-3">
              <div className="flex items-center gap-2"><span className="w-3 h-3 rounded-full" style={{ background: pm.color }}></span><span className="font-bold">{pm.label}</span></div>
              <div className="text-xs">
                {p.configured ? <span className="text-green-700 font-bold">✓ مفاتيح التطبيق مضبوطة</span>
                  : <span className="text-yellow-700">⚠ ناقص في .env: <code dir="ltr">{p.missing_config.join(', ')}</code></span>}
                {p.platform === 'youtube' && <div className="text-ink-dim mt-1">{p.paid_ads_enabled ? 'Google Ads مفعّل (حملات مدفوعة)' : 'بدون developer token: نشر عضوي على القناة + تحليلات'}</div>}
              </div>
              <div className="text-xs text-ink-muted">{p.connected_accounts} حساب مربوط</div>
              <div className="flex flex-wrap gap-1.5">
                <Btn size="sm" variant="brand" disabled={!p.configured || !!busy} onClick={() => oauth(p.platform)}>{busy === p.platform ? '…' : 'ربط عبر OAuth'}</Btn>
                {p.supports_manual_token && <Btn size="sm" variant="secondary" onClick={() => { setTokenFor(p.platform); setToken(''); }}>توكن مباشر</Btn>}
                {p.server_token_available && <Btn size="sm" variant="secondary" disabled={!!busy} onClick={connectServer}>{busy === 'server' ? '…' : 'ربط بمفتاح السيرفر'}</Btn>}
              </div>
            </div>
          );
        })}
      </div>

      {tokenFor && (
        <div className="card-soft rounded-2xl p-5 space-y-3 border-brand/40">
          <div className="font-bold">ربط {ADS_PLATFORM_META[tokenFor].label} بتوكن مباشر</div>
          <p className="text-xs text-ink-muted">
            {tokenFor === 'meta' ? 'من Business Manager → Business settings → System users → Generate token بالصلاحيات: ads_management, ads_read, pages_show_list, pages_read_engagement, instagram_basic, business_management. أو من Graph API Explorer (توكن قصير يُحوَّل تلقائياً لطويل الأمد إذا كانت مفاتيح التطبيق مضبوطة).'
              : 'من TikTok for Business Developer Portal → App → Access Token (طويل الأمد).'}
          </p>
          <textarea value={token} onChange={e => setToken(e.target.value)} rows={3} dir="ltr" className="w-full rounded-xl border border-line bg-surface p-2 text-xs font-mono" placeholder="EAAB..." />
          <div className="flex gap-2"><Btn variant="brand" size="sm" disabled={busy === 'token' || token.length < 10} onClick={connectToken}>{busy === 'token' ? 'يتحقق…' : 'تحقّق واربط'}</Btn><Btn variant="ghost" size="sm" onClick={() => setTokenFor(null)}>إلغاء</Btn></div>
        </div>
      )}

      <div className="space-y-2">
        {accounts.length === 0 && <div className="card-soft rounded-2xl p-8 text-center text-sm text-ink-muted">لا توجد حسابات مربوطة.</div>}
        {accounts.map(a => {
          const pm = ADS_PLATFORM_META[a.platform];
          const pages = a.assets?.pages || [];
          const ids = a.assets?.identities || [];
          const gads = a.assets?.google_ads_customers || [];
          return (
            <div key={a.id} className="card-soft rounded-xl p-4 flex flex-wrap items-center gap-3">
              <span className="w-2.5 h-2.5 rounded-full" style={{ background: pm.color }}></span>
              <div className="flex-1 min-w-[200px]">
                <div className="font-bold text-sm">{a.name} <span className="text-ink-dim font-normal" dir="ltr">{a.external_account_id}</span></div>
                <div className="text-xs text-ink-muted">{pm.short} · {a.currency} · {a.timezone}{a.is_default ? ' · افتراضي' : ''}{a.token_expires_at ? ` · ينتهي التوكن ${fmtD(a.token_expires_at)}` : ''}</div>
                {a.last_error && <div className="text-xs text-red-600">⚠ {a.last_error}</div>}
              </div>
              {a.platform === 'meta' && (pages.length ? (
                <select value={a.assets?.page_id || pages[0].id} onChange={e => setAsset(a, 'page_id', e.target.value)} className="text-xs rounded-lg border border-line bg-surface p-1.5">
                  {pages.map(p => <option key={p.id} value={p.id}>صفحة: {p.name}{p.instagram_username ? ` + @${p.instagram_username}` : ''}</option>)}
                </select>) : <span className="text-[11px] text-yellow-700">لا صفحات — تحقّق من صلاحية pages_show_list</span>)}
              {a.platform === 'tiktok' && ids.length > 0 && (
                <select value={a.assets?.identity_id || ids[0].id} onChange={e => setAsset(a, 'identity_id', e.target.value)} className="text-xs rounded-lg border border-line bg-surface p-1.5">
                  {ids.map(i => <option key={i.id} value={i.id}>هوية: {i.name}</option>)}
                </select>)}
              {a.platform === 'youtube' && gads.length > 0 && (
                <select value={a.assets?.google_ads_customer_id || ''} onChange={e => setAsset(a, 'google_ads_customer_id', e.target.value)} className="text-xs rounded-lg border border-line bg-surface p-1.5">
                  <option value="">— نشر عضوي فقط —</option>{gads.map(g => <option key={g} value={g}>Google Ads {g}</option>)}
                </select>)}
              <Btn size="sm" variant="secondary" disabled={!!busy} onClick={() => verify(a)}>{busy === 'v' + a.id ? '…' : 'تحقّق'}</Btn>
              {!a.is_default && <Btn size="sm" variant="ghost" onClick={() => api(`/ads/accounts/${a.id}`, { method: 'PATCH', body: JSON.stringify({ is_default: true }) }).then(onChanged)}>اجعله افتراضياً</Btn>}
              <Btn size="sm" variant="danger" onClick={() => del(a)}><Icon name="trash" className="w-4 h-4" /></Btn>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// BROWSER ROOM - غرفة المتصفحات (نوافذ كروم حقيقية على الخادم)
// ============================================================
function AdsMonitor({ accounts, campaigns, dash, onOpen }) {
  const [wins, setWins] = useState([]);
  const [presets, setPresets] = useState([]);
  const [avail, setAvail] = useState(null);
  const [full, setFull] = useState(null);
  const [err, setErr] = useState('');
  const [adding, setAdding] = useState(false);

  const reload = useCallback(async () => {
    try {
      const [w, p] = await Promise.all([api('/browser/windows'), api('/browser/presets')]);
      setWins(w.windows); setPresets(p.presets); setAvail(p.available);
    } catch (e) { setErr(adsErrMsg(e)); }
  }, []);
  useEffect(() => { reload(); }, [reload]);

  const addPreset = async (key) => {
    setAdding(true);
    try { await api('/browser/windows', { method: 'POST', body: JSON.stringify({ name: '', url: 'about:blank', preset: key, start: true }) }); await reload(); }
    catch (e) { setErr(adsErrMsg(e)); }
    setAdding(false);
  };
  const addCustom = async () => {
    const url = prompt('رابط الموقع:', 'https://'); if (!url) return;
    const name = prompt('اسم النافذة:', url.replace(/^https?:\/\//, '').split('/')[0]) || url;
    setAdding(true);
    try { await api('/browser/windows', { method: 'POST', body: JSON.stringify({ name, url, platform: 'other', start: true }) }); await reload(); }
    catch (e) { setErr(adsErrMsg(e)); }
    setAdding(false);
  };

  const added = new Set(wins.map(w => w.url));
  return (
    <div className="max-w-[1500px] mx-auto px-6 py-8 space-y-6">
      <div>
        <h2 className="font-display font-extrabold text-2xl">غرفة المتصفحات</h2>
        <p className="text-sm text-ink-muted">نوافذ كروم <b>حقيقية على الخادم</b> بجلسات محفوظة: سجّل دخولك مرة واحدة داخل النافذة (كلمة المرور لا تُخزّن عندنا)، وتبقى الجلسة محفوظة. انقر على الشاشة لتتحكم، واكتب في الحقل ثم Enter.</p>
        <p className="text-xs text-yellow-700 mt-1">⚠ المنصات تحظر الحسابات التي تكتشف فيها أتمتة متصفح. استخدم الغرفة للمراجعة والمهام اليدوية، واترك النشر الإعلاني للواجهات الرسمية.</p>
        {avail && !avail.playwright && <p className="text-xs text-red-700 mt-1">Playwright غير مثبّت على الخادم: <code dir="ltr">pip install playwright && playwright install chromium --with-deps</code></p>}
        {err && <p className="text-xs text-red-700 mt-1">⚠ {err} <button className="underline" onClick={() => setErr('')}>إخفاء</button></p>}
      </div>

      <div className="card-soft rounded-2xl p-4">
        <div className="text-[11px] text-ink-dim font-bold mb-2">أضف نافذة جاهزة</div>
        <div className="flex flex-wrap gap-1.5">
          {presets.map(p => (
            <button key={p.key} disabled={adding || added.has(p.url)} onClick={() => addPreset(p.key)}
              className={`px-2.5 py-1.5 rounded-lg text-xs font-semibold smooth flex items-center gap-1.5 ${added.has(p.url) ? 'bg-paper-soft text-ink-dim' : 'bg-surface border border-line hover:border-ink'}`}>
              <span className="w-2 h-2 rounded-full" style={{ background: ADS_PLATFORM_META[p.platform]?.color || '#999' }}></span>{p.name}{added.has(p.url) ? ' ✓' : ''}
            </button>
          ))}
          <button disabled={adding} onClick={addCustom} className="px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-ink text-paper">+ رابط آخر</button>
        </div>
      </div>

      {wins.length === 0 ? (
        <div className="card-soft rounded-2xl p-10 text-center text-sm text-ink-muted">لا نوافذ بعد. أضف «Facebook - مدير الإعلانات» أو «Instagram» أو «TikTok Ads Manager» أو «YouTube Studio» من الأعلى.</div>
      ) : (
        <div className="grid md:grid-cols-2 gap-4">
          {wins.map(w => <BrowserWindowCard key={w.id} w={w} onChanged={reload} onFull={() => setFull(w.id)} />)}
        </div>
      )}
      {full && <div className="fixed inset-0 z-[90] bg-black/80 p-4 flex items-center justify-center" onClick={() => setFull(null)}>
        <div className="w-full max-w-6xl" onClick={e => e.stopPropagation()}>
          <BrowserWindowCard w={wins.find(x => x.id === full)} onChanged={reload} onFull={() => setFull(null)} big />
        </div>
      </div>}

      <div>
        <h3 className="text-xs font-bold uppercase tracking-widest text-ink-dim mb-3">ملخص المنصات (7 أيام)</h3>
        <div className="grid md:grid-cols-3 gap-3">
          {Object.entries(ADS_PLATFORM_META).map(([k, pm]) => {
            const accs = accounts.filter(a => a.platform === k);
            const live = campaigns.filter(c => c.platform === k && c.external_campaign_id);
            const bp = (dash?.by_platform || []).find(x => x.platform === k) || {};
            return (
              <div key={k} className="card-soft rounded-xl p-3 text-xs flex items-center gap-3">
                <span className={`w-2.5 h-2.5 rounded-full ${accs.length ? 'bg-green-500' : 'bg-gray-300'}`}></span>
                <b style={{ color: pm.color }}>{pm.short}</b>
                <span className="text-ink-muted">{accs.length} حساب · {live.length} حملة منشورة · إنفاق {fmtN(bp.spend || 0)} · CTR {fmtN(bp.ctr || 0)}%</span>
                <a href={pm.manager} target="_blank" rel="noopener" className="mr-auto underline text-ink-dim">↗</a>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function BrowserWindowCard({ w, onChanged, onFull, big }) {
  const [state, setState] = useState(w.state || {});
  const [running, setRunning] = useState(w.running);
  const [url, setUrl] = useState(w.state?.url || w.last_url || w.url || '');
  const [text, setText] = useState('');
  const [tick, setTick] = useState(Date.now());
  const [busy, setBusy] = useState(false);
  const [live, setLive] = useState(true);
  const imgRef = useRef(null);

  useEffect(() => { setRunning(w.running); if (w.state) setState(w.state); }, [w.running, w.state?.url]);
  // تحديث اللقطة كل 1.2 ثانية
  useEffect(() => {
    if (!running || !live) return;
    const id = setInterval(() => setTick(Date.now()), big ? 900 : 1200);
    return () => clearInterval(id);
  }, [running, live, big]);
  // تحديث الحالة (URL/العنوان) كل 4 ثوانٍ
  useEffect(() => {
    if (!running) return;
    const id = setInterval(() => api(`/browser/windows/${w.id}/state`).then(r => { setState(r.state || {}); setRunning(r.running); }).catch(() => {}), 4000);
    return () => clearInterval(id);
  }, [running, w.id]);
  useEffect(() => { if (state?.url && document.activeElement?.dataset?.urlbar !== String(w.id)) setUrl(state.url); }, [state?.url]);

  const act = async (body) => {
    setBusy(true);
    try { const r = await api(`/browser/windows/${w.id}/act`, { method: 'POST', body: JSON.stringify(body) }); setState(r.state || {}); setRunning(true); setTick(Date.now()); }
    catch (e) { setState(s => ({ ...s, error: adsErrMsg(e) })); }
    setBusy(false);
  };
  const onClickShot = (e) => {
    const r = imgRef.current.getBoundingClientRect();
    act({ action: 'click', x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height, button: e.button === 2 ? 'right' : 'left' });
  };
  const onDbl = (e) => { const r = imgRef.current.getBoundingClientRect(); act({ action: 'click', x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height, count: 2 }); };
  const onWheel = (e) => { e.preventDefault(); act({ action: 'scroll', dy: Math.sign(e.deltaY) * 400 }); };
  const start = async () => { setBusy(true); try { const r = await api(`/browser/windows/${w.id}/start`, { method: 'POST' }); setRunning(true); setState(r.state || {}); } catch (e) { setState(s => ({ ...s, error: adsErrMsg(e) })); } setBusy(false); };
  const stop = async () => { setBusy(true); try { await api(`/browser/windows/${w.id}/stop`, { method: 'POST' }); setRunning(false); } catch (e) {} setBusy(false); onChanged(); };
  const del = async () => { if (!confirm('حذف النافذة؟ (ستبقى الجلسة المحفوظة إلا إذا اخترت المسح)')) return; const wipe = confirm('مسح الكوكيز وتسجيل الدخول المحفوظ أيضاً؟'); await api(`/browser/windows/${w.id}?wipe=${wipe}`, { method: 'DELETE' }); onChanged(); };
  const pm = ADS_PLATFORM_META[w.platform];
  const shotUrl = `${API_BASE}/browser/windows/${w.id}/screenshot?token=${encodeURIComponent(getToken())}&t=${tick}`;

  return (
    <div className="card-soft rounded-2xl overflow-hidden flex flex-col" style={{ borderTop: `3px solid ${pm?.color || '#999'}` }}>
      <div className="px-3 py-2 flex items-center gap-2 border-b border-line bg-surface-soft">
        <span className={`w-2 h-2 rounded-full ${running ? 'bg-green-500' : 'bg-gray-300'}`}></span>
        <span className="font-bold text-sm truncate max-w-[180px]" title={w.name}>{w.name}</span>
        <form className="flex-1 flex gap-1" onSubmit={e => { e.preventDefault(); act({ action: 'goto', url }); }}>
          <input data-urlbar={w.id} value={url} onChange={e => setUrl(e.target.value)} dir="ltr" className="flex-1 text-xs rounded-lg border border-line bg-surface px-2 py-1 font-mono" />
          <Btn size="sm" variant="primary" type="submit" disabled={busy}>اذهب</Btn>
        </form>
        <button onClick={() => act({ action: 'back' })} className="text-xs px-1.5 py-1 rounded hover:bg-paper-soft" title="رجوع">‹</button>
        <button onClick={() => act({ action: 'reload' })} className="text-xs px-1.5 py-1 rounded hover:bg-paper-soft" title="تحديث">↻</button>
        <button onClick={onFull} className="text-xs px-1.5 py-1 rounded hover:bg-paper-soft" title="تكبير">⤢</button>
        {running ? <Btn size="sm" variant="danger" onClick={stop} disabled={busy}>أوقف</Btn> : <Btn size="sm" variant="brand" onClick={start} disabled={busy}>شغّل</Btn>}
        <button onClick={del} className="text-ink-dim hover:text-red-600"><Icon name="trash" className="w-4 h-4" /></button>
      </div>
      <div className="relative bg-black" style={{ aspectRatio: '1280 / 800' }}>
        {running ? (
          <img ref={imgRef} src={shotUrl} alt="" className="w-full h-full object-contain cursor-crosshair select-none"
            onClick={onClickShot} onDoubleClick={onDbl} onContextMenu={e => { e.preventDefault(); onClickShot(e); }} onWheel={onWheel} draggable={false} />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-xs text-white/70">النافذة متوقفة — اضغط «شغّل». الجلسة المحفوظة تبقى على القرص.</div>
        )}
        {busy && <div className="absolute top-2 left-2 text-[10px] bg-black/60 text-white px-2 py-0.5 rounded">…</div>}
      </div>
      <div className="px-3 py-2 space-y-1.5 border-t border-line">
        <form className="flex gap-1" onSubmit={e => { e.preventDefault(); if (!text) return; act({ action: 'type', text, enter: true }); setText(''); }}>
          <input value={text} onChange={e => setText(e.target.value)} className="flex-1 text-xs rounded-lg border border-line bg-surface px-2 py-1" placeholder="اكتب هنا ثم «اكتب» أو Enter… (انقر الحقل في الشاشة أولاً)" />
          <Btn size="sm" variant="primary" type="submit" disabled={busy || !text}>اكتب</Btn>
          <Btn size="sm" variant="secondary" type="button" disabled={busy || !text} onClick={() => { act({ action: 'fill', text }); setText(''); }}>املأ</Btn>
          <Btn size="sm" variant="ghost" type="button" disabled={busy || !text} onClick={() => { act({ action: 'type', text, enter: false }); setText(''); }}>بلا Enter</Btn>
        </form>
        <div className="flex flex-wrap gap-1">
          {[['Enter', 'Enter'], ['Tab', 'Tab'], ['Escape', 'Esc'], ['Backspace', '⌫'], ['ArrowUp', '↑'], ['ArrowDown', '↓'], ['Control+A', 'تحديد الكل']].map(([k, l]) => (
            <button key={k} onClick={() => act({ action: 'press', key: k })} className="text-[11px] px-2 py-0.5 rounded-lg bg-paper-soft hover:bg-line">{l}</button>
          ))}
          <button onClick={() => act({ action: 'scroll', dy: -500 })} className="text-[11px] px-2 py-0.5 rounded-lg bg-paper-soft">⇧ أعلى</button>
          <button onClick={() => act({ action: 'scroll', dy: 500 })} className="text-[11px] px-2 py-0.5 rounded-lg bg-paper-soft">⇩ أسفل</button>
          <label className="text-[11px] flex items-center gap-1 mr-auto"><input type="checkbox" checked={live} onChange={e => setLive(e.target.checked)} /> بث حي</label>
        </div>
        <div className="text-[10px] text-ink-dim truncate" dir="ltr">{state?.title || ''} · {state?.url || ''}{state?.error ? ` · ⚠ ${state.error}` : ''}</div>
      </div>
    </div>
  );
}

// ============================================================
// LOGS
// ============================================================
function AdsLogs() {
  const [logs, setLogs] = useState([]);
  useEffect(() => { api('/ads/logs?limit=100').then(r => setLogs(r.logs)).catch(() => {}); }, []);
  return (
    <div className="max-w-5xl mx-auto px-6 py-8">
      <h2 className="font-display font-extrabold text-2xl mb-4">سجل الإجراءات</h2>
      <div className="card-soft rounded-2xl overflow-hidden">
        <table className="w-full text-xs">
          <thead className="bg-paper-soft text-ink-dim"><tr className="text-right"><th className="p-2">الوقت</th><th>المنصة</th><th>الإجراء</th><th>المنفّذ</th><th>الحملة</th><th>التفاصيل</th></tr></thead>
          <tbody>
            {logs.length === 0 && <tr><td colSpan={6} className="p-6 text-center text-ink-dim">لا يوجد سجل بعد</td></tr>}
            {logs.map(l => (
              <tr key={l.id} className={`border-t border-line ${!l.success ? 'bg-red-50' : ''}`}>
                <td className="p-2 whitespace-nowrap">{fmtD(l.created_at)}</td><td>{l.platform ? ADS_PLATFORM_META[l.platform]?.short : '—'}</td>
                <td className="font-bold">{l.action}</td><td>{l.actor === 'autopilot' ? 'الطيار الآلي' : l.actor === 'scheduler' ? 'المجدول' : 'أنت'}</td>
                <td>{l.campaign_id || '—'}</td><td className="text-ink-dim truncate max-w-xs" dir="ltr">{JSON.stringify(l.details)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}