import { CheckCircle2, XCircle } from 'lucide-react'; import { toast } from 'sonner'; import { useEffect, useRef } from 'react'; import { Head, Link, usePage } from '@inertiajs/react'; import SiteNav from '@/Components/Navigation/SiteNav'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { Card, CardContent } from '@/Components/ui/card'; import { EmptyState } from '@/Components/ui/empty-state'; import { usePolling } from '@/hooks/usePolling'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackProductEvent } from '@/lib/analytics'; import { AI_JOB_VIEWED, ERROR_DISPLAYED } from '@/lib/event-catalog'; import { formatDateTime } from '@/lib/format'; import { couldnt } from '@/lib/messages'; import type { PageProps, SiteBasic } from '@/types'; interface Draft { id: number; content: string; token_usage: { prompt_tokens: number; completion_tokens: number } | null; created_at: string; recommendation: { id: number; page_url: string; title: string; action_type: string; } | null; } interface AiJob { id: number; status: string; model: string; provider: string; total_recommendations: number; completed_recommendations: number; failed_recommendations: number; progress_percent: number; error: string | null; created_at: string; completed_at: string | null; } interface Props { site: SiteBasic; aiJob: AiJob; drafts: Draft[]; } function statusVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' { switch (status) { case 'completed': return 'default'; case 'processing': case 'pending': return 'secondary'; case 'failed': return 'destructive'; default: return 'outline'; } } export default function JobShow({ site, aiJob, drafts }: Props) { const { polling_interval_ms } = usePage().props; const isActive = ['pending', 'processing'].includes(aiJob.status); useEffect(() => { trackProductEvent(AI_JOB_VIEWED, { job_id: aiJob.id, site_id: String(site.id) }); }, [aiJob.id, site.id]); usePolling(isActive, polling_interval_ms, ['aiJob', 'drafts']); // Celebrate when draft generation completes or notify on failure const prevStatusRef = useRef(aiJob.status); useEffect(() => { const prev = prevStatusRef.current; const current = aiJob.status; if (prev && prev !== current) { if (['pending', 'processing'].includes(prev) && current === 'completed') { const count = aiJob.completed_recommendations; toast.success(`${count} draft${count === 1 ? '' : 's'} generated.`); } else if (['pending', 'processing'].includes(prev) && current === 'failed') { toast.error(couldnt('generate', 'drafts')); trackProductEvent(ERROR_DISPLAYED, { error_type: 'draft_generation_failed', site_id: String(site.id), }); } } prevStatusRef.current = current; }, [aiJob.status, aiJob.completed_recommendations, site.id]); return ( <>

AI Job #{aiJob.id}

{aiJob.status}
Model
{aiJob.model}
Progress
{aiJob.completed_recommendations}/{aiJob.total_recommendations}
Started
{formatDateTime(aiJob.created_at)}
{aiJob.completed_at && (
Completed
{formatDateTime(aiJob.completed_at)}
)}
{aiJob.error &&

{aiJob.error}

} {isActive && (
)}
{/* Outcome summary for completed jobs */} {aiJob.status === 'completed' && ( 0 ? 'border-amber-200 dark:border-amber-800' : 'border-green-200 dark:border-green-800'}`} >
{aiJob.failed_recommendations > 0 ? ( ) : ( )}

{aiJob.failed_recommendations === 0 ? `All ${aiJob.total_recommendations} drafts generated successfully` : `${aiJob.completed_recommendations} of ${aiJob.total_recommendations} drafts generated — ${aiJob.failed_recommendations} failed`}

{drafts.length > 0 ? 'Review the drafts below, then publish them to WordPress or edit in the content editor.' : 'No drafts were produced. Check the error details above.'}

{drafts.length > 0 && (
)}
)} {/* Outcome summary for failed jobs */} {aiJob.status === 'failed' && (

Draft generation failed

{drafts.length > 0 ? `${drafts.length} draft${drafts.length !== 1 ? 's were' : ' was'} generated before the job failed. You can still review ${drafts.length === 1 ? 'it' : 'them'} below.` : 'Check that your API key is valid and has sufficient quota, then try again from the recommendations page.'}

)}

Generated Drafts

{drafts.length === 0 ? ( ) : (
{drafts.map((draft) => (

{draft.recommendation?.title ?? `Draft #${draft.id}`}

{draft.recommendation && (

{draft.recommendation.page_url}

)}
{draft.token_usage && ( {draft.token_usage.prompt_tokens + draft.token_usage.completion_tokens} tokens )}
))}
)}
); } JobShow.layout = (page: React.ReactNode) => {page};