)} {/* Header */}

{platform.name}

{isConnected ? connection!.account_name || "متصل ونشط" : "غير متصل"}

{platform.logo}

{/* Description */}

{platform.description}

{/* Last sync info */} {isConnected && connection!.updated_at && (

آخر مزامنة:{" "} {new Date(connection!.updated_at).toLocaleDateString("ar-SA", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit", })}

)} {/* Actions */}

{isConnected ? ( <> {platform.syncUrl && ( )} ) : ( ربط الحساب )}

); } // ─── Main Page ──────────────────────────────────────────────────────────────── export default function IntegrationsPage() { const [connections, setConnections] = useState([]); const [loading, setLoading] = useState(true); const [syncingId, setSyncingId] = useState(null); const [disconnectingId, setDisconnectingId] = useState(null); const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null); const supabase = createClient(); // ── Show toast from URL params (OAuth callbacks) ── useEffect(() => { const params = new URLSearchParams(window.location.search); const success = params.get("success"); const error = params.get("error"); const successMessages: Record = { google: "✅ تم ربط حساب Google Ads بنجاح!", meta: "✅ تم ربط حساب Meta Ads بنجاح!", microsoft: "✅ تم ربط حساب Microsoft Ads بنجاح!", tiktok: "✅ تم ربط حساب TikTok Ads بنجاح!", linkedin: "✅ تم ربط حساب LinkedIn Ads بنجاح!", x: "✅ تم ربط حساب X Ads بنجاح!", snapchat: "✅ تم ربط حساب Snapchat Ads بنجاح!", }; const errorMessages: Record = { google_denied: "❌ تم رفض إذن Google Ads", meta_denied: "❌ تم رفض إذن Meta Ads", microsoft_denied: "❌ تم رفض إذن Microsoft Ads", tiktok_denied: "❌ تم رفض إذن TikTok Ads", linkedin_denied: "❌ تم رفض إذن LinkedIn Ads", x_denied: "❌ تم رفض إذن X Ads", snapchat_denied: "❌ تم رفض إذن Snapchat Ads", }; if (success && successMessages[success]) { setToast({ message: successMessages[success], type: "success" }); window.history.replaceState({}, "", window.location.pathname); } else if (error) { const msg = errorMessages[error] || `❌ حدث خطأ: ${error}`; setToast({ message: msg, type: "error" }); window.history.replaceState({}, "", window.location.pathname); } }, []); // ── Load connections from Supabase ── const fetchConnections = useCallback(async () => { setLoading(true); try { const { data, error } = await supabase .from("platform_connections") .select("id, platform, account_name, status, updated_at") .eq("status", "active"); if (!error && data) { setConnections(data as PlatformConnection[]); } } catch (e) { console.error("Error fetching connections:", e); } finally { setLoading(false); } }, [supabase]); useEffect(() => { fetchConnections(); // Real-time subscription const channel = supabase .channel("platform_connections_realtime") .on( "postgres_changes", { event: "*", schema: "public", table: "platform_connections" }, () => fetchConnections() ) .subscribe(); return () => { supabase.removeChannel(channel); }; }, [fetchConnections, supabase]); // ── Disconnect handler ── async function handleDisconnect(platformId: string, connectionId: string) { if (!confirm(`هل أنت متأكد من فصل هذه المنصة؟ ستحتاج إلى إعادة ربطها للمزامنة.`)) return; setDisconnectingId(platformId); try { await supabase .from("platform_connections") .update({ status: "inactive", updated_at: new Date().toISOString() }) .eq("id", connectionId); setToast({ message: "تم فصل المنصة بنجاح.", type: "success" }); fetchConnections(); } catch { setToast({ message: "فشل فصل المنصة. حاول مجدداً.", type: "error" }); } finally { setDisconnectingId(null); } } // ── Sync handler ── async function handleSync(platform: Platform) { if (!platform.syncUrl) return; setSyncingId(platform.id); try { const res = await fetch(platform.syncUrl); const data = await res.json(); if (res.ok && data.success) { setToast({ message: data.message || "تمت المزامنة بنجاح!", type: "success" }); fetchConnections(); } else { setToast({ message: data.error || "فشلت المزامنة.", type: "error" }); } } catch { setToast({ message: "فشل الاتصال بالخادم.", type: "error" }); } finally { setSyncingId(null); } } const getConnection = (platformId: string) => connections.find((c) => c.platform === platformId); const connectedCount = connections.length; return (

{/* Header */}

التكاملات والربط

ربط حسابات الإعلانات الخاصة بك عبر OAuth الرسمي للحصول على بيانات حقيقية ومزامنة فورية.

{connectedCount} منصة مرتبطة

{/* Stats row */}

{[ { label: "منصات مرتبطة", value: connectedCount, icon: }, { label: "منصات متاحة", value: AD_PLATFORMS.length, icon: }, { label: "حالة الربط", value: connectedCount > 0 ? "نشط" : "لا يوجد", icon: connectedCount > 0 ? : }, ].map((stat) => (

{stat.icon}

{stat.value}

{stat.label}

))}

{/* Ad Platforms */}

منصات الإعلانات

OAuth 2.0 رسمي

{loading ? (

{[...Array(7)].map((_, i) => (

))}

) : (

{AD_PLATFORMS.map((p) => ( ))}

)}

{/* Analytics */}

التحليلات والتتبع

{ANALYTICS_PLATFORMS.map((p) => ( ))}

{/* Setup Guide */}

متطلبات الإعداد

لربط كل منصة، يجب إضافة متغيرات البيئة المقابلة في ملف .env.local:

{[ { platform: "Google Ads", vars: "GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_DEVELOPER_TOKEN" }, { platform: "Meta Ads", vars: "META_APP_ID, META_APP_SECRET" }, { platform: "Microsoft Ads", vars: "MICROSOFT_CLIENT_ID, MICROSOFT_CLIENT_SECRET" }, { platform: "TikTok Ads", vars: "TIKTOK_APP_ID, TIKTOK_APP_SECRET" }, { platform: "LinkedIn Ads", vars: "LINKEDIN_CLIENT_ID, LINKEDIN_CLIENT_SECRET" }, { platform: "X (Twitter) Ads", vars: "X_CLIENT_ID, X_CLIENT_SECRET" }, { platform: "Snapchat Ads", vars: "SNAPCHAT_CLIENT_ID, SNAPCHAT_CLIENT_SECRET" }, ].map((item) => (

{item.platform}

{item.vars}

))}

{/* Toast */} {toast && ( setToast(null)} /> )}

); }