"use client"; import { useState, useEffect } from "react"; import { useRouter } from "next/navigation"; import { createClient } from "@/lib/supabase/client"; import { motion, AnimatePresence } from "framer-motion"; import { Bot, Rocket, Key, SquarePen, ChevronLeft, ChevronRight, Loader2, Check, Sparkles, Settings, Globe, Users, ArrowRight } from "lucide-react"; import { AI_MODELS, type AIProvider } from "@/lib/ai/models"; import { cn, formatNumber } from "@/lib/utils"; import { usePlatform, type PlatformType } from "@/lib/context/PlatformContext"; interface FormData { businessName: string; businessDescription: string; targetAudience: string; campaignType: string; budget: number; targetLocations: string; language: string; goal: string; aiProvider: AIProvider; aiModel: string; } const initialForm: FormData = { businessName: "", businessDescription: "", targetAudience: "", campaignType: "search", budget: 1000, targetLocations: "المملكة العربية السعودية", language: "ar", goal: "conversions", aiProvider: "gemini", aiModel: "gemini-1.5-flash", }; interface AIResult { keywords?: { keyword: string; matchType: string; searchVolume: string; intent: string; suggestedBid: number }[]; audiences?: { interest_name: string; age_range: string; gender: string; estimated_reach: number; relevance_score: number }[]; negativeKeywords?: string[]; headlines?: { text: string; charCount: number; type?: string }[]; descriptions?: { text: string; charCount: number }[]; primaryText?: string; ctaButton?: string; imageUrl?: string; } // Campaign types mapped dynamically to each network const platformCampaignTypes: Record = { all: [ { id: "search", label: "إعلان بحث موحد", icon: "🔍", desc: "إعلانات جوجل وبينج النصية" }, { id: "conversion", label: "حملة تحويلات اجتماعية", icon: "🎯", desc: "زيادة مبيعات فيسبوك وتيك توك" }, ], google: [ { id: "search", label: "حملة بحث", icon: "🔍", desc: "إعلانات نصية على محرك البحث" }, { id: "pmax", label: "الأداء الأقصى PMax", icon: "⚡", desc: "تغطية كامل قنوات Google بالـ AI" }, { id: "video", label: "إعلان فيديو", icon: "🎬", desc: "زيادة المشاهدات على YouTube" }, { id: "shopping", label: "حملة تسوق", icon: "🛍️", desc: "ترويج منتجات المتاجر الإلكترونية" }, ], meta: [ { id: "conversion", label: "حملة تحويلات", icon: "🎯", desc: "زيادة مبيعات Facebook و Instagram" }, { id: "engagement", label: "زيادة التفاعل", icon: "❤️", desc: "الحصول على إعجابات ومشاركات للمنشورات" }, { id: "traffic", label: "زيارات الموقع", icon: "🌐", desc: "جلب زيارات كثيفة لصفحة الهبوط" }, ], tiktok: [ { id: "spark", label: "Spark Ads فيديو", icon: "🎵", desc: "ترويج فيديوهات صناع المحتوى والـ Trends" }, { id: "traffic", label: "زيارات الموقع", icon: "🌐", desc: "توجيه المتصفحين لمتجرك مباشرة" }, { id: "engagement", label: "تفاعلات ومتابعين", icon: "❤️", desc: "توسيع نطاق المتابعة والانتشار" }, ], microsoft: [ { id: "search", label: "Bing بحث نصي", icon: "🔍", desc: "إعلانات الكلمات المفتاحية على Bing" }, { id: "shopping", label: "تسوق Bing", icon: "🛍️", desc: "عرض كتالوج المنتجات على شبكة MSN" }, ], linkedin: [ { id: "lead_gen", label: "جذب عملاء B2B", icon: "👔", desc: "نماذج جمع بيانات الشركات والمدراء" }, { id: "traffic", label: "زيارات مهنية", icon: "🌐", desc: "جذب النخبة وأصحاب القرار لموقعك" }, ], x: [ { id: "promoted_post", label: "تغريدة ترويجية", icon: "🐦", desc: "زيادة الوصول والتفاعل مع تغريداتك" }, { id: "traffic", label: "نقرات الرابط", icon: "🌐", desc: "توجيه جماهير X لمتجرك أو مدونتك" }, ], snapchat: [ { id: "swipe_up", label: "سحب شاشة قصة", icon: "👻", desc: "إعلانات القصص السريعة لزيادة المبيعات" }, { id: "traffic", label: "زيارات فلاتر", icon: "🌐", desc: "توجيه مستخدمي سناب لصفحات الهبوط" }, ], }; export default function AIGeneratorPage() { const { currentPlatform, config, setPlatform } = usePlatform(); const isSearch = currentPlatform === "google" || currentPlatform === "microsoft" || currentPlatform === "all"; const router = useRouter(); const supabase = createClient(); const [currentStep, setCurrentStep] = useState(1); const [form, setForm] = useState({ ...initialForm, campaignType: platformCampaignTypes[currentPlatform]?.[0]?.id || "search" }); const [loading, setLoading] = useState(false); const [saving, setSaving] = useState(false); const [user, setUser] = useState(null); const [result, setResult] = useState(null); const [activeResultTab, setActiveResultTab] = useState<"keywords" | "ads">("keywords"); const [launchSuccess, setLaunchSuccess] = useState(null); // Load 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 in AI generator, using offline developer mode:", err); handleFallback(); }); }, []); // Keep type aligned if user changes platform context in sidebar useEffect(() => { const firstType = platformCampaignTypes[currentPlatform]?.[0]?.id || "search"; setForm((prev) => (prev.campaignType === firstType ? prev : { ...prev, campaignType: firstType })); }, [currentPlatform]); async function handleSaveAndLaunchCampaign() { if (!result) return; setSaving(true); try { const campaignName = `${form.businessName} - حملة AI`; if (currentPlatform === "google") { const response = await fetch("/api/google-ads/create-campaign", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ campaignName, campaignType: form.campaignType, budgetAmount: form.budget, biddingStrategy: "MAXIMIZE_CONVERSIONS", keywords: result.keywords?.map(k => k.keyword) || [], headlines: result.headlines?.map(h => h.text) || [], descriptions: result.descriptions?.map(d => d.text) || [], finalUrl: "https://example.com", targetLocations: [form.targetLocations], }) }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || "حدث خطأ أثناء إطلاق الحملة على Google Ads."); } setLaunchSuccess(data); return; } 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"; const userId = user?.id || "00000000-0000-0000-0000-000000000000"; if (isPlaceholder) { const newCampaignId = "c_" + Date.now() + "_" + Math.floor(Math.random() * 1000); // 1. Save campaign const localCampaignsStr = localStorage.getItem("local_campaigns"); const existingCampaigns = localCampaignsStr ? JSON.parse(localCampaignsStr) : []; const newCampaign = { id: newCampaignId, name: campaignName, platform: currentPlatform, type: form.campaignType, status: "active", budget_amount: form.budget, budget_type: "daily", currency: "USD", ai_generated: true, clicks: 0, impressions: 0, conversions: 0, cost: 0, created_at: new Date().toISOString() }; localStorage.setItem("local_campaigns", JSON.stringify([newCampaign, ...existingCampaigns])); // 2. Save keywords / audiences const localKeywordsStr = localStorage.getItem("local_keywords"); const existingKeywords = localKeywordsStr ? JSON.parse(localKeywordsStr) : []; let newKeywords: any[] = []; if (isSearch) { newKeywords = (result.keywords || []).map((kw) => ({ id: "k_" + Math.random().toString(36).substr(2, 9), campaign_id: newCampaignId, keyword: kw.keyword, match_type: kw.matchType || "phrase", status: "active", max_cpc: kw.suggestedBid || 1.5, quality_score: 10, impressions: 0, clicks: 0, conversions: 0, cost: 0, ai_suggested: true, platform: currentPlatform })); } else { newKeywords = (result.audiences || []).map((aud) => ({ id: "a_" + Math.random().toString(36).substr(2, 9), campaign_id: newCampaignId, keyword: aud.interest_name, match_type: `${aud.age_range || "18-45"} | ${aud.gender || "all"}`, status: "active", max_cpc: 1.0, quality_score: aud.relevance_score || 9, impressions: aud.estimated_reach || 1200000, clicks: 0, conversions: 0, cost: 0, ai_suggested: true, platform: currentPlatform })); } localStorage.setItem("local_keywords", JSON.stringify([...newKeywords, ...existingKeywords])); // 3. Save ad creatives const localAdsStr = localStorage.getItem("local_ad_creatives"); const existingAds = localAdsStr ? JSON.parse(localAdsStr) : []; const newAd = { id: "ad_" + Math.random().toString(36).substr(2, 9), campaign_id: newCampaignId, platform: currentPlatform, type: isSearch ? "responsive_search" : "responsive_display", headlines: result.headlines?.map(h => ({ text: h.text })) || [], descriptions: result.descriptions?.map(d => ({ text: d.text })) || [], final_url: isSearch ? "https://google.com" : "", display_url: isSearch ? "google.com" : "", path1: "", path2: "", primary_text: result.primaryText || "", cta_button: result.ctaButton || "تسوّق الآن", image_url: result.imageUrl || "", impressions: 0, clicks: 0, conversions: 0 }; localStorage.setItem("local_ad_creatives", JSON.stringify([newAd, ...existingAds])); // 4. Save AI generation history log const localGenerationsStr = localStorage.getItem("local_ai_generations"); const existingGenerations = localGenerationsStr ? JSON.parse(localGenerationsStr) : []; const newGen = { id: "gen_" + Math.random().toString(36).substr(2, 9), user_id: userId, campaign_id: newCampaignId, provider: form.aiProvider, model: form.aiModel, type: "campaign", prompt: form.businessDescription, result: result, created_at: new Date().toISOString() }; localStorage.setItem("local_ai_generations", JSON.stringify([newGen, ...existingGenerations])); } else { // Save to Supabase database // 1. Ensure ad account exists let adAccountId; const { data: accounts, error: accountsError } = await supabase .from("ad_accounts") .select("id") .limit(1); if (accountsError) throw accountsError; if (accounts && accounts.length > 0) { adAccountId = accounts[0].id; } else { const { data: newAcc, error: accErr } = await supabase .from("ad_accounts") .insert({ user_id: userId, name: "الحساب التجاري الرئيسي", }) .select("id") .single(); if (accErr || !newAcc) throw accErr || new Error("Failed to create ad account"); adAccountId = newAcc.id; } // 2. Insert Campaign const { data: campaign, error: campError } = await supabase .from("campaigns") .insert({ user_id: userId, ad_account_id: adAccountId, name: campaignName, platform: currentPlatform, type: form.campaignType, status: "active", budget_amount: form.budget, budget_type: "daily", currency: "USD", ai_generated: true, ai_provider: form.aiProvider, ai_model: form.aiModel, target_locations: [form.targetLocations], target_languages: ["ar"], }) .select("id") .single(); if (campError || !campaign) throw campError || new Error("Failed to create campaign in database"); // 3. Insert Keywords / Audiences if (isSearch) { const kwsToInsert = (result.keywords || []).map((kw) => ({ campaign_id: campaign.id, user_id: userId, keyword: kw.keyword, match_type: kw.matchType || "phrase", status: "active", max_cpc: kw.suggestedBid || 1.5, quality_score: 10, ai_suggested: true })); const { error: kwErr } = await supabase.from("keywords").insert(kwsToInsert); if (kwErr) throw kwErr; } else { const audsToInsert = (result.audiences || []).map((aud) => ({ campaign_id: campaign.id, user_id: userId, keyword: aud.interest_name, match_type: `${aud.age_range || "18-45"} | ${aud.gender || "all"}`, status: "active", max_cpc: 1.0, quality_score: aud.relevance_score || 9, impressions: aud.estimated_reach || 1200000, ai_suggested: true })); const { error: audErr } = await supabase.from("keywords").insert(audsToInsert); if (audErr) throw audErr; } // 4. Insert Ad Creative const creativeInsert = { campaign_id: campaign.id, user_id: userId, type: isSearch ? "responsive_search" : "responsive_display", status: "active", headlines: result.headlines?.map(h => ({ text: h.text })) || [], descriptions: result.descriptions?.map(d => ({ text: d.text })) || [], final_url: isSearch ? "https://google.com" : "", display_url: isSearch ? "google.com" : "", images: isSearch ? {} : { primary_text: result.primaryText || "", cta_button: result.ctaButton || "تسوّق الآن", image_url: result.imageUrl || "" }, ai_generated: true, ai_provider: form.aiProvider, ai_model: form.aiModel, }; const { error: adErr } = await supabase.from("ad_creatives").insert(creativeInsert); if (adErr) throw adErr; // 5. Log to ai_generations const { error: genErr } = await supabase.from("ai_generations").insert({ user_id: userId, campaign_id: campaign.id, provider: form.aiProvider, model: form.aiModel, type: "campaign", prompt: form.businessDescription, result: result }); if (genErr) throw genErr; } router.push("/dashboard/campaigns"); } catch (err: any) { console.error("Failed to save campaign:", err); alert(err.message || "حدث خطأ أثناء حفظ الحملة. يرجى المحاولة مرة أخرى."); } finally { setSaving(false); } } const availableModels = AI_MODELS.filter((m) => m.provider === form.aiProvider); const campaignTypes = platformCampaignTypes[currentPlatform] || platformCampaignTypes.all; // Step names dynamically adapt to search vs social const steps = [ { id: 1, title: "معلومات العمل", icon: Settings }, { id: 2, title: "اختيار AI", icon: Bot }, { id: 3, title: isSearch ? "الكلمات المفتاحية" : "استهداف الجماهير", icon: isSearch ? Key : Users }, { id: 4, title: "نصوص الإعلان", icon: SquarePen }, { id: 5, title: "الإطلاق بالـ AI", icon: Rocket }, ]; function updateForm(key: keyof FormData, value: string | number) { setForm((prev) => ({ ...prev, [key]: value })); if (key === "aiProvider") { const firstModel = AI_MODELS.find((m) => m.provider === (value as AIProvider)); if (firstModel) setForm((prev) => ({ ...prev, aiProvider: value as AIProvider, aiModel: firstModel.id })); } } async function generateWithAI() { setLoading(true); setResult(null); try { const res = await fetch("/api/ai/generate-campaign", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ provider: form.aiProvider, model: form.aiModel, businessName: form.businessName, businessDescription: form.businessDescription, targetAudience: form.targetAudience, campaignType: form.campaignType, budget: form.budget, targetLocations: [form.targetLocations], language: form.language, goal: form.goal, platform: currentPlatform, // pass active platform context }), }); const data = await res.json(); // If it's a social platform, map keywords array to audiences structure if (!isSearch && data.keywords) { const mappedAuds = data.keywords.map((k: any, idx: number) => ({ interest_name: k.keyword, age_range: "18-45", gender: "all", estimated_reach: Math.floor(800000 + Math.random() * 2000000), relevance_score: 9 - (idx % 3), })); setResult({ audiences: mappedAuds, primaryText: data.adGroups?.[0]?.name ? `✨ خصومات كبرى على ${form.businessName}! ${form.businessDescription}. تسوق أرقى المنتجات الحصرية الآن بنصف السعر وشحن مجاني وسريع.` : "شاهد العروض الفاخرة المتاحة اليوم فقط! شحن مجاني ودفع عند الاستلام بالمملكة.", headlines: [{ text: data.headlines?.[0]?.text || `شراء عطور ${form.businessName} الفاخرة`, charCount: 30 }], ctaButton: "تسوّق الآن", imageUrl: "https://images.unsplash.com/photo-1547887537-6158d64c35b3?auto=format&fit=crop&q=80&w=600", }); } else { setResult(data); } setCurrentStep(5); } catch (err) { console.error("AI generation failed:", err); // Fallback mocks if (!isSearch) { setResult({ audiences: [ { interest_name: `المهتمين بعطور وتجميل ${form.businessName}`, age_range: "18-35", gender: "all", estimated_reach: 1200000, relevance_score: 9 }, { interest_name: `سلوك تسوق إلكتروني نشط بالسعودية`, age_range: "22-45", gender: "all", estimated_reach: 3400000, relevance_score: 8 }, ], primaryText: `✨ عرض حصري ومميز من ${form.businessName}! احصل على منتجاتنا الفاخرة اليوم بخصم 50% مع شحن مجاني تماماً ودفع آمن عند الاستلام. تسوق الآن 👇`, headlines: [{ text: `${form.businessName} - عطور ملوكية فاخرة`, charCount: 28 }], ctaButton: "تسوّق الآن", imageUrl: "https://images.unsplash.com/photo-1547887537-6158d64c35b3?auto=format&fit=crop&q=80&w=600" }); } else { setResult({ keywords: [ { keyword: `شراء عطورات ${form.businessName}`, matchType: "phrase", searchVolume: "high", intent: "purchase", suggestedBid: 1.2 }, { keyword: `أفضل عود وبخور بالسعودية`, matchType: "exact", searchVolume: "high", intent: "purchase", suggestedBid: 2.1 } ], headlines: [{ text: `عطور ${form.businessName} الفاخرة | خصم 50%`, charCount: 30 }], descriptions: [{ text: `تسوّق أفخم العطور والروائح الشرقية والفرنسية الأصلية. شحن سريع ومجاني للطلبات.`, charCount: 84 }] }); } setCurrentStep(5); } finally { setLoading(false); } } return (
{/* Header */}

منشئ حملات الـ AI - {config.name}

بناء وتوليد وتصميم استراتيجيات الحملات الإعلانية فائقة الدقة لـ {config.name} بالذكاء الاصطناعي

{currentPlatform !== "all" && ( )}
{launchSuccess ? (

تم إطلاق الحملة بنجاح! 🎉

{launchSuccess.message}

اسم الحملة: {form.businessName} - حملة AI
معرّف الحملة (Google ID): {launchSuccess.data.campaignId || "حملة تجريبية"}
طريقة البناء: {launchSuccess.mode === "live" ? "إطلاق مباشر حقيقي" : "محاكاة (وضع التطوير)"}
العناصر المضافة: {launchSuccess.data.keywordsCount} كلمات مفتاحية + إعلان نصي
فتح في لوحة Google Ads
) : ( <> {/* Progress Steps */}
{steps.map((step, i) => (
{i < steps.length - 1 && (
)}
))}
{/* Step Content */} {/* Step 1: Business Info */} {currentStep === 1 && (

معلومات الفكرة والنشاط التجاري

updateForm("businessName", e.target.value)} placeholder="مثال: قصر العود الملكي" className="w-full bg-[#161b27] border border-gray-700 focus:border-purple-500 text-white rounded-xl py-3 px-4 text-xs outline-none transition-colors" />