"use client"; import { useMemo, useState, useTransition } from "react"; import { useRouter } from "next/navigation"; import { Search, Plus, Upload, Trash2, Pencil, Mail, Users, ListPlus, X, Send, FolderPlus, UserPlus, } from "lucide-react"; import { Button } from "@/components/ui/Button"; import { Input } from "@/components/ui/Input"; import { Select } from "@/components/ui/Select"; import { Modal } from "@/components/ui/Modal"; import { Field, Label } from "@/components/ui/Card"; import { cn } from "@/lib/utils/cn"; import { swalConfirm, swalAlert } from "@/lib/utils/swal"; import { createContact, updateContact, deleteContact, bulkDeleteContacts, importContacts, createContactList, deleteContactList, addContactsToList, removeContactFromList, sendSurveyToList, } from "@/lib/actions/audience"; import type { ContactRow, ContactListRow } from "@/lib/queries/audience-queries"; interface AudienceManagerProps { initialContacts: ContactRow[]; initialLists: ContactListRow[]; invitableSurveys: { id: string; title: string }[]; } type Tab = "contacts" | "lists"; function initialsOf(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .slice(0, 2) .toUpperCase(); } function timeAgo(date: Date | string | null): string { if (!date) return "Never"; const diff = Math.floor((Date.now() - new Date(date).getTime()) / 1000); if (diff < 60) return "just now"; if (diff < 3600) return `${Math.floor(diff / 60)}m ago`; if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`; if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`; return new Date(date).toLocaleDateString(); } export function AudienceManager({ initialContacts, initialLists, invitableSurveys, }: AudienceManagerProps) { const router = useRouter(); const [tab, setTab] = useState("contacts"); const [search, setSearch] = useState(""); const [selectedIds, setSelectedIds] = useState>(new Set()); const [isPending, startTransition] = useTransition(); // Modal states const [showAddContact, setShowAddContact] = useState(false); const [editingContact, setEditingContact] = useState(null); const [showImport, setShowImport] = useState(false); const [showCreateList, setShowCreateList] = useState(false); const [showAddToList, setShowAddToList] = useState(false); const [viewingList, setViewingList] = useState(null); const [invitingList, setInvitingList] = useState(null); const contacts = initialContacts; const lists = initialLists; const filteredContacts = useMemo(() => { if (!search.trim()) return contacts; const term = search.trim().toLowerCase(); return contacts.filter( (c) => c.name.toLowerCase().includes(term) || c.email.toLowerCase().includes(term) ); }, [contacts, search]); function toggleSelect(id: string) { setSelectedIds((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); } function toggleSelectAll() { setSelectedIds((prev) => prev.size === filteredContacts.length ? new Set() : new Set(filteredContacts.map((c) => c.id)) ); } async function handleDeleteContact(contact: ContactRow) { const ok = await swalConfirm({ title: `Delete "${contact.name}"?`, text: "This will remove the contact from all lists as well.", confirmText: "Delete", danger: true, }); if (!ok) return; startTransition(async () => { const result = await deleteContact(contact.id); if (result.success) router.refresh(); else void swalAlert("Failed", result.error, "error"); }); } async function handleBulkDelete() { const ok = await swalConfirm({ title: `Delete ${selectedIds.size} contact(s)?`, text: "This action cannot be undone.", confirmText: "Delete All", danger: true, }); if (!ok) return; startTransition(async () => { const result = await bulkDeleteContacts(Array.from(selectedIds)); if (result.success) { setSelectedIds(new Set()); router.refresh(); } else { void swalAlert("Failed", result.error, "error"); } }); } async function handleDeleteList(list: ContactListRow) { const ok = await swalConfirm({ title: `Delete list "${list.name}"?`, text: "Contacts will not be deleted, only the list.", confirmText: "Delete List", danger: true, }); if (!ok) return; startTransition(async () => { const result = await deleteContactList(list.id); if (result.success) router.refresh(); else void swalAlert("Failed", result.error, "error"); }); } return (
{/* Stats */}
Total Contacts
{contacts.length}
Contact Lists
{lists.length}
Invites Sent
{contacts.reduce((sum, c) => sum + c.inviteCount, 0)}
{/* Tabs */}
{tab === "contacts" && (
{/* Toolbar */}
setSearch(e.target.value)} placeholder="Search contacts…" className="pl-8" />
{selectedIds.size > 0 && ( <> )}
{/* Table */} {filteredContacts.length === 0 ? (

{contacts.length === 0 ? "No contacts yet" : "No matches found"}

{contacts.length === 0 ? "Add contacts manually or import a list to start building your audience." : "Try a different search term."}

{contacts.length === 0 && ( )}
) : (
{filteredContacts.map((c) => ( ))}
0 } onChange={toggleSelectAll} className="h-4 w-4 rounded border-border accent-primary" /> Contact Phone Lists Last Invited Actions
toggleSelect(c.id)} className="h-4 w-4 rounded border-border accent-primary" />
{initialsOf(c.name)}
{c.name}
{c.email}
 {c.phone || "—"} {c.listIds.length} {timeAgo(c.lastInvitedAt)}
)}
)} {tab === "lists" && (
{lists.length === 0 ? (

No lists yet

Create a list to segment your contacts and send targeted survey invites.

) : (
{lists.map((list) => (

{list.name}

{list.description && (

{list.description}

)}
{list.contactCount} contact{list.contactCount !== 1 ? "s" : ""}
{list.contactCount > 0 && invitableSurveys.length === 0 && (

Publish a survey to unlock invites for this list.

)}
))}
)}
)} {/* --- Modals --- */} setShowAddContact(false)} onSaved={() => { setShowAddContact(false); router.refresh(); }} /> setEditingContact(null)} onSaved={() => { setEditingContact(null); router.refresh(); }} /> setShowImport(false)} onImported={() => { setShowImport(false); router.refresh(); }} /> setShowCreateList(false)} onCreated={() => { setShowCreateList(false); router.refresh(); }} /> setShowAddToList(false)} onAdded={() => { setShowAddToList(false); setSelectedIds(new Set()); router.refresh(); }} getSelectedIds={() => Array.from(selectedIds)} /> c.listIds.includes(viewingList.id)) : [] } onClose={() => setViewingList(null)} onChanged={() => router.refresh()} /> setInvitingList(null)} onSent={() => { setInvitingList(null); router.refresh(); }} />
); } /* ───────────────────────── Add Contact Modal ───────────────────────── */ function AddContactModal({ open, onClose, onSaved, }: { open: boolean; onClose: () => void; onSaved: () => void; }) { const [form, setForm] = useState({ name: "", email: "", phone: "", notes: "" }); const [error, setError] = useState(null); const [isPending, startTransition] = useTransition(); function handleClose() { setForm({ name: "", email: "", phone: "", notes: "" }); setError(null); onClose(); } function handleSubmit(e: React.FormEvent) { e.preventDefault(); setError(null); startTransition(async () => { const result = await createContact({ name: form.name, email: form.email, phone: form.phone || null, notes: form.notes || null, }); if (result.success) { setForm({ name: "", email: "", phone: "", notes: "" }); onSaved(); } else { setError(result.error ?? "Failed to add contact"); } }); } return (
setForm((f) => ({ ...f, name: e.target.value }))} placeholder="Jane Doe" required /> setForm((f) => ({ ...f, email: e.target.value }))} placeholder="jane@company.com" required /> setForm((f) => ({ ...f, phone: e.target.value }))} placeholder="+1 555 000 0000" />