function MainComponent() { const [step, setStep] = useState(1); const [streamingMessage, setStreamingMessage] = useState(""); const [messages, setMessages] = useState([]); const [loading, setLoading] = useState(false); const [errors, setErrors] = useState({}); const [showSuccess, setShowSuccess] = useState(false); const [campaignData, setCampaignData] = useState({ name: "", objective: "", startDate: "", endDate: "", audience: "", location: "", budget: "", dailyBudget: "" }); const validateStep = ()=>{ const newErrors = {}; if (step === 1) { if (!campaignData.name) newErrors.name = "Required"; if (!campaignData.objective) newErrors.objective = "Required"; if (!campaignData.startDate) newErrors.startDate = "Required"; if (!campaignData.endDate) newErrors.endDate = "Required"; if (campaignData.startDate && campaignData.endDate && new Date(campaignData.startDate) > new Date(campaignData.endDate)) { newErrors.endDate = "End date must be after start date"; } } else if (step === 2) { if (!campaignData.audience) newErrors.audience = "Required"; if (!campaignData.location) newErrors.location = "Required"; } else if (step === 3) { if (!campaignData.budget) newErrors.budget = "Required"; if (!campaignData.dailyBudget) newErrors.dailyBudget = "Required"; if (Number(campaignData.dailyBudget) > Number(campaignData.budget)) { newErrors.dailyBudget = "Cannot exceed total budget"; } } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleFinish = useCallback((message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setLoading(false); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const getAiSuggestions = async ()=>{ setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Based on the following campaign details, provide optimization suggestions: Campaign Name: ${campaignData.name} Objective: ${campaignData.objective} Target Audience: ${campaignData.audience} Location: ${campaignData.location} Budget: ${campaignData.budget}` } ], stream: true }) }); handleStreamResponse(response); }; const handleInputChange = (e)=>{ setErrors({}); setCampaignData({ ...campaignData, [e.target.name]: e.target.value }); }; const nextStep = ()=>{ if (validateStep()) { setStep(step + 1); } }; const prevStep = ()=>setStep(step - 1); const handleLaunch = ()=>{ if (validateStep()) { setShowSuccess(true); setTimeout(()=>setShowSuccess(false), 3000); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Create Campaign"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, [ 1, 2, 3 ].map((num)=>/*#__PURE__*/ React.createElement("div", { key: num, className: `flex items-center ${step >= num ? "text-blue-600" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-8 h-8 rounded-full flex items-center justify-center border-2 ${step >= num ? "border-blue-600 bg-blue-600 text-white" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, num), /*#__PURE__*/ React.createElement("div", { className: "ml-2 font-medium", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, num === 1 ? "Details" : num === 2 ? "Targeting" : "Budget"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-6", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, step === 1 && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, "Campaign Name ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 135, columnNumber: 33 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: campaignData.name, onChange: handleInputChange, className: `mt-1 block w-full rounded-md border ${errors.name ? "border-red-500" : "border-gray-300"} px-3 py-2 focus:border-blue-500 focus:outline-none`, __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }), errors.name && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-500", __source: { fileName: "", lineNumber: 145, columnNumber: 19 }, __self: this }, errors.name)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, "Campaign Objective ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 150, columnNumber: 38 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("select", { name: "objective", value: campaignData.objective, onChange: handleInputChange, className: `mt-1 block w-full rounded-md border ${errors.objective ? "border-red-500" : "border-gray-300"} px-3 py-2 focus:border-blue-500 focus:outline-none`, __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 158, columnNumber: 19 }, __self: this }, "Select Objective"), /*#__PURE__*/ React.createElement("option", { value: "awareness", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, "Brand Awareness"), /*#__PURE__*/ React.createElement("option", { value: "traffic", __source: { fileName: "", lineNumber: 160, columnNumber: 19 }, __self: this }, "Website Traffic"), /*#__PURE__*/ React.createElement("option", { value: "conversions", __source: { fileName: "", lineNumber: 161, columnNumber: 19 }, __self: this }, "Conversions")), errors.objective && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-500", __source: { fileName: "", lineNumber: 164, columnNumber: 19 }, __self: this }, errors.objective)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, "Start Date ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 171, columnNumber: 30 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "date", name: "startDate", value: campaignData.startDate, onChange: handleInputChange, min: new Date().toISOString().split("T")[0], className: `mt-1 block w-full rounded-md border ${errors.startDate ? "border-red-500" : "border-gray-300"} px-3 py-2 focus:border-blue-500 focus:outline-none`, __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }), errors.startDate && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-500", __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }, errors.startDate)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "End Date ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 189, columnNumber: 28 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "date", name: "endDate", value: campaignData.endDate, onChange: handleInputChange, min: campaignData.startDate || new Date().toISOString().split("T")[0], className: `mt-1 block w-full rounded-md border ${errors.endDate ? "border-red-500" : "border-gray-300"} px-3 py-2 focus:border-blue-500 focus:outline-none`, __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }), errors.endDate && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-500", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, errors.endDate))), step === 2 && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, "Target Audience"), /*#__PURE__*/ React.createElement("textarea", { name: "audience", value: campaignData.audience, onChange: handleInputChange, className: "mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none", rows: "4", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, "Location Targeting"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", value: campaignData.location, onChange: handleInputChange, className: "mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }))), step === 3 && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 239, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, "Total Budget ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 242, columnNumber: 32 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "number", name: "budget", value: campaignData.budget, onChange: handleInputChange, min: "0", className: `mt-1 block w-full rounded-md border ${errors.budget ? "border-red-500" : "border-gray-300"} px-3 py-2 focus:border-blue-500 focus:outline-none`, __source: { fileName: "", lineNumber: 244, columnNumber: 17 }, __self: this }), errors.budget && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-500", __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }, errors.budget)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 256, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }, "Daily Budget ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 258, columnNumber: 32 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "number", name: "dailyBudget", value: campaignData.dailyBudget, onChange: handleInputChange, min: "0", className: `mt-1 block w-full rounded-md border ${errors.dailyBudget ? "border-red-500" : "border-gray-300"} px-3 py-2 focus:border-blue-500 focus:outline-none`, __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }), errors.dailyBudget && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-500", __source: { fileName: "", lineNumber: 269, columnNumber: 19 }, __self: this }, errors.dailyBudget)), /*#__PURE__*/ React.createElement("button", { onClick: getAiSuggestions, disabled: loading, className: `w-full ${loading ? "bg-blue-400" : "bg-blue-600 hover:bg-blue-700"} text-white px-4 py-2 rounded-md`, __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, loading ? "Getting Suggestions..." : "Get AI Optimization Suggestions"), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-50 rounded-md animate-fade-in", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, streamingMessage)), showSuccess && /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-md shadow-lg", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this }, "Campaign created successfully!")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-between", __source: { fileName: "", lineNumber: 296, columnNumber: 11 }, __self: this }, step > 1 && /*#__PURE__*/ React.createElement("button", { onClick: prevStep, className: "bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300", __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, "Previous"), step < 3 ? /*#__PURE__*/ React.createElement("button", { onClick: nextStep, className: "ml-auto bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700", __source: { fileName: "", lineNumber: 306, columnNumber: 15 }, __self: this }, "Next") : /*#__PURE__*/ React.createElement("button", { onClick: handleLaunch, className: "ml-auto bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700", __source: { fileName: "", lineNumber: 313, columnNumber: 15 }, __self: this }, "Launch Campaign"))))); }