import React, { useState } from 'react'; import { BlogOutlineSection } from '../../services/blogWriterApi'; interface GroundingInsights { confidence_analysis?: { average_confidence: number; high_confidence_sources_count: number; confidence_distribution: { high: number; medium: number; low: number }; }; authority_analysis?: { average_authority_score: number; high_authority_sources: Array<{ title: string; url: string; score: number }>; }; content_relationships?: { related_concepts: string[]; content_gaps: string[]; concept_coverage_score: number; }; search_intent_insights?: { primary_intent: string; user_questions: string[]; }; } interface SourceMappingStats { total_sources_mapped: number; coverage_percentage: number; average_relevance_score: number; high_confidence_mappings: number; } interface OptimizationResults { overall_quality_score: number; improvements_made: string[]; optimization_focus: string; } interface Props { sections: BlogOutlineSection[]; groundingInsights?: GroundingInsights; sourceMappingStats?: SourceMappingStats; optimizationResults?: OptimizationResults; researchCoverage?: { sources_utilized: number; content_gaps_identified: number; competitive_advantages: string[]; }; } const EnhancedOutlineInsights: React.FC = ({ sections, groundingInsights, sourceMappingStats, optimizationResults, researchCoverage }) => { const [expandedInsights, setExpandedInsights] = useState>(new Set()); const toggleInsight = (insightType: string) => { const newExpanded = new Set(expandedInsights); if (newExpanded.has(insightType)) { newExpanded.delete(insightType); } else { newExpanded.add(insightType); } setExpandedInsights(newExpanded); }; const getConfidenceColor = (score: number) => { if (score >= 0.8) return '#4caf50'; // Green if (score >= 0.6) return '#ff9800'; // Orange return '#f44336'; // Red }; const getQualityGrade = (score: number) => { if (score >= 9) return { grade: 'A+', color: '#4caf50' }; if (score >= 8) return { grade: 'A', color: '#4caf50' }; if (score >= 7) return { grade: 'B+', color: '#8bc34a' }; if (score >= 6) return { grade: 'B', color: '#ff9800' }; if (score >= 5) return { grade: 'C', color: '#ff9800' }; return { grade: 'D', color: '#f44336' }; }; return (
{/* Header */}

🧠 Outline Intelligence & Insights

{sections.length} sections analyzed
{/* Research Coverage */} {researchCoverage && (
toggleInsight('research')} >
📊 Research Data Utilization
{expandedInsights.has('research') ? 'â–¼' : 'â–¶'}
{expandedInsights.has('research') && (
{researchCoverage.sources_utilized}
Sources Utilized
{researchCoverage.content_gaps_identified}
Content Gaps Identified
{researchCoverage.competitive_advantages.length}
Competitive Advantages
{researchCoverage.competitive_advantages.length > 0 && (
Key Advantages:
{researchCoverage.competitive_advantages.map((advantage, i) => ( {advantage} ))}
)}
)}
)} {/* Source Mapping Intelligence */} {sourceMappingStats && (
toggleInsight('mapping')} >
🔗 Source Mapping Intelligence
{expandedInsights.has('mapping') ? 'â–¼' : 'â–¶'}
{expandedInsights.has('mapping') && (
{sourceMappingStats.total_sources_mapped}
Sources Mapped
{sourceMappingStats.coverage_percentage}%
Coverage
{(sourceMappingStats.average_relevance_score * 100).toFixed(0)}%
Avg Relevance
{sourceMappingStats.high_confidence_mappings}
High Confidence
)}
)} {/* Grounding Insights */} {groundingInsights && (
toggleInsight('grounding')} >
🧠 Grounding Metadata Insights
{expandedInsights.has('grounding') ? 'â–¼' : 'â–¶'}
{expandedInsights.has('grounding') && (
{/* Confidence Analysis */} {groundingInsights.confidence_analysis && (
Confidence Analysis
{(groundingInsights.confidence_analysis.average_confidence * 100).toFixed(0)}%
Avg Confidence
{groundingInsights.confidence_analysis.high_confidence_sources_count}
High Confidence Sources
)} {/* Authority Analysis */} {groundingInsights.authority_analysis && (
Authority Analysis
{(groundingInsights.authority_analysis.average_authority_score * 100).toFixed(0)}%
Avg Authority
{groundingInsights.authority_analysis.high_authority_sources.length > 0 && (
Top Authority Sources:
{groundingInsights.authority_analysis.high_authority_sources.slice(0, 3).map((source, i) => ( {source.title.substring(0, 30)}... ))}
)}
)} {/* Content Relationships */} {groundingInsights.content_relationships && (
Content Relationships
{(groundingInsights.content_relationships.concept_coverage_score * 100).toFixed(0)}%
Concept Coverage
{groundingInsights.content_relationships.related_concepts.length > 0 && (
Related Concepts:
{groundingInsights.content_relationships.related_concepts.slice(0, 5).map((concept, i) => ( {concept} ))}
)}
)} {/* Search Intent */} {groundingInsights.search_intent_insights && (
Search Intent Analysis
{groundingInsights.search_intent_insights.primary_intent}
Primary Intent
{groundingInsights.search_intent_insights.user_questions.length > 0 && (
User Questions:
{groundingInsights.search_intent_insights.user_questions.slice(0, 3).map((question, i) => ( {question.substring(0, 40)}... ))}
)}
)}
)}
)} {/* Optimization Results */} {optimizationResults && (
toggleInsight('optimization')} >
🎯 Optimization Results
{getQualityGrade(optimizationResults.overall_quality_score).grade} {expandedInsights.has('optimization') ? 'â–¼' : 'â–¶'}
{expandedInsights.has('optimization') && (
Quality Assessment
{optimizationResults.overall_quality_score}/10
Overall Quality
{optimizationResults.optimization_focus}
Focus Area
{optimizationResults.improvements_made.length > 0 && (
Improvements Made:
    {optimizationResults.improvements_made.map((improvement, i) => (
  • {improvement}
    • ))}
)}
)}
)}
); }; export default EnhancedOutlineInsights;