import React, { useMemo } from 'react'; import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip as BarTooltip } from 'recharts'; export default function AnalyticsSection({ files }: { files: any[] }) { const stats = useMemo(() => { const total = files.length; if (!total) return { pieData: [], barData: [], summary: { total: 0, ai: 0, real: 0 } }; let aiCount = 0; let realCount = 0; let suspCount = 0; // Group by Date for Bar Chart const dateMap: Record = {}; files.forEach(f => { const resStr = (f.result || "").toUpperCase(); if (resStr.includes('AI') || resStr.includes('FAKE')) aiCount++; else if (resStr.includes('REAL') || resStr.includes('AUTHENTIC')) realCount++; else suspCount++; // Use uploaded_at if available, otherwise just use a generic 'Today' bucket for mapping const dateObj = f.uploaded_at ? new Date(f.uploaded_at) : new Date(); const dateStr = dateObj.toLocaleDateString(); dateMap[dateStr] = (dateMap[dateStr] || 0) + 1; }); const pieData = [ { name: 'AI Detected', value: aiCount, color: '#ef4444' }, { name: 'Authentic', value: realCount, color: '#22c55e' }, { name: 'Suspicious', value: suspCount, color: '#eab308' } ].filter(d => d.value > 0); // Sort dates chronologically for Bar Chart const barData = Object.keys(dateMap).sort((a,b) => new Date(a).getTime() - new Date(b).getTime()).map(k => ({ date: k, uploads: dateMap[k] })); const aiPercent = Math.round((aiCount / total) * 100); const realPercent = Math.round((realCount / total) * 100); return { pieData, barData, summary: { total, ai: aiPercent, real: realPercent } }; }, [files]); if (!files.length) return null; return (
{/* Quick Stats Column */}

Total Analyses

{stats.summary.total}

Synthetic

{stats.summary.ai}%

Authentic

{stats.summary.real}%

{/* Charts Container */}

Result Distribution

{stats.pieData.map((e, index) => )}

Upload Volume

); }