/* fraud-app.jsx — Main app with state management and data fetching */

const FraudApp = () => {
  const [activeTab, setActiveTab] = React.useState('Dashboard');
  const [transactions, setTransactions] = React.useState(MOCK_TRANSACTIONS);
  const [alerts, setAlerts] = React.useState(MOCK_ALERTS);
  const [version, setVersion] = React.useState(null);
  const [demoRegion, setDemoRegion] = React.useState(null);
  const mobile = useIsMobile();
  const [metrics, setMetrics] = React.useState({
    totalScanned: 1847,
    alertsToday: MOCK_ALERTS.length,
    flaggedRate: 3.2,
    avgLatencyMs: 16,
    byRegion: { NA: 742, EU: 583, APAC: 522 },
    byRisk: { low: 1498, medium: 214, high: 98, critical: 37 },
    blockedAmount: 24892.00,
  });

  // Fetch version from API on mount
  React.useEffect(() => {
    fetch('/api/version')
      .then(r => r.json())
      .then(data => {
        setVersion(data.version);
        if (data.demoRegion) setDemoRegion(data.demoRegion);
      })
      .catch(() => setVersion('1.0.0'));
  }, []);

  // Fetch live data if backend is available
  React.useEffect(() => {
    const fetchData = () => {
      fetch('/api/transactions').then(r => r.json()).then(setTransactions).catch(() => {});
      fetch('/api/alerts').then(r => r.json()).then(setAlerts).catch(() => {});
      fetch('/api/metrics').then(r => r.json()).then(setMetrics).catch(() => {});
    };

    fetchData();
    const interval = setInterval(fetchData, 3000);
    return () => clearInterval(interval);
  }, []);

  // SSE for real-time updates
  React.useEffect(() => {
    let es;
    try {
      es = new EventSource('/api/events');
      es.onmessage = (event) => {
        const txn = JSON.parse(event.data);
        setTransactions(prev => [txn, ...prev].slice(0, 50));
        if (txn.flagged) {
          setAlerts(prev => [{
            id: `ALT-${txn.id.split('-')[1]}`,
            type: txn.reason || 'Suspicious activity',
            severity: txn.riskScore >= 0.85 ? 'critical' : txn.riskScore >= 0.75 ? 'high' : 'medium',
            accountId: txn.accountId,
            description: `${txn.reason} — ${txn.merchant}`,
            amount: txn.amount,
            region: txn.region,
            status: 'open',
            timestamp: txn.timestamp,
          }, ...prev].slice(0, 20));
        }
      };
    } catch (e) {
      // SSE not available — fall back to polling only
    }
    return () => es && es.close();
  }, []);

  const regionCfg = REGION_CONFIG[demoRegion];

  return (
    <div style={{ width: '100vw', height: '100vh', background: ACME.bg, fontFamily: ACME.font, color: ACME.text, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <RegionStripe region={demoRegion} />
      <FraudNav activeTab={activeTab} onTabClick={setActiveTab} version={version} mobile={mobile} demoRegion={demoRegion} />

      <FraudDashboard transactions={transactions} alerts={alerts} metrics={metrics} mobile={mobile} demoRegion={demoRegion} />

      {/* Footer with version and model info */}
      <div style={{ padding: mobile ? '8px 12px' : '8px 24px', fontSize: mobile ? 10 : 11, color: ACME.subtle, borderTop: '1px solid ' + ACME.border, background: '#fff', display: 'flex', justifyContent: 'space-between', flexShrink: 0, gap: 8 }}>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {mobile ? `v${version || '...'} · phi-4-ft-acme-fraud-v2` : `Acme Bank Fraud Scoring v${version || '...'} · Model: phi-4-ft-acme-fraud-v2 · Region: ${regionCfg ? regionCfg.label : 'All'}`}
        </span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
          <div style={{ width: 6, height: 6, borderRadius: 3, background: '#10B981' }}></div>
          {mobile ? 'Online' : 'Scoring engine online'}
        </span>
      </div>
    </div>
  );
};

window.FraudApp = FraudApp;