"use client"; import { useState } from "react"; import { Bell, ShieldAlert, Check, RefreshCw, Send, AlertTriangle, Eye, ArrowRight, History, Smartphone, Sparkles, Wand2 } from "lucide-react"; import { Button } from "@/components/ui/button"; interface Campaign { id: number; title: string; message: string; url: string; image?: string | null; isTest: boolean; sentCount: number; failedCount: number; prunedCount: number; createdAt: string; } interface NotificationPanelProps { subscribersCount: number; campaignsHistory: Campaign[]; } export default function NotificationPanel({ subscribersCount: initialSubscribersCount, campaignsHistory: initialCampaigns, }: NotificationPanelProps) { const [subscribersCount, setSubscribersCount] = useState(initialSubscribersCount); const [campaigns, setCampaigns] = useState(initialCampaigns); const [title, setTitle] = useState(""); const [message, setMessage] = useState(""); const [url, setUrl] = useState(""); const [image, setImage] = useState(""); const [isPending, setIsPending] = useState(false); const [isTestPending, setIsTestPending] = useState(false); const [successMsg, setSuccessMsg] = useState(""); const [errorMsg, setErrorMsg] = useState(""); const [showConfirm, setShowConfirm] = useState(false); const [aiPrompt, setAiPrompt] = useState(""); const [aiTone, setAiTone] = useState("exciting"); const [aiIdeas, setAiIdeas] = useState([]); const [isAiPending, setIsAiPending] = useState(false); const [isDemoMode, setIsDemoMode] = useState(false); const handleGenerateAiCopy = async () => { if (!aiPrompt.trim()) return; setIsAiPending(true); setErrorMsg(""); setSuccessMsg(""); try { const res = await fetch("/api/admin/notifications/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: aiPrompt, tone: aiTone }), }); const data = await res.json(); if (!res.ok || !data.success) { throw new Error(data.error || "Failed to generate ideas"); } setAiIdeas(data.ideas || []); setIsDemoMode(!!data.isDemo); } catch (e: any) { setErrorMsg("AI Assistant: " + e.message); } finally { setIsAiPending(false); } }; const fetchStats = async () => { try { const res = await fetch("/api/admin/notifications/stats"); if (res.ok) { const data = await res.json(); setSubscribersCount(data.subscribersCount); setCampaigns(data.history); } } catch (e) { console.error("Failed to refresh stats", e); } }; const handleSend = async (isTest: boolean) => { if (!title.trim() || !message.trim()) { setErrorMsg("Title and Message body are required."); return; } setErrorMsg(""); setSuccessMsg(""); if (isTest) { setIsTestPending(true); } else { setIsPending(true); setShowConfirm(false); } try { const res = await fetch("/api/admin/notifications/send", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title, message, url: url || "/", image: image || undefined, isTest, }), }); const data = await res.json(); if (!res.ok || !data.success) { throw new Error(data.error || "Failed to dispatch notifications"); } setSuccessMsg( isTest ? "Test push sent to the most recent subscriber device successfully!" : `Campaign broadcasted! ${data.sentCount} sent successfully. Pruned ${data.prunedCount} dead devices.` ); if (!isTest) { // Clear form setTitle(""); setMessage(""); setUrl(""); setImage(""); } // Refresh statistics and history log await fetchStats(); } catch (err: any) { setErrorMsg(err.message || "Something went wrong while sending alerts."); } finally { setIsPending(false); setIsTestPending(false); } }; return (
{/* Page Header */}

Push Alerts Control Center

Compose, test, and broadcast push alerts to engage PWA application users.

{/* Grid: Stats and Action Forms */}
{/* Left 2 Cols: Form and Preview */}
{/* NaariAI Notification Co-pilot */}

NaariAI Push Co-pilot

{aiIdeas.length > 0 && ( isDemoMode ? ( 💡 Template Mode ) : ( ✨ Live AI Active ) )}

Describe what kind of alert you want to create (e.g., "early bird discount for Ladakh"). The AI will generate 3 options of high-conversion notification copy matched to active trip URLs.

setAiPrompt(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleGenerateAiCopy()} className="w-full h-11 px-4 text-sm bg-white border border-[#F1D9D0] rounded-2xl focus:outline-none focus:border-[#FF4A7D] transition" />
{/* Generated Copy Ideas */} {aiIdeas.length > 0 && (

Select a draft to apply to composer:

{aiIdeas.map((idea, index) => (
{idea.title}

{idea.message}

{idea.url}
))}
)}
{/* Notification Form */}

Compose New Alert Campaign

{successMsg && (
{successMsg}
)} {errorMsg && (
{errorMsg}
)}
setTitle(e.target.value)} maxLength={60} className="w-full h-11 px-4 text-sm bg-[#FFF8F0] border border-[#F1D9D0] rounded-2xl focus:outline-none focus:border-[#FF4A7D] transition" />