frontend/src/components/Architecture.js

import React, { useState } from 'react';
import { ChevronDown, ChevronUp, Zap, Database, Brain, Cpu, Server } from 'lucide-react';

const LAYERS = [
  {
    name: 'Data Ingestion Layer',
    badges: ['Kafka', 'Redpanda', 'AWS Kinesis'],
    status: '500K events/sec capacity',
    color: 'var(--amber)',
    icon: Zap,
    content: `Apache Kafka handles bulk data ingestion from external sources. Redpanda sits on the critical write path for <2ms p99 latency. Kafka consumers batch-write to PostgreSQL every 100ms to reduce INSERT overhead.\n\nKey config:\n  producer.acks = all (durability)\n  compression.type = lz4 (throughput)\n  batch.size = 16384 (throughput vs latency)\n  linger.ms = 5 (batch window)`,
  },
  {
    name: 'PostgreSQL 17 Core',
    badges: ['pgvector 0.8', 'HNSW', 'GIN', 'Partitioning', 'Apache AGE'],
    status: '50M+ rows, sub-100ms',
    color: '#569CD6',
    icon: Database,
    content: `The database is the AI brain. All intelligence lives here.\n\nKEY CONFIGURATION (postgresql.conf):\n  max_parallel_workers_per_gather = 8\n  max_parallel_workers = 16\n  work_mem = 256MB (critical for HNSW)\n  maintenance_work_mem = 2GB\n  effective_cache_size = 24GB\n  wal_compression = on\n  jit = off (hurts pgvector performance)\n\nINDEXES:\n  reviews.embedding → HNSW (m=16, ef_construction=64)\n  reviews.text → GIN tsvector (full-text)\n  transactions → RANGE partition by created_at (monthly)`,
  },
  {
    name: 'AI Trigger Functions',
    badges: ['DistilBERT', 'OpenAI embeddings', 'XGBoost', 'pg_background'],
    status: '3 models · 0.48ms avg',
    color: 'var(--purple-l)',
    icon: Brain,
    content: `Trigger functions call AI models through plpython3u extensions. Models are loaded once into shared memory via pg_background workers.\n\nTRIGGER EXECUTION ORDER (AFTER INSERT, FOR EACH ROW):\n  1. ai_sentiment_analyzer (priority 10) — ONNX DistilBERT\n  2. ai_embedder (priority 20) — OpenAI API (async via pg_net)\n  3. xgboost_fraud_scorer (priority 30) — in-process XGBoost\n  4. tsvector_updater (priority 40) — native PostgreSQL\n\nCRITICAL: Embedding calls use pg_net for async HTTP — they do NOT block the INSERT transaction.`,
  },
  {
    name: 'LangGraph AI Analyst Agent',
    badges: ['LangGraph', 'LangSmith', 'Gemini 2.0', 'SQLGlot validator'],
    status: '94% accuracy · 6% fallback',
    color: 'var(--teal)',
    icon: Cpu,
    content: `The agent follows a 5-node LangGraph StateGraph:\n\n  Node 1: TABLE SELECTOR → selects relevant tables\n  Node 2: SQL GENERATOR → generates SQL from exact DDL\n  Node 3: SQL VALIDATOR (SQLGlot) → catches syntax errors\n  Node 4: SQL EXECUTOR (read-only connection)\n  Node 5: RETRY LOOP → max 3 retries, temp 0.3 on retry\n\nCritical: must inject EXACT CREATE TABLE DDL — paraphrased schemas cause column name hallucination. LangSmith traces every run.`,
  },
  {
    name: 'Cache & Orchestration',
    badges: ['Redis', 'Airflow', 'MLflow', 'Grafana'],
    status: '15min DAG refresh',
    color: 'var(--text3)',
    icon: Server,
    content: `Redis caches hot query results (TTL 5 min, 30s for fraud alerts). Cache hit rate target: >70%.\n\nAirflow DAG: ai_views_refresh (schedule: */15 * * * *)\n  Task 1: REFRESH MATERIALIZED VIEW CONCURRENTLY mv_sentiment_daily\n  Task 2: REFRESH MATERIALIZED VIEW CONCURRENTLY mv_cohort_clusters\n  Task 3: REFRESH MATERIALIZED VIEW CONCURRENTLY mv_fraud_scores\n  Task 4: REFRESH MATERIALIZED VIEW CONCURRENTLY mv_anomaly_scores\n  Task 5: Invalidate Redis keys\n  Task 6: Publish metrics to Prometheus\n\nMLflow tracks model versions, trigger inference time, SQL agent accuracy.`,
  },
];

export default function Architecture() {
  const [expanded, setExpanded] = useState(null);

  const toggle = (i) => setExpanded(expanded === i ? null : i);

  return (
    <div className="nv-section" data-testid="architecture-section">
      <div className="nv-container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="nv-badge nv-badge-purple" style={{ marginBottom: 12, display: 'inline-block' }}>Architecture</span>
          <h2 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 'clamp(28px, 4vw, 42px)', color: 'var(--text)', marginBottom: 12 }}>
            Every Layer, Explained
          </h2>
          <p style={{ color: 'var(--text2)', maxWidth: 520, margin: '0 auto', fontSize: 15 }}>
            Click each layer to see implementation details, configuration, and design decisions.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 800, margin: '0 auto' }}>
          {LAYERS.map((layer, i) => {
            const Icon = layer.icon;
            const isOpen = expanded === i;
            return (
              <div key={i} className={`nv-expandable ${isOpen ? 'open' : ''}`} data-testid={`architecture-layer-toggle-${i}`}>
                <div className="nv-expandable-header" onClick={() => toggle(i)} role="button" tabIndex={0} aria-expanded={isOpen} aria-controls={`layer-content-${i}`} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(i); } }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
                    <div style={{ width: 36, height: 36, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', background: `${layer.color}15` }}>
                      <Icon size={18} style={{ color: layer.color }} />
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--text)' }}>{layer.name}</div>
                      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 4 }}>
                        {layer.badges.map((b) => (
                          <span key={b} style={{ fontSize: 10, color: layer.color, background: `${layer.color}10`, padding: '1px 8px', borderRadius: 4, fontFamily: 'var(--font-mono)' }}>{b}</span>
                        ))}
                      </div>
                    </div>
                    <span style={{ fontSize: 12, color: 'var(--text3)', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap' }}>{layer.status}</span>
                  </div>
                  {isOpen ? <ChevronUp size={18} style={{ color: 'var(--text3)', marginLeft: 12, flexShrink: 0 }} /> : <ChevronDown size={18} style={{ color: 'var(--text3)', marginLeft: 12, flexShrink: 0 }} />}
                </div>
                <div className="nv-expandable-content" id={`layer-content-${i}`} role="region" aria-labelledby={`layer-header-${i}`}>
                  <div className="nv-code-block" style={{ fontSize: 12, whiteSpace: 'pre-wrap', marginTop: 12 }}>
                    {layer.content}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}