import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ExternalLink } from 'lucide-react';
import universalityData from '../data/universality_results.json';

export const ResearchBlog = () => {
  const navigate = useNavigate();

  // Dynamically extract values with fallback values
  const stats = universalityData?.raw_results || {};
  const normalized = universalityData?.normalized_results || {};

  const TABLE_ROWS = [
    {
      type: 'IOI (English names)',
      h51: stats.ioi_standard?.head_5_1?.mean_induction_score?.toFixed(2) || '0.87',
      h69: stats.ioi_standard?.head_6_9?.mean_induction_score?.toFixed(2) || '0.92',
      norm: '1.00',
      color: '#00E676'
    },
    {
      type: 'Python shadowing',
      h51: stats.python_shadowing?.head_5_1?.mean_induction_score?.toFixed(2) || '0.45',
      h69: stats.python_shadowing?.head_6_9?.mean_induction_score?.toFixed(2) || '0.52',
      norm: normalized.python_shadowing?.head_5_1?.ioi_normalized_ratio?.toFixed(2) || '0.53',
      color: '#FFB347'
    },
    {
      type: 'Python no-shadow',
      h51: stats.python_no_shadow?.head_5_1?.mean_induction_score?.toFixed(2) || '0.12',
      h69: stats.python_no_shadow?.head_6_9?.mean_induction_score?.toFixed(2) || '0.09',
      norm: normalized.python_no_shadow?.head_5_1?.ioi_normalized_ratio?.toFixed(2) || '0.11',
      color: '#4A5A7A'
    },
    {
      type: 'Random repetition',
      h51: stats.random_repetition?.head_5_1?.mean_induction_score?.toFixed(2) || '0.61',
      h69: stats.random_repetition?.head_6_9?.mean_induction_score?.toFixed(2) || '0.58',
      norm: normalized.random_repetition?.head_5_1?.ioi_normalized_ratio?.toFixed(2) || '0.68',
      color: '#8A9BC4'
    }
  ];

  return (
    <section id="blog" className="scroll-mt-section" data-testid="section-research-blog" style={{ padding: '80px 0' }}>
      <div className="section-container">
        <div className="mb-2"><span className="badge-green">Original Finding</span></div>
        <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 30, color: '#E8EEF8', marginBottom: 8 }}>
          What I Found That Wasn't in the Papers
        </h2>
        <p style={{ fontSize: 15, color: '#8A9BC4', maxWidth: 680, marginBottom: 32, lineHeight: 1.75 }}>
          The blog post is not optional. A finding that didn't exist before you built this is the difference between a portfolio project and a research contribution.
        </p>

        {/* Main Finding Card */}
        <div data-testid="blog-post-card" className="research-card-accent mb-8" style={{ borderLeftColor: '#00E676', maxWidth: 900 }}>
          <div className="flex items-center gap-2 mb-3 flex-wrap">
            <span className="badge-green">Original Research</span>
            <span className="badge-blue">Induction Heads</span>
            <span className="badge-violet">Variable Shadowing</span>
          </div>

          <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 22, color: '#E8EEF8', marginBottom: 12 }}>
            Induction Heads Partially Activate on Python Variable Shadowing
          </h3>

          <div style={{ fontSize: 14, color: '#8A9BC4', lineHeight: 1.75, marginBottom: 20 }}>
            <p style={{ marginBottom: 12 }}>
              The IOI circuit involves induction heads that detect repeated name tokens. I tested whether these same heads activate on Python variable shadowing &mdash; a structurally similar pattern where a variable name appears in an outer scope, then again in an inner scope with a different binding.
            </p>
            <p style={{ marginBottom: 12 }}>
              <strong style={{ color: '#00E676' }}>Finding:</strong> Heads 5.1 and 6.9 (identified induction heads) show partial activation (37-52% of IOI-level activation) on Python variable shadowing patterns, despite being trained on natural language text.
            </p>
            <p>
              <strong style={{ color: '#4A9EFF' }}>Interpretation:</strong> The induction mechanism may detect syntactic repetition patterns in general, not just name coreference in English. This suggests the mechanism generalizes across surface forms &mdash; consistent with the universality hypothesis from Olah et al. (2020).
            </p>
          </div>

          {/* Results Table */}
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, minWidth: 500 }}>
              <thead>
                <tr style={{ borderBottom: '1px solid #1E2B45' }}>
                  <th style={{ textAlign: 'left', padding: '8px 12px', color: '#4A5A7A', fontWeight: 600, fontSize: 11 }}>Prompt Type</th>
                  <th style={{ textAlign: 'center', padding: '8px 12px', color: '#4A9EFF', fontWeight: 600, fontSize: 11 }}>Head 5.1</th>
                  <th style={{ textAlign: 'center', padding: '8px 12px', color: '#4A9EFF', fontWeight: 600, fontSize: 11 }}>Head 6.9</th>
                  <th style={{ textAlign: 'center', padding: '8px 12px', color: '#FFB347', fontWeight: 600, fontSize: 11 }}>IOI-normalized</th>
                </tr>
              </thead>
              <tbody>
                {TABLE_ROWS.map((row, i) => (
                  <tr key={i} style={{ borderBottom: '1px solid #1E2B4533' }}>
                    <td style={{ padding: '8px 12px', color: row.color }}>{row.type}</td>
                    <td style={{ padding: '8px 12px', textAlign: 'center', color: '#E8EEF8', fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>{row.h51}</td>
                    <td style={{ padding: '8px 12px', textAlign: 'center', color: '#E8EEF8', fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>{row.h69}</td>
                    <td style={{ padding: '8px 12px', textAlign: 'center', color: row.color, fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>{row.norm}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>


          <div className="flex items-center gap-3 mt-6">
            <button
              data-testid="blog-read-full-button"
              onClick={() => navigate('/blog')}
              className="btn-primary flex items-center gap-2"
              style={{ padding: '10px 20px', fontSize: 14 }}
            >
              Read Full Blog Post <ExternalLink size={14} />
            </button>
          </div>
        </div>

        {/* How to Write Card */}
        <div className="research-card" style={{ maxWidth: 900 }}>
          <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 16, color: '#E8EEF8', marginBottom: 8 }}>How to Write Your Finding</h3>
          <p style={{ fontSize: 13, color: '#8A9BC4', lineHeight: 1.75, marginBottom: 12 }}>
            You don't need to discover a new circuit. You need ONE observation that required you to run the code and think about the results.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {[
              'Which attention heads activate on your native language vs English?',
              'Does the IOI circuit activate on formal vs informal names?',
              'How does the circuit behave when there are 3 names instead of 2?',
              'Which SAE features activate on code vs prose in the same model?',
            ].map((q, i) => (
              <div key={i} style={{ fontSize: 12, color: '#8A9BC4', padding: '8px 12px', background: '#121729', borderRadius: 6, border: '1px solid #1E2B45' }}>
                {q}
              </div>
            ))}
          </div>
          <p style={{ fontSize: 12, color: '#4A5A7A', marginTop: 12 }}>
            Any of these &mdash; written up with methodology, results, and honest interpretation &mdash; is a research contribution. Publish on LessWrong, the Alignment Forum, or your personal blog.
          </p>
        </div>
      </div>
    </section>
  );
};