import { FileText, Lightbulb, Tag } from 'lucide-react'; import { useEffect, useState } from 'react'; import { Head, Link, useForm } from '@inertiajs/react'; import SiteNav from '@/Components/Navigation/SiteNav'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/Components/ui/dialog'; import { EmptyState } from '@/Components/ui/empty-state'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import { Textarea } from '@/Components/ui/textarea'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackEvent } from '@/lib/analytics'; import { TOPIC_CLUSTERS_DETAIL_VIEWED } from '@/lib/event-catalog'; import { formatNumber } from '@/lib/format'; import type { SiteBasic } from '@/types'; interface TopicCluster { id: number; name: string; total_demand: number; coverage_percentage: number; hub_page_url: string | null; metadata: Record | null; } interface ClusterMember { id: number; member_type: string; member_value: string; clicks: number; impressions: number; position: number; is_hub: boolean; } interface TopicEntity { id: number; entity_text: string; entity_type: string; demand_volume: number; coverage_strength: number; source: string; } interface GapSuggestion { id: number; suggestion_type: string; missing_entity_id: number | null; missing_entity_text: string | null; target_page_url: string | null; impact_score: number; confidence_score: number; effort_score: number; risk_score: number; title: string; reasoning: string; evidence: Record | null; status: string; } interface Props { site: SiteBasic; cluster: TopicCluster; members: ClusterMember[]; entities: TopicEntity[]; gapSuggestions: GapSuggestion[]; } function suggestionTypeLabel(type: string): string { switch (type) { case 'expand_existing': return 'Expand Existing'; case 'create_new': return 'Create New'; default: return type; } } function statusBadgeVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' { switch (status) { case 'accepted': return 'default'; case 'pending': return 'secondary'; case 'rejected': return 'destructive'; default: return 'outline'; } } export default function TopicClusterShow({ site, cluster, members, entities, gapSuggestions, }: Props) { useEffect(() => { trackEvent(TOPIC_CLUSTERS_DETAIL_VIEWED, { site_id: String(site.id) }); }, [site.id]); const pageMembers = members.filter((m) => m.member_type === 'page'); const queryMembers = members.filter((m) => m.member_type === 'query'); const [isGenerateBriefModalOpen, setIsGenerateBriefModalOpen] = useState(false); const { data, setData, post, processing, reset, errors } = useForm({ target_keyword: cluster.name || '', custom_instructions: '', source_type: 'TopicCluster', source_id: cluster.id, }); const handleGenerateBrief = (e: React.FormEvent) => { e.preventDefault(); post(route('content-briefs.store', site.id), { onSuccess: () => { setIsGenerateBriefModalOpen(false); reset(); }, }); }; return ( <>

{cluster.name}

{cluster.hub_page_url && (

Hub Page: {cluster.hub_page_url}

)}

Cluster Overview

Total Demand
{formatNumber(cluster.total_demand)}
Coverage
{cluster.coverage_percentage.toFixed(1)}%
Pages
{pageMembers.length}
Queries
{queryMembers.length}

Content Intelligence

Entities
{entities.length}
Gap Suggestions
{gapSuggestions.length}
Status
= 70 ? 'default' : 'secondary'}> {cluster.coverage_percentage >= 70 ? 'High Coverage' : cluster.coverage_percentage < 30 ? 'Low Coverage' : 'Medium Coverage'}
{/* Entities Section */}

Topic Entities

{entities.length === 0 ? ( ) : (
{entities.map((entity) => (
{entity.entity_text} {entity.entity_type}
Demand: {formatNumber(entity.demand_volume)} Coverage: {entity.coverage_strength.toFixed(1)}% Source: {entity.source}
{entity.coverage_strength < 30 ? ( Low Coverage ) : entity.coverage_strength >= 70 ? ( High Coverage ) : ( Medium Coverage )}
))}
)}
{/* Gap Suggestions Section */}

Gap Suggestions

{gapSuggestions.length === 0 ? ( ) : (
{gapSuggestions.map((suggestion) => (

{suggestion.title}

{suggestionTypeLabel(suggestion.suggestion_type)} {suggestion.status}
{suggestion.missing_entity_text && (

Missing Entity: {suggestion.missing_entity_text}

)} {suggestion.target_page_url && (

Target Page: {suggestion.target_page_url}

)}

{suggestion.reasoning}

Impact: {Math.round(suggestion.impact_score)}/100
Confidence: {Math.round(suggestion.confidence_score * 100)}%
Effort: {(suggestion.effort_score * 100).toFixed(0)}%
Risk: {(suggestion.risk_score * 100).toFixed(0)}%
))}
)}
{/* Members Section */}

Cluster Members

{pageMembers.length > 0 && (

Pages ({pageMembers.length})

{pageMembers.map((member) => (
{member.member_value} {member.is_hub && ( Hub )}
Clicks: {formatNumber(member.clicks)} Impressions: {formatNumber(member.impressions)} Position: {member.position.toFixed(1)}
))}
)} {queryMembers.length > 0 && (

Queries ({queryMembers.length})

{queryMembers.map((member) => (
{member.member_value}
Clicks: {formatNumber(member.clicks)} Impressions: {formatNumber(member.impressions)} Position: {member.position.toFixed(1)}
))}
)} {pageMembers.length === 0 && queryMembers.length === 0 && ( )}
{/* Generate Brief Modal */} Generate Content Brief Create a comprehensive content brief for this topic cluster using AI.
setData('target_keyword', e.target.value)} placeholder="Enter target keyword or topic" required className="mt-1" /> {errors.target_keyword && (

{errors.target_keyword}

)}