"use client"; import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Megaphone, Plus, Search, Filter, Play, Pause, Trash2, ExternalLink, BarChart2, Check, AlertCircle, Loader2, Sparkles, ArrowRight, Database } from "lucide-react"; import Link from "next/link"; import { createClient } from "@/lib/supabase/client"; import { formatCurrency, formatNumber } from "@/lib/utils"; import { usePlatform, PLATFORMS, type PlatformType } from "@/lib/context/PlatformContext"; interface Campaign { id: string; name: string; platform: PlatformType; type: string; status: "active" | "paused" | "ended" | "draft"; budget_amount: number; budget_type: "daily" | "monthly"; currency: string; ai_generated: boolean; clicks: number; impressions: number; conversions: number; cost: number; created_at: string; } const mockCampaigns: Campaign[] = [ // Google Ads { id: "g1", name: "حملة البحث - منتجات العناية بالبشرة الرياض", platform: "google", type: "search", status: "active", budget_amount: 50, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 1240, impressions: 15400, conversions: 84, cost: 620, created_at: new Date(Date.now() - 7 * 24 * 3600 * 1000).toISOString(), }, { id: "g2", name: "أداء أقصى PMax - متجر العطور الرمضاني", platform: "google", type: "pmax", status: "active", budget_amount: 120, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 4820, impressions: 68900, conversions: 142, cost: 1450, created_at: new Date(Date.now() - 15 * 24 * 3600 * 1000).toISOString(), }, { id: "g3", name: "إعلان فيديو يوتيوب - تطبيق اللياقة البدنية", platform: "google", type: "video", status: "paused", budget_amount: 30, budget_type: "daily", currency: "USD", ai_generated: false, clicks: 850, impressions: 42000, conversions: 12, cost: 210, created_at: new Date(Date.now() - 3 * 24 * 3600 * 1000).toISOString(), }, // Meta Ads { id: "m1", name: "حملة التحويلات - فساتين سهرة الخليج (فيس بوك)", platform: "meta", type: "conversion", status: "active", budget_amount: 80, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 3480, impressions: 48900, conversions: 110, cost: 840, created_at: new Date(Date.now() - 5 * 24 * 3600 * 1000).toISOString(), }, { id: "m2", name: "فيديو ريلز تفاعلي - إعلان الأحذية الرياضية (إنستغرام)", platform: "meta", type: "engagement", status: "active", budget_amount: 40, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 1980, impressions: 29500, conversions: 48, cost: 410, created_at: new Date(Date.now() - 10 * 24 * 3600 * 1000).toISOString(), }, // TikTok Ads { id: "t1", name: "سيناريو الكوميديا AI - عطور المباخر الملكية", platform: "tiktok", type: "spark", status: "active", budget_amount: 100, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 6840, impressions: 98400, conversions: 154, cost: 890, created_at: new Date(Date.now() - 4 * 24 * 3600 * 1000).toISOString(), }, { id: "t2", name: "حملة زيارات الموقع - تخفيضات الأحذية الذكية", platform: "tiktok", type: "traffic", status: "paused", budget_amount: 50, budget_type: "daily", currency: "USD", ai_generated: false, clicks: 1200, impressions: 18400, conversions: 22, cost: 150, created_at: new Date(Date.now() - 8 * 24 * 3600 * 1000).toISOString(), }, // Microsoft Ads { id: "ms1", name: "Bing البحث الذكي - عقارات دبي الفاخرة", platform: "microsoft", type: "search", status: "active", budget_amount: 60, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 580, impressions: 4800, conversions: 18, cost: 210, created_at: new Date(Date.now() - 12 * 24 * 3600 * 1000).toISOString(), }, // LinkedIn Ads { id: "l1", name: "B2B جذب المدراء - استشارات تسويق الشركات", platform: "linkedin", type: "lead_gen", status: "active", budget_amount: 150, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 420, impressions: 8900, conversions: 35, cost: 540, created_at: new Date(Date.now() - 9 * 24 * 3600 * 1000).toISOString(), }, // X Ads { id: "x1", name: "تغريدة ترويجية - مؤتمر الذكاء الاصطناعي بالرياض", platform: "x", type: "promoted_post", status: "active", budget_amount: 30, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 940, impressions: 18900, conversions: 14, cost: 120, created_at: new Date(Date.now() - 2 * 24 * 3600 * 1000).toISOString(), }, // Snapchat Ads { id: "s1", name: "سحب شاشة Snapchat - تطبيق التوصيل الفوري", platform: "snapchat", type: "swipe_up", status: "active", budget_amount: 70, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 2840, impressions: 41200, conversions: 62, cost: 390, created_at: new Date(Date.now() - 6 * 24 * 3600 * 1000).toISOString(), }, ]; const campaignTypesMap: Record = { search: { label: "إعلان بحث", icon: "🔍", color: "text-blue-400 bg-blue-500/10 border-blue-500/20" }, pmax: { label: "الأداء الأقصى", icon: "⚡", color: "text-purple-400 bg-purple-500/10 border-purple-500/20" }, video: { label: "فيديو يوتيوب", icon: "🎬", color: "text-red-400 bg-red-500/10 border-red-500/20" }, shopping: { label: "إعلان تسوق", icon: "🛍️", color: "text-amber-400 bg-amber-500/10 border-amber-500/20" }, conversion: { label: "حملة تحويلات", icon: "🎯", color: "text-emerald-400 bg-emerald-500/10 border-emerald-500/20" }, engagement: { label: "حملة تفاعل", icon: "❤️", color: "text-pink-400 bg-pink-500/10 border-pink-500/20" }, spark: { label: "Spark Ads فيديو", icon: "🎵", color: "text-pink-400 bg-pink-500/10 border-pink-500/20" }, traffic: { label: "زيارات الموقع", icon: "🌐", color: "text-sky-400 bg-sky-500/10 border-sky-500/20" }, lead_gen: { label: "عملاء محتملين B2B", icon: "👔", color: "text-cyan-400 bg-cyan-500/10 border-cyan-500/20" }, promoted_post: { label: "تغريدة ترويجية", icon: "🐦", color: "text-gray-300 bg-gray-800/30 border-gray-700" }, swipe_up: { label: "سحب شاشة قصة", icon: "👻", color: "text-yellow-400 bg-yellow-500/10 border-yellow-500/20" }, }; export default function CampaignsPage() { const { currentPlatform, setPlatform, config } = usePlatform(); const [campaigns, setCampaigns] = useState([]); const [loading, setLoading] = useState(true); const [seeding, setSeeding] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [typeFilter, setTypeFilter] = useState("all"); const [actionLoading, setActionLoading] = useState(null); const [user, setUser] = useState(null); const supabase = createClient(); // 1. Load active user useEffect(() => { const handleFallback = () => { const devUser = localStorage.getItem("local_developer_user"); if (devUser) { setUser(JSON.parse(devUser)); } else { const defaultUser = { id: "00000000-0000-0000-0000-000000000000", email: "dev@techprocode.com", user_metadata: { full_name: "المطور" } }; localStorage.setItem("local_developer_user", JSON.stringify(defaultUser)); setUser(defaultUser); } }; supabase.auth.getUser() .then(({ data: { user } }) => { if (user) { setUser(user); } else { handleFallback(); } }) .catch((err) => { console.warn("Supabase connection failed on campaigns page, using offline developer mode:", err); handleFallback(); }); }, []); // 2. Fetch campaigns useEffect(() => { if (user) fetchCampaigns(); }, [user]); // 3. Realtime Postgres listeners for absolute instantaneous updates useEffect(() => { if (!user) return; const channel = supabase .channel("realtime-campaigns-changes") .on( "postgres_changes", { event: "*", schema: "public", table: "campaigns", filter: `user_id=eq.${user.id}` }, (payload) => { console.log("Realtime Postgres update received:", payload); fetchCampaigns(); } ) .subscribe(); return () => { supabase.removeChannel(channel); }; }, [user]); async function fetchCampaigns() { if (!user) { setLoading(false); return; } setLoading(true); try { const isPlaceholder = !process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL.includes("placeholder") || process.env.NEXT_PUBLIC_SUPABASE_URL === "your_supabase_project_url"; if (isPlaceholder) { const local = localStorage.getItem("local_campaigns"); if (local) { setCampaigns(JSON.parse(local)); setLoading(false); return; } setCampaigns([]); setLoading(false); return; } const { data, error } = await supabase .from("campaigns") .select("*") .order("created_at", { ascending: false }); if (error) throw error; if (data && data.length > 0) { const mapped: Campaign[] = data.map((c) => ({ id: c.id, name: c.name, platform: (c.platform || "google") as PlatformType, type: c.type || "search", status: c.status || "active", budget_amount: Number(c.budget_amount) || 0, budget_type: c.budget_type || "daily", currency: c.currency || "USD", ai_generated: c.ai_generated || false, clicks: Number(c.clicks) || 0, impressions: Number(c.impressions) || 0, conversions: Number(c.conversions) || 0, cost: Number(c.cost) || 0, created_at: c.created_at, })); setCampaigns(mapped); } else { setCampaigns([]); } } catch (err) { console.error("Error fetching campaigns, using local fallback:", err); const local = localStorage.getItem("local_campaigns"); if (local) { setCampaigns(JSON.parse(local)); } else { setCampaigns([]); } } finally { setLoading(false); } } // Seeding system to generate REAL rows in PostgreSQL async function handleSeedDatabase() { if (!user) return; setSeeding(true); try { const isPlaceholder = !process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL.includes("placeholder") || process.env.NEXT_PUBLIC_SUPABASE_URL === "your_supabase_project_url"; if (isPlaceholder) { const simulated = mockCampaigns.map((c) => ({ ...c, id: c.id || Math.random().toString(), clicks: Math.floor(200 + Math.random() * 300), impressions: Math.floor(2000 + Math.random() * 5000), conversions: Math.floor(10 + Math.random() * 30), cost: Math.floor(100 + Math.random() * 400), })); localStorage.setItem("local_campaigns", JSON.stringify(simulated)); setCampaigns(simulated); setSeeding(false); return; } const adAccountName = "الحساب التجاري الرئيسي"; // Ensure an ad account exists first let adAccountId; const { data: accounts } = await supabase.from("ad_accounts").select("id").limit(1); if (accounts && accounts.length > 0) { adAccountId = accounts[0].id; } else { const { data: newAcc, error: accErr } = await supabase .from("ad_accounts") .insert({ user_id: user.id, name: adAccountName, }) .select("id") .single(); if (accErr || !newAcc) throw accErr || new Error("Failed to create ad account"); adAccountId = newAcc.id; } // Map mock campaigns to DB columns const toInsert = mockCampaigns.map((c) => ({ user_id: user.id, ad_account_id: adAccountId, name: c.name, platform: c.platform, type: c.type, status: c.status, budget_amount: c.budget_amount, budget_type: c.budget_type, currency: c.currency, ai_generated: c.ai_generated, clicks: Math.floor(200 + Math.random() * 300), impressions: Math.floor(2000 + Math.random() * 5000), conversions: Math.floor(10 + Math.random() * 30), cost: Math.floor(100 + Math.random() * 400), })); const { error } = await supabase.from("campaigns").insert(toInsert); if (error) throw error; await fetchCampaigns(); } catch (err) { console.error("Error seeding campaigns database, falling back to local storage:", err); const simulated = mockCampaigns.map((c) => ({ ...c, id: c.id || Math.random().toString(), clicks: Math.floor(200 + Math.random() * 300), impressions: Math.floor(2000 + Math.random() * 5000), conversions: Math.floor(10 + Math.random() * 30), cost: Math.floor(100 + Math.random() * 400), })); localStorage.setItem("local_campaigns", JSON.stringify(simulated)); setCampaigns(simulated); } finally { setSeeding(false); } } async function toggleStatus(campaignId: string, currentStatus: string) { setActionLoading(campaignId); const newStatus = currentStatus === "active" ? "paused" : "active"; // Update locally instantly setCampaigns((prev) => { const updated = prev.map((c) => (c.id === campaignId ? { ...c, status: newStatus as any } : c)); localStorage.setItem("local_campaigns", JSON.stringify(updated)); return updated; }); try { const isPlaceholder = !process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL.includes("placeholder") || process.env.NEXT_PUBLIC_SUPABASE_URL === "your_supabase_project_url"; if (!isPlaceholder) { await supabase .from("campaigns") .update({ status: newStatus }) .eq("id", campaignId); } } catch (err) { console.error("Error updating status in DB, kept local storage change:", err); } finally { setActionLoading(null); } } async function deleteCampaign(campaignId: string) { if (!confirm("هل أنت متأكد من حذف هذه الحملة نهائياً؟")) return; setActionLoading(campaignId); // Update locally instantly setCampaigns((prev) => { const updated = prev.filter((c) => c.id !== campaignId); localStorage.setItem("local_campaigns", JSON.stringify(updated)); return updated; }); try { const isPlaceholder = !process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL.includes("placeholder") || process.env.NEXT_PUBLIC_SUPABASE_URL === "your_supabase_project_url"; if (!isPlaceholder) { await supabase.from("campaigns").delete().eq("id", campaignId); } } catch (err) { console.error("Error deleting campaign in DB, kept local storage change:", err); } finally { setActionLoading(null); } } // Filter campaigns based on current platform and state selection const filteredCampaigns = campaigns.filter((c) => { const matchesPlatform = currentPlatform === "all" || c.platform === currentPlatform; const matchesSearch = c.name.toLowerCase().includes(searchTerm.toLowerCase()); const matchesStatus = statusFilter === "all" || c.status === statusFilter; const matchesType = typeFilter === "all" || c.type === typeFilter; return matchesPlatform && matchesSearch && matchesStatus && matchesType; }); return (
{/* Header */}
{currentPlatform !== "all" && ( )}

إدارة الحملات - {config.name}

{currentPlatform === "all" ? "تتبع وإدارة حملاتك الإعلانية المحسّنة بالذكاء الاصطناعي عبر كافة شبكات الإعلانات" : `إدارة وتعديل وإطلاق حملات ${config.name} الموجهة بدقة بالذكاء الاصطناعي` }

{campaigns.length === 0 && user && ( )} إنشاء حملة {currentPlatform === "all" ? "" : config.name} بالـ AI
{/* Filters Bar */}
{/* Search */}
setSearchTerm(e.target.value)} className="w-full bg-[#161b27] border border-gray-700/80 focus:border-emerald-500 text-white rounded-xl py-2.5 pr-10 pl-4 text-sm outline-none transition-colors" />
{/* Filters */}
الحالة:
النوع:
{/* Campaigns Table */} {loading && campaigns.length === 0 ? (

جارٍ قراءة البيانات الحية من PostgreSQL...

) : campaigns.length === 0 ? (

قاعدة البيانات خالية من السجلات

لا توجد أي حملات حقيقية في قاعدة البيانات الخاصة بك لـ {config.name}. انقر على الزر بالأعلى لكتابة وتهيئة البيانات الحية في قاعدة بياناتك فوراً!

{user && ( )}
) : (
{/* Desktop Table View */}
{filteredCampaigns.map((campaign) => { const typeInfo = campaignTypesMap[campaign.type] || { label: campaign.type, icon: "📢", color: "text-gray-400 border-gray-850" }; const platformConfig = PLATFORMS[campaign.platform]; return ( ); })}
اسم الحملة والمنصة النوع الحالة الميزانية الظهور النقرات التحويلات الإنفاق التحكم
{platformConfig?.logo || "🌐"}
{campaign.name} {currentPlatform === "all" && ( {platformConfig?.name} )}
{campaign.ai_generated && ( AI )}
{typeInfo.icon} {typeInfo.label} {campaign.status === "active" ? "نشط" : campaign.status === "paused" ? "موقف مؤقت" : campaign.status === "ended" ? "منتهية" : "مسودة"}
{formatCurrency(campaign.budget_amount)}
{campaign.budget_type === "daily" ? "يومياً" : "شهرياً"}
{formatNumber(campaign.impressions)} {formatNumber(campaign.clicks)} {formatNumber(campaign.conversions)} {formatCurrency(campaign.cost)}
{/* Mobile Card List */}
{filteredCampaigns.map((campaign) => { const typeInfo = campaignTypesMap[campaign.type] || { label: campaign.type, icon: "📢", color: "bg-gray-850" }; const platformConfig = PLATFORMS[campaign.platform]; return (
{platformConfig?.logo || "🌐"}

{campaign.name}

{campaign.ai_generated && ( AI )}
{typeInfo.icon} {typeInfo.label} {new Date(campaign.created_at).toLocaleDateString("ar-SA")}
{campaign.status === "active" ? "نشط" : "موقف"}
{/* Grid of stats */}

النقرات

{formatNumber(campaign.clicks)}

الظهور

{formatNumber(campaign.impressions)}

التحويلات

{formatNumber(campaign.conversions)}

الميزانية

{formatCurrency(campaign.budget_amount)}

إجمالي الإنفاق: {formatCurrency(campaign.cost)}
); })}
)}
); }