import { Spinner } from '@/components/ui/spinner'; import AppLayout from '@/layouts/app-layout'; import { useAxios } from '@/plugins/AxiosContext'; import { type BreadcrumbItem } from '@/types'; import { Head } from '@inertiajs/react'; import { useEffect, useState } from 'react'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: route('admin.dashboard'), }, { title: 'Background Generation', href: route('admin.background-generation'), }, ]; export default function BackgroundGeneration({ pendingMedia }) { const [prompt, setPrompt] = useState(pendingMedia?.prompt || ''); const [isGenerating, setIsGenerating] = useState(false); const [generatedImageUrl, setGeneratedImageUrl] = useState(null); const [isSaving, setIsSaving] = useState(false); const [isDeleting, setIsDeleting] = useState(false); const axios = useAxios(); // Auto-assemble prompt when pendingMedia is available useEffect(() => { if (pendingMedia && pendingMedia.location_name && pendingMedia.list_type && pendingMedia.area) { const assembledPrompt = `${pendingMedia.location_name}, ${pendingMedia.list_type} ${pendingMedia.area}, wide angle shot, low angle view, sharp focus, cinematic composition`.toLowerCase(); setPrompt(assembledPrompt); } }, [pendingMedia]); // If no pending media, show completed state if (!pendingMedia) { return (

All Done!

There are no pending media records to process. All background generation tasks have been completed.

); } const handleGenerate = async () => { if (!prompt.trim()) { alert('Please enter a prompt'); return; } setIsGenerating(true); setGeneratedImageUrl(null); try { const response = await axios.post(route('admin.background-generation.generate'), { prompt: prompt, media_id: pendingMedia.id, }); if (response.data.success) { setGeneratedImageUrl(response.data.image_url); } else { alert(response.data.error || 'Generation failed'); } } catch (error) { console.error('Generation error:', error); alert('Failed to generate image'); } finally { setIsGenerating(false); } }; const handleSave = async () => { if (!generatedImageUrl) { alert('No generated image to save'); return; } setIsSaving(true); try { const response = await axios.post(route('admin.background-generation.save'), { media_id: pendingMedia.id, image_url: generatedImageUrl, prompt: prompt, }); if (response.data.success) { // Reload the page to start the cycle again window.location.reload(); } else { alert(response.data.error || 'Failed to save'); } } catch (error) { console.error('Save error:', error); alert('Failed to save image'); } finally { setIsSaving(false); } }; const handleDelete = async () => { if (!confirm('Are you sure you want to delete this pending media? This action cannot be undone.')) { return; } setIsDeleting(true); try { const response = await axios.post(route('admin.background-generation.delete', pendingMedia.id)); if (response.data.success) { // Reload the page to start the cycle again or show completed state window.location.reload(); } else { alert(response.data.error || 'Failed to delete'); } } catch (error) { console.error('Delete error:', error); alert('Failed to delete media'); } finally { setIsDeleting(false); } }; return (
{/* Left Column - Controls */}
{/* Pending Media Info */}

Pending Media Information

ID: {pendingMedia.id}
List Type: {pendingMedia.list_type}
Area: {pendingMedia.area}
Location: {pendingMedia.location_name}
Status: {pendingMedia.status}
Created: {new Date(pendingMedia.created_at).toLocaleDateString()}
{/* Generate Section */}

Generate Background Image