import { Search } from 'lucide-react'; import { useEffect } from 'react'; import { Head, Link } from '@inertiajs/react'; import SiteNav from '@/Components/Navigation/SiteNav'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { EmptyState } from '@/Components/ui/empty-state'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackProductEvent } from '@/lib/analytics'; import { CANNIBALIZATION_VIEWED } from '@/lib/event-catalog'; import { formatDateOnly, formatNumber, formatPercent } from '@/lib/format'; import type { SiteBasic } from '@/types'; interface CannibalizationRun { id: number; status: string; completed_at: string | null; } interface CannibalizationCase { id: number; query_cluster: string; competing_pages_count: number; lead_volatility_score: number; impact_score: number; confidence_score: number; primary_page_url: string | null; status: string; lifecycle_status: string; dismissed_at: string | null; created_at: string; } interface Page { id: number; page_url: string; is_primary: boolean; impressions_share: number; clicks_share: number; avg_position: number; metrics_summary: Record | null; } interface Query { id: number; query: string; total_impressions: number; total_clicks: number; pages_count: number; lead_page_switches: number; } interface Feedback { id: number; reason: string; notes: string | null; created_at: string; } interface Props { site: SiteBasic; cannibalizationRun: CannibalizationRun; case: CannibalizationCase; pages: Page[]; queries: Query[]; feedback: Feedback[]; } function statusBadge(status: string) { const variants: Record = { open: 'default', closed: 'secondary', dismissed: 'outline', }; return variants[status] || 'default'; } function impactBadge(score: number) { if (score >= 70) return { variant: 'destructive' as const, label: 'High Impact' }; if (score >= 40) return { variant: 'default' as const, label: 'Medium Impact' }; return { variant: 'secondary' as const, label: 'Low Impact' }; } function volatilityBadge(score: number) { if (score >= 0.7) return { variant: 'destructive' as const, label: 'High Volatility' }; if (score >= 0.4) return { variant: 'default' as const, label: 'Medium Volatility' }; return { variant: 'secondary' as const, label: 'Low Volatility' }; } export default function CannibalizationShow({ site, cannibalizationRun: _cannibalizationRun, case: cannibalizationCase, pages, queries, feedback, }: Props) { const impact = impactBadge(cannibalizationCase.impact_score); const volatility = volatilityBadge(cannibalizationCase.lead_volatility_score); useEffect(() => { trackProductEvent(CANNIBALIZATION_VIEWED, { site_id: String(site.id), is_detail_view: true }); }, [site.id, cannibalizationCase.id]); return ( <>

{cannibalizationCase.query_cluster}

{cannibalizationCase.status} {impact.label} {volatility.label}

{cannibalizationCase.competing_pages_count} competing pages

Case Overview

Impact Score
{cannibalizationCase.impact_score}/100
Confidence Score
{formatPercent(cannibalizationCase.confidence_score / 100)}
Volatility Score
{cannibalizationCase.lead_volatility_score.toFixed(2)}
Competing Pages
{cannibalizationCase.competing_pages_count}
{cannibalizationCase.primary_page_url && (
Primary Page
{cannibalizationCase.primary_page_url}
)}

Queries ({queries.length})

{queries.length === 0 ? ( ) : (
{queries.slice(0, 5).map((query) => (
{query.query}
{formatNumber(query.total_clicks)} clicks, {query.pages_count} pages,{' '} {query.lead_page_switches} switches
))} {queries.length > 5 && (

+{queries.length - 5} more queries

)}
)}

Competing Pages

Page URL Impressions Share Clicks Share Avg Position Primary {pages.map((page) => ( {page.page_url} {formatPercent(page.impressions_share)} {formatPercent(page.clicks_share)} {page.avg_position.toFixed(1)} {page.is_primary && ( Primary )} ))}
{feedback.length > 0 && (

Feedback

{feedback.map((fb) => (
{fb.reason} {formatDateOnly(fb.created_at)}
{fb.notes &&

{fb.notes}

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