"use client"; /* eslint-disable @next/next/no-img-element */ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Check, Film, Images, Loader2, Sparkles, Trash2, UploadCloud } from "lucide-react"; import { useRouter } from "next/navigation"; import type { Theme, ThemeCategory } from "@/data/themes"; type CarouselOption = { id: number; name: string; }; const CAROUSEL_OPTIONS: CarouselOption[] = [ { id: 1, name: "Simple tweet cards monocolor" }, { id: 2, name: "Quote cards monocolor paper" }, { id: 3, name: "Tweet cards with photo background" }, { id: 4, name: "Quote cards with highlight on paper" }, ]; type UploadPreview = { file: File; url: string; type: "image" | "video"; }; type FeedbackState = | { type: "success"; text: string } | { type: "error"; text: string } | { type: "info"; text: string } | null; type GenerationFormProps = { themes: ThemeCategory[]; }; const MAX_UPLOADS = 5; export default function GenerationForm({ themes }: GenerationFormProps) { const router = useRouter(); const [message, setMessage] = useState(""); const [themeSearch, setThemeSearch] = useState(""); const [selectedTheme, setSelectedTheme] = useState(null); const [themeDropdownOpen, setThemeDropdownOpen] = useState(false); const [isVideo, setIsVideo] = useState(false); const [isCarousel, setIsCarousel] = useState(false); const [carouselCount, setCarouselCount] = useState("8"); const [carouselDropdownOpen, setCarouselDropdownOpen] = useState(false); const [selectedCarouselOption, setSelectedCarouselOption] = useState(null); const [uploads, setUploads] = useState([]); const [selectedUploadIndex, setSelectedUploadIndex] = useState(0); const [feedback, setFeedback] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const pollRef = useRef(null); const uploadsRef = useRef([]); const filteredThemes = useMemo(() => { if (!themeSearch.trim()) { return themes; } const term = themeSearch.toLowerCase(); return themes .map((category) => ({ category: category.category, themes: category.themes.filter((theme) => theme.name.toLowerCase().includes(term)), })) .filter((category) => category.themes.length > 0); }, [themeSearch, themes]); const resetUploads = useCallback(() => { setUploads((prev) => { prev.forEach((item) => URL.revokeObjectURL(item.url)); return []; }); setSelectedUploadIndex(0); }, []); useEffect(() => { uploadsRef.current = uploads; }, [uploads]); useEffect(() => { const checkStatus = async () => { try { const response = await fetch("/api/check-webhook-status", { method: "GET", }); if (response.ok) { const data = await response.json(); if (data?.is_processing) { startPolling(); } } } catch (error) { console.error("Initial status check error", error); } }; checkStatus(); return () => { if (pollRef.current) { clearInterval(pollRef.current); } // Only revoke object URLs on unmount; avoid state updates here to prevent render loops uploadsRef.current.forEach((item) => URL.revokeObjectURL(item.url)); }; }, []); const startPolling = useCallback(() => { if (pollRef.current) { clearInterval(pollRef.current); } setIsProcessing(true); pollRef.current = setInterval(async () => { try { const response = await fetch("/api/check-webhook-status", { method: "GET", }); if (!response.ok) { return; } const data = await response.json(); if (!data?.is_processing) { setIsProcessing(false); if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; } setFeedback({ type: "success", text: "Webhook finished. Updating the post list." }); if (typeof window !== "undefined") { window.dispatchEvent(new Event("topics:refresh")); } } } catch (error) { console.error("Webhook status check error", error); } }, 2000); }, [router]); const handleFilesChange = (event: React.ChangeEvent) => { const files = Array.from(event.target.files ?? []); if (!files.length) return; const remainingSlots = MAX_UPLOADS - uploads.length; if (remainingSlots <= 0) { setFeedback({ type: "info", text: `You can upload at most ${MAX_UPLOADS} media items.` }); event.target.value = ""; return; } const nextFiles = files.slice(0, remainingSlots).map((file) => ({ file, url: URL.createObjectURL(file), type: file.type.startsWith("video") ? "video" : "image", })); setUploads((prev) => [...prev, ...nextFiles]); event.target.value = ""; }; const removeUpload = (index: number) => { setUploads((prev) => { if (!prev[index]) return prev; URL.revokeObjectURL(prev[index].url); const clone = [...prev]; clone.splice(index, 1); if (selectedUploadIndex >= clone.length) { setSelectedUploadIndex(Math.max(0, clone.length - 1)); } return clone; }); }; const handleGenerate = async () => { if (!message.trim() && uploads.length === 0) { setFeedback({ type: "error", text: "Please add a prompt or at least one media file." }); return; } setFeedback(null); setIsSubmitting(true); const formData = new FormData(); formData.append("message", message); formData.append("isVideo", String(isVideo)); formData.append("showNumberInput", String(isCarousel)); if (selectedTheme) { formData.append("themePrompt", selectedTheme.prompt); formData.append("theme_name", selectedTheme.name); } if (isCarousel) { formData.append("numberValue", carouselCount || "0"); if (selectedCarouselOption) { formData.append("carouselOption", JSON.stringify(selectedCarouselOption)); } } uploads.forEach((item) => { formData.append("photos[]", item.file); }); try { const response = await fetch("/api/send-webhook", { method: "POST", body: formData, }); const data = await response.json().catch(() => ({})); if (!response.ok || data?.success === false) { if (response.status === 429) { setFeedback({ type: "info", text: data?.message || "Previous webhook run is still in progress." }); startPolling(); } else { throw new Error(data?.message || "Something went wrong while sending the webhook."); } } else { setFeedback({ type: "success", text: "Webhook triggered, generation started." }); setMessage(""); setSelectedTheme(null); setThemeSearch(""); setIsVideo(false); setIsCarousel(false); setCarouselCount("8"); setSelectedCarouselOption(null); resetUploads(); startPolling(); } } catch (error) { console.error("Webhook submission error", error); const text = error instanceof Error ? error.message : "An unexpected error occurred."; setFeedback({ type: "error", text }); setIsProcessing(false); } finally { setIsSubmitting(false); } }; const currentPreview = uploads[selectedUploadIndex]; return (

Workflow

Create new content

Write a prompt, pick a theme, optionally upload media, then hit Generate to trigger the webhook pipeline.

{isProcessing ? (
Webhook in progress
) : null}