import { ThumbsDown, ThumbsUp } from 'lucide-react'; import { useEffect, useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import PublishDraftModal from '@/Components/Ai/PublishDraftModal'; import SiteNav from '@/Components/Navigation/SiteNav'; import DraftPreview from '@/Components/Recommendations/DraftPreview'; import { Alert, AlertDescription } from '@/Components/ui/alert'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { Textarea } from '@/Components/ui/textarea'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackProductEvent } from '@/lib/analytics'; import { formatDateTime } from '@/lib/format'; import { sanitizeHtml } from '@/lib/sanitize'; import type { SiteBasic } from '@/types'; interface PublishLog { id: number; publish_type: string; status: string; created_at: string; error: string | null; } interface Draft { id: number; content: string; token_usage: { prompt_tokens: number; completion_tokens: number } | null; created_at: string; publish_status?: string; publish_type?: string; published_at?: string; publish_error?: string; quality_rating?: number | null; aiJob: { id: number; model: string; }; recommendation: { id: number; page_url: string; title: string; action_type: string; wp_post_content: string | null; wp_post_id?: string; wp_modified_at?: string | null; } | null; publish_logs?: PublishLog[]; } interface Props { site: SiteBasic; draft: Draft; } function publishStatusVariant( status: string, ): 'default' | 'secondary' | 'destructive' | 'outline' | 'success' { switch (status) { case 'published': return 'success'; case 'sending': case 'queued': return 'secondary'; case 'failed': return 'destructive'; case 'not_published': default: return 'outline'; } } function publishStatusLabel(status: string): string { switch (status) { case 'not_published': return 'Not Published'; case 'queued': return 'Queued'; case 'sending': return 'Sending'; case 'published': return 'Published'; case 'failed': return 'Failed'; default: return status; } } export default function DraftShow({ site, draft }: Props) { const [isPublishModalOpen, setIsPublishModalOpen] = useState(false); const [rating, setRating] = useState(draft.quality_rating ?? null); const [feedback, setFeedback] = useState(''); const [showFeedbackInput, setShowFeedbackInput] = useState(false); const [isSubmittingRating, setIsSubmittingRating] = useState(false); useEffect(() => { trackProductEvent('draft_viewed', { draft_id: draft.id, site_id: String(site.id) }); }, [draft.id, site.id]); const submitRating = (value: 1 | -1) => { setRating(value); setIsSubmittingRating(true); router.post( route('ai-drafts.rate', [site.id, draft.id]), { quality_rating: value, quality_feedback: feedback || null }, { preserveScroll: true, onSuccess: () => setShowFeedbackInput(false), onFinish: () => setIsSubmittingRating(false), }, ); }; const originalContent = draft.recommendation?.wp_post_content ?? ''; const publishStatus = draft.publish_status ?? 'not_published'; const canPublish = draft.recommendation?.wp_post_id && publishStatus !== 'sending' && publishStatus !== 'queued'; return ( <>
{draft.recommendation && ( )}
{canPublish && ( )}

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

{publishStatusLabel(publishStatus)}
{draft.recommendation && (

{draft.recommendation.page_url}

)} {draft.publish_error && publishStatus === 'failed' && ( Publishing Failed: {draft.publish_error} )} {originalContent ? ( ) : (

AI Draft

{draft.token_usage && (

{draft.token_usage.prompt_tokens + draft.token_usage.completion_tokens} tokens • {draft.aiJob.model}

)}
)} {/* Draft quality rating */}

Rate this Draft

{rating !== null && !isSubmittingRating && ( {rating === 1 ? 'Thanks for the feedback!' : 'Sorry to hear that.'} )}
{showFeedbackInput && rating === -1 && (