import { useEffect, useState } from 'react'; import { Head, Link } from '@inertiajs/react'; import SiteNav from '@/Components/Navigation/SiteNav'; import GenerateDraftButton from '@/Components/Recommendations/GenerateDraftButton'; import StatusBadge from '@/Components/Recommendations/StatusBadge'; import StatusChangeModal from '@/Components/Recommendations/StatusChangeModal'; import MetricDelta from '@/Components/Shared/MetricDelta'; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/Components/ui/breadcrumb'; import { Button } from '@/Components/ui/button'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackProductEvent } from '@/lib/analytics'; import type { SiteBasic } from '@/types'; const ACTION_LABELS: Record = { content_rewrite: 'AI Draft', noindex: 'Remove from Index', meta_tag_optimization: 'Meta Tag Optimisation', internal_linking: 'Internal Linking', thin_content: 'Thin Content', }; function actionLabel(type: string): string { return ACTION_LABELS[type] ?? type; } interface Finding { id: number; page_url: string; delta_percent: number; direction: string; metric_before: number; metric_after: number; segment_type: string; supporting_data: Record | null; } interface Recommendation { id: number; page_url: string; action_type: string; impact_score: number; confidence_score: number; title: string; reasoning: string; evidence: { clicks_before: number; clicks_after: number; delta_percent: number; position_before?: number; position_after?: number; }; lifecycle_status: string; has_draft: boolean; latest_draft_id: number | null; } interface AnalysisRun { id: number; status: string; before_start: string; before_end: string; after_start: string; after_end: string; } interface Props { site: SiteBasic; recommendation: Recommendation; finding: Finding | null; analysis_run: AnalysisRun; ai_available?: boolean; } export default function RecommendationShow({ site, recommendation, finding, analysis_run: analysisRun, ai_available: aiAvailable = false, }: Props) { const [statusModalOpen, setStatusModalOpen] = useState(false); const evidence = recommendation.evidence; useEffect(() => { trackProductEvent('recommendation_detail_viewed', { recommendation_id: recommendation.id, action_type: recommendation.action_type, site_id: String(site.id), }); // intentional: fire-once page-view event on mount; props are stable Inertia values // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( <>

{recommendation.title}

{actionLabel(recommendation.action_type)}

{recommendation.page_url}

{recommendation.action_type === 'content_rewrite' && ( )}

Reasoning

{recommendation.reasoning}

Impact: {recommendation.impact_score}/100

Confidence: {Math.round(recommendation.confidence_score * 100)}%

Evidence

Clicks (before): {evidence.clicks_before}
Clicks (after): {evidence.clicks_after}
Change
Position (before): {evidence.position_before}
Position (after): {evidence.position_after}

{finding && (

Finding Details

Metric Before: {finding.metric_before}
Metric After: {finding.metric_after}
Delta
Direction: {finding.direction}

)} {recommendation.has_draft && recommendation.latest_draft_id && (

)}

); } RecommendationShow.layout = (page: React.ReactNode) => {page};