AIRegulation-DocAnalysis/frontend/src/pages/Status/StatusPage.tsx

import React, { useEffect, useState } from 'react';
import { useTheme } from '../../contexts';
import { Content } from '../../components/layout/Content';
import { TPattern } from '../../components/common/TPattern';
import { getSystemStats, getSystemConfig, type SystemStats, type SystemConfig } from '../../api/status';
import { getDocumentList, type DocInfo } from '../../api/docs';

const StatsCard = ({ label, value, accent = false }: {
  label: string;
  value: number;
  accent?: boolean;
}) => {
  const { theme, isDark } = useTheme();

  return (
    <div style={{
      padding: 20,
      background: theme.bgCard,
      borderRadius: 12,
      border: `1px solid ${accent ? theme.accent : theme.border}`,
      position: 'relative',
      overflow: 'hidden',
      boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.06)' : 'none',
    }}>
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: 3,
        background: theme.gradientAccent,
      }} />
      <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 8, letterSpacing: '1px' }}>{label}</div>
      <div className="mono" style={{ fontSize: 32, fontWeight: 700, color: accent ? theme.accent : theme.text }}>{value}</div>
    </div>
  );
};

export const StatusPage: React.FC = () => {
  const { theme, isDark } = useTheme();
  const [stats, setStats] = useState<SystemStats>({
    documents_total: 0,
    documents_indexed: 0,
    documents_failed: 0,
    chunks_total: 0,
  });
  const [config, setConfig] = useState<SystemConfig | null>(null);
  const [docs, setDocs] = useState<DocInfo[]>([]);

  async function loadData() {
    try {
      const [statsRes, configRes, docsRes] = await Promise.all([
        getSystemStats(),
        getSystemConfig(),
        getDocumentList(),
      ]);
      setStats(statsRes);
      setConfig(configRes);
      setDocs(docsRes.docs);
    } catch (error) {
      console.error('Failed to load status data:', error);
    }
  }

  useEffect(() => {
    const timerId = window.setTimeout(() => {
      void loadData();
    }, 0);
    return () => window.clearTimeout(timerId);
  }, []);

  return (
    <Content>
      <TPattern />
      <section style={{ marginBottom: 48 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
        }}>
          <StatsCard label="DOCUMENTS" value={stats.documents_total} />
          <StatsCard label="INDEXED" value={stats.documents_indexed} />
          <StatsCard label="FAILED" value={stats.documents_failed} />
          <StatsCard label="CHUNKS" value={stats.chunks_total} accent />
        </div>
      </section>

      <section style={{ marginBottom: 48 }}>
        <h2 style={{
          fontSize: 14,
          fontWeight: 600,
          color: theme.accent,
          marginBottom: 20,
          letterSpacing: '1px',
        }}>SYSTEM CONFIGURATION</h2>

        <div style={{ marginBottom: 20 }}>
          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>MODELS</div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 12,
          }}>
            {[
              ['LLM Provider', config?.llm_provider || '-'],
              ['LLM Model', config?.llm_model || '-'],
              ['Embedding Model', config?.embedding_model || '-'],
              ['Embedding Dim', String(config?.embedding_dim || 0)],
            ].map(([k, v]) => (
              <div key={k} style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: 16,
                background: theme.bgCard,
                borderRadius: 10,
                border: `1px solid ${theme.border}`,
                boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
              }}>
                <span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
                <span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginBottom: 20 }}>
          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>STORAGE AND PATHS</div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 12,
          }}>
            {[
              ['Milvus Collection', config?.milvus_collection || '-'],
              ['Metadata Path', config?.document_metadata_path || '-'],
              ['Embedding Base URL', config?.embedding_base_url || '-'],
            ].map(([k, v]) => (
              <div key={k} style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: 16,
                background: theme.bgCard,
                borderRadius: 10,
                border: `1px solid ${theme.border}`,
                boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
              }}>
                <span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
                <span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <h2 style={{
          fontSize: 14,
          fontWeight: 600,
          color: theme.accent,
          marginBottom: 20,
          letterSpacing: '1px',
        }}>DOCUMENT INDEX</h2>
        {docs.map(d => (
          <div key={d.id} style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: 16,
            background: theme.bgCard,
            borderRadius: 10,
            marginBottom: 10,
            border: `1px solid ${theme.border}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontSize: 14 }}>{d.name}</span>
              <span className="mono" style={{ fontSize: 11, color: theme.text3 }}>
                {d.updated_at ? new Date(d.updated_at).toLocaleString() : d.status}
              </span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <span className="mono" style={{ fontSize: 12, color: theme.text2 }}>{d.chunks} chunks</span>
              <div style={{
                padding: '4px 12px',
                background: d.status === 'failed' ? '#d64545' : theme.green,
                borderRadius: 6,
              }}>
                <span className="mono" style={{ fontSize: 10, fontWeight: 600, color: '#fff' }}>
                  {d.status.toUpperCase()}
                </span>
              </div>
            </div>
          </div>
        ))}
      </section>
    </Content>
  );
};