import React from 'react';
import { useTheme } from '../../contexts/ThemeContext';
import { Content } from '../../components/layout/Content';
import { TPattern } from '../../components/common/TPattern';
import { mockDocs } from '../../data';

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();

  return (
    <Content>
      <TPattern />
      {/* System Stats */}
      <section style={{ marginBottom: 48 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
        }}>
          <StatsCard label="DOCUMENTS" value={3} />
          <StatsCard label="CHUNKS" value={214} />
          <StatsCard label="DIMENSIONS" value={1536} />
          <StatsCard label="CLAUSES" value={214} accent />
        </div>
      </section>

      {/* Configuration */}
      <section style={{ marginBottom: 48 }}>
        <h2 style={{
          fontSize: 14,
          fontWeight: 600,
          color: theme.accent,
          marginBottom: 20,
          letterSpacing: '1px',
        }}>SYSTEM CONFIGURATION</h2>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 12,
        }}>
          {[
            ['LLM Model', 'GPT-4o'],
            ['Embedding', 'text-embedding-3-small'],
            ['Vector DB', 'ChromaDB'],
            ['Retrieval', 'Hybrid (Vector + BM25)'],
            ['Top-K', '5 candidates'],
            ['Chunk Size', '500-1000 tokens'],
            ['Overlap', '100 tokens'],
            ['Temperature', '0.1'],
          ].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>
      </section>

      {/* Indexed Docs Overview */}
      <section>
        <h2 style={{
          fontSize: 14,
          fontWeight: 600,
          color: theme.accent,
          marginBottom: 20,
          letterSpacing: '1px',
        }}>DOCUMENT INDEX</h2>
        {mockDocs.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.size}</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: theme.green,
                borderRadius: 6,
              }}>
                <span className="mono" style={{ fontSize: 10, fontWeight: 600, color: '#fff' }}>INDEXED</span>
              </div>
            </div>
          </div>
        ))}
      </section>
    </Content>
  );
};