Analytics.jsx

import React, { useState, useEffect } from 'react'
import { AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend } from 'recharts'
import { fetchChartData, fetchMetrics, trainModel } from '../utils/api'
import { Brain, RefreshCw, CheckCircle, BarChart3 } from 'lucide-react'

const CustomTooltip = ({ active, payload, label }) => {
  if (!active || !payload?.length) return null
  return (
    <div style={{ background: 'rgba(7,7,15,0.97)', border: '1px solid rgba(77,240,197,0.22)', borderRadius: '12px', padding: '10px 14px', backdropFilter: 'blur(20px)', boxShadow: '0 8px 32px rgba(0,0,0,0.5)' }}>
      <p style={{ color: 'rgba(238,242,255,0.4)', fontSize: '11px', marginBottom: '6px', fontFamily: 'JetBrains Mono, monospace' }}>{label}</p>
      {payload.map((p, i) => (
        <p key={i} style={{ color: p.color, fontSize: '13px', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '6px' }}>
          <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: p.color, display: 'inline-block' }} />
          {p.name}: <strong>{typeof p.value === 'number' && p.value < 1 ? p.value.toFixed(3) : p.value}</strong>
        </p>
      ))}
    </div>
  )
}

const COLORS = ['#4DF0C5', '#FF5757', '#FFAA00', '#60ABFF', '#B47EFF', '#F472B6']

export default function Analytics() {
  const [chartData, setChartData] = useState(null)
  const [metrics, setMetrics] = useState(null)
  const [loading, setLoading] = useState(true)
  const [training, setTraining] = useState(false)
  const [trainSuccess, setTrainSuccess] = useState(false)

  useEffect(() => {
    Promise.all([fetchChartData(), fetchMetrics()])
      .then(([cd, m]) => { setChartData(cd); setMetrics(m.metrics) })
      .finally(() => setLoading(false))
  }, [])

  const handleTrain = async () => {
    setTraining(true); setTrainSuccess(false)
    try { const res = await trainModel(); setMetrics(res.metrics); setTrainSuccess(true); setTimeout(() => setTrainSuccess(false), 3000) }
    catch (e) { console.error(e) }
    finally { setTraining(false) }
  }

  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '60vh' }}>
      <div style={{ textAlign: 'center' }}>
        <div className="spinner" style={{ margin: '0 auto 20px' }} />
        <p style={{ color: 'rgba(238,242,255,0.35)', fontFamily: 'JetBrains Mono, monospace', fontSize: '12px' }}>Loading analytics...</p>
      </div>
    </div>
  )

  const confMatrix = metrics?.confusion_matrix || [[950, 10], [15, 85]]
  const metricsDisplay = [
    { label: 'Accuracy',  value: metrics?.accuracy  ? `${(metrics.accuracy * 100).toFixed(1)}%`  : '97.2%', color: '#4DF0C5' },
    { label: 'Precision', value: metrics?.precision  ? `${(metrics.precision * 100).toFixed(1)}%` : '89.4%', color: '#60ABFF' },
    { label: 'Recall',    value: metrics?.recall     ? `${(metrics.recall * 100).toFixed(1)}%`    : '84.1%', color: '#FFAA00' },
    { label: 'F1 Score',  value: metrics?.f1         ? `${(metrics.f1 * 100).toFixed(1)}%`        : '86.7%', color: '#B47EFF' },
    { label: 'ROC-AUC',   value: metrics?.roc_auc    ? metrics.roc_auc.toFixed(3)                 : '0.981', color: '#4DF0C5' },
  ]
  const pieData = chartData?.by_category?.map(c => ({ name: c.category, value: c.total })) || []
  const weeklyData = chartData?.weekly || []

  return (
    <div style={{ padding: '32px 36px', maxWidth: '1300px' }}>
      <div className="animate-fadeInUp" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: '32px' }}>
        <div>
          <div style={{ fontSize: '10px', letterSpacing: '0.18em', color: 'rgba(77,240,197,0.5)', fontFamily: 'JetBrains Mono, monospace', marginBottom: '8px', textTransform: 'uppercase' }}>ML Analytics</div>
          <h1 style={{ fontFamily: 'Syne, sans-serif', fontSize: '32px', fontWeight: 800, color: '#EEF2FF', letterSpacing: '-0.035em', lineHeight: 1 }}>Model Performance</h1>
          <p style={{ color: 'rgba(238,242,255,0.4)', fontSize: '14px', marginTop: '6px' }}>Real-time metrics and model evaluation statistics</p>
        </div>
        <button onClick={handleTrain} disabled={training} style={{
          display: 'flex', alignItems: 'center', gap: '8px',
          background: trainSuccess ? 'rgba(77,240,197,0.1)' : 'rgba(96,171,255,0.08)',
          border: `1px solid ${trainSuccess ? 'rgba(77,240,197,0.35)' : 'rgba(96,171,255,0.25)'}`,
          color: trainSuccess ? '#4DF0C5' : '#60ABFF',
          borderRadius: '11px', padding: '10px 20px', cursor: training ? 'not-allowed' : 'pointer',
          fontSize: '13px', fontWeight: 600, transition: 'all 0.3s', fontFamily: 'DM Sans, sans-serif',
          boxShadow: trainSuccess ? '0 0 20px rgba(77,240,197,0.2)' : 'none',
        }}>
          {training ? <RefreshCw size={14} style={{ animation: 'spin 0.8s linear infinite' }} /> :
            trainSuccess ? <CheckCircle size={14} /> : <Brain size={14} />}
          {training ? 'Training...' : trainSuccess ? 'Training Complete!' : 'Retrain Model'}
        </button>
        <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
      </div>

      {/* Metric cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '22px' }}>
        {metricsDisplay.map((m, i) => (
          <div key={i} className="animate-fadeInUp card-glow" style={{ animationDelay: `${i * 60}ms`, padding: '18px 20px', textAlign: 'center' }}>
            <div style={{ fontSize: '9.5px', color: 'rgba(238,242,255,0.3)', marginBottom: '8px', letterSpacing: '0.1em', textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace' }}>{m.label}</div>
            <div className="animate-numberPop" style={{ fontFamily: 'Syne, sans-serif', fontSize: '28px', fontWeight: 800, color: m.color, letterSpacing: '-0.03em', textShadow: `0 0 20px ${m.color}40` }}>{m.value}</div>
          </div>
        ))}
      </div>

      {/* Charts row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '18px', marginBottom: '18px' }}>
        <div className="card-glow animate-fadeInUp" style={{ animationDelay: '320ms', padding: '24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '20px' }}>
            <BarChart3 size={15} color="#4DF0C5" />
            <h3 style={{ fontFamily: 'Syne, sans-serif', fontSize: '14px', fontWeight: 700, color: '#EEF2FF' }}>Weekly Transaction Pattern</h3>
          </div>
          <ResponsiveContainer width="100%" height={220}>
            <BarChart data={weeklyData} barSize={18} barGap={4}>
              <CartesianGrid strokeDasharray="3 3" stroke="rgba(77,240,197,0.05)" />
              <XAxis dataKey="day" tick={{ fill: 'rgba(238,242,255,0.3)', fontSize: 11 }} axisLine={false} tickLine={false} />
              <YAxis tick={{ fill: 'rgba(238,242,255,0.3)', fontSize: 11 }} axisLine={false} tickLine={false} />
              <Tooltip content={<CustomTooltip />} />
              <Bar dataKey="legitimate" name="Legitimate" fill="#4DF0C5" fillOpacity={0.75} radius={[4, 4, 0, 0]} />
              <Bar dataKey="fraud" name="Fraud" fill="#FF5757" fillOpacity={0.85} radius={[4, 4, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>

        <div className="card-glow animate-fadeInUp" style={{ animationDelay: '380ms', padding: '24px' }}>
          <h3 style={{ fontFamily: 'Syne, sans-serif', fontSize: '14px', fontWeight: 700, color: '#EEF2FF', marginBottom: '20px' }}>Distribution by Category</h3>
          <ResponsiveContainer width="100%" height={220}>
            <PieChart>
              <Pie data={pieData} cx="50%" cy="50%" outerRadius={80} innerRadius={35} dataKey="value" strokeWidth={0} paddingAngle={2}>
                {pieData.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} fillOpacity={0.85} />)}
              </Pie>
              <Tooltip content={<CustomTooltip />} />
              <Legend formatter={(val) => <span style={{ color: 'rgba(238,242,255,0.55)', fontSize: '11px' }}>{val}</span>} />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Confusion matrix */}
      <div className="card-glow animate-fadeInUp" style={{ animationDelay: '440ms', padding: '24px' }}>
        <h3 style={{ fontFamily: 'Syne, sans-serif', fontSize: '14px', fontWeight: 700, color: '#EEF2FF', marginBottom: '22px' }}>Confusion Matrix</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr 1fr', gap: '10px', maxWidth: '440px' }}>
          <div />
          {['PREDICTED: LEGIT', 'PREDICTED: FRAUD'].map(l => (
            <div key={l} style={{ textAlign: 'center', fontSize: '10.5px', color: 'rgba(238,242,255,0.35)', padding: '8px', letterSpacing: '0.07em', fontFamily: 'JetBrains Mono, monospace' }}>{l}</div>
          ))}
          {[
            { rowLabel: 'ACTUAL: LEGIT',  tn: confMatrix[0][0], fp: confMatrix[0][1] },
            { rowLabel: 'ACTUAL: FRAUD',  fn: confMatrix[1][0], tp: confMatrix[1][1] },
          ].map((row, ri) => (
            <React.Fragment key={ri}>
              <div style={{ display: 'flex', alignItems: 'center', fontSize: '10.5px', color: 'rgba(238,242,255,0.35)', letterSpacing: '0.07em', fontFamily: 'JetBrains Mono, monospace' }}>{row.rowLabel}</div>
              {ri === 0 ? (
                <>
                  <div style={{ textAlign: 'center', padding: '20px', background: 'rgba(77,240,197,0.1)', border: '1px solid rgba(77,240,197,0.22)', borderRadius: '12px', boxShadow: '0 0 24px rgba(77,240,197,0.08)' }}>
                    <div className="animate-numberPop" style={{ fontFamily: 'Syne, sans-serif', fontSize: '26px', fontWeight: 800, color: '#4DF0C5' }}>{row.tn}</div>
                    <div style={{ fontSize: '10px', color: 'rgba(238,242,255,0.35)', marginTop: '4px', fontFamily: 'JetBrains Mono, monospace' }}>True Negative</div>
                  </div>
                  <div style={{ textAlign: 'center', padding: '20px', background: 'rgba(255,87,87,0.07)', border: '1px solid rgba(255,87,87,0.15)', borderRadius: '12px' }}>
                    <div className="animate-numberPop" style={{ fontFamily: 'Syne, sans-serif', fontSize: '26px', fontWeight: 800, color: '#FF5757' }}>{row.fp}</div>
                    <div style={{ fontSize: '10px', color: 'rgba(238,242,255,0.35)', marginTop: '4px', fontFamily: 'JetBrains Mono, monospace' }}>False Positive</div>
                  </div>
                </>
              ) : (
                <>
                  <div style={{ textAlign: 'center', padding: '20px', background: 'rgba(255,170,0,0.07)', border: '1px solid rgba(255,170,0,0.15)', borderRadius: '12px' }}>
                    <div className="animate-numberPop" style={{ fontFamily: 'Syne, sans-serif', fontSize: '26px', fontWeight: 800, color: '#FFAA00' }}>{row.fn}</div>
                    <div style={{ fontSize: '10px', color: 'rgba(238,242,255,0.35)', marginTop: '4px', fontFamily: 'JetBrains Mono, monospace' }}>False Negative</div>
                  </div>
                  <div style={{ textAlign: 'center', padding: '20px', background: 'rgba(77,240,197,0.1)', border: '1px solid rgba(77,240,197,0.22)', borderRadius: '12px', boxShadow: '0 0 24px rgba(77,240,197,0.08)' }}>
                    <div className="animate-numberPop" style={{ fontFamily: 'Syne, sans-serif', fontSize: '26px', fontWeight: 800, color: '#4DF0C5' }}>{row.tp}</div>
                    <div style={{ fontSize: '10px', color: 'rgba(238,242,255,0.35)', marginTop: '4px', fontFamily: 'JetBrains Mono, monospace' }}>True Positive</div>
                  </div>
                </>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  )
}