import React from 'react';
import styles from './PipelineVisualization.module.css';

const PipelineVisualization = () => {
  const stages = [
    {
      id: 1,
      name: 'Script Detection',
      description: 'Identifies whether input is Arabic, Latin, or mixed script',
      icon: '🔍',
      details: ['Analyzes Unicode ranges', 'Detects mixed content', 'Classifies characters'],
    },
    {
      id: 2,
      name: 'Normalization',
      description: 'Cleans and standardizes the input text',
      icon: '🧹',
      details: ['Removes diacritics', 'Normalizes whitespace', 'Standardizes characters'],
    },
    {
      id: 3,
      name: 'Tokenization',
      description: 'Splits text into meaningful tokens',
      icon: '🔤',
      details: ['Word segmentation', 'Clitic detection', 'Pattern recognition'],
    },
    {
      id: 4,
      name: 'ICR Building',
      description: 'Creates Intermediate Canonical Representation',
      icon: '🔄',
      details: ['Script-independent form', 'Preserves phonology', 'Context tracking'],
    },
    {
      id: 5,
      name: 'Script Generation',
      description: 'Generates target script from ICR',
      icon: '✍️',
      details: ['Character mapping', 'Context application', 'Rule processing'],
    },
    {
      id: 6,
      name: 'Validation',
      description: 'Final checks and fixes',
      icon: '✅',
      details: ['Output validation', 'Error correction', 'Quality checks'],
    },
  ];

  return (
    <div className={styles.pipeline}>
      <h2>The 6-Stage Transliteration Pipeline</h2>
      <p>CaDaR processes text through six specialized stages to ensure accurate bidirectional transliteration.</p>

      <div className={styles.stagesContainer}>
        {stages.map((stage, index) => (
          <div key={stage.id} className={styles.stage}>
            <div className={styles.stageHeader}>
              <div className={styles.stageNumber}>{stage.id}</div>
              <div className={styles.stageIcon}>{stage.icon}</div>
              <h3>{stage.name}</h3>
            </div>
            
            <p className={styles.stageDescription}>{stage.description}</p>
            
            <div className={styles.stageDetails}>
              {stage.details.map((detail, idx) => (
                <div key={idx} className={styles.detailItem}>
                  <span className={styles.bullet}>•</span>
                  {detail}
                </div>
              ))}
            </div>
            
            {index < stages.length - 1 && (
              <div className={styles.arrow}>
                <svg width="30" height="30" viewBox="0 0 30 30" fill="none">
                  <path
                    d="M15 5 L25 15 L15 25"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M5 15 L25 15"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                  />
                </svg>
              </div>
            )}
          </div>
        ))}
      </div>

      <div className={styles.flowDiagram}>
        <h3>Data Flow Through Pipeline</h3>
        <div className={styles.flow}>
          <div className={styles.flowItem}>
            <div className={styles.flowBox}>
              Input Text
              <br />
              <small>Arabic/Latin</small>
            </div>
          </div>
          {stages.map((stage) => (
            <React.Fragment key={stage.id}>
              <div className={styles.flowArrow}>→</div>
              <div className={styles.flowItem}>
                <div className={styles.flowBox}>
                  {stage.name}
                  <br />
                  <small>{stage.description.substring(0, 30)}...</small>
                </div>
              </div>
            </React.Fragment>
          ))}
          <div className={styles.flowArrow}>→</div>
          <div className={styles.flowItem}>
            <div className={styles.flowBox}>
              Output Text
              <br />
              <small>Clean Result</small>
            </div>
          </div>
        </div>
      </div>

      <div className={styles.example}>
        <h3>Example: Processing "salaaaam 3likom"</h3>
        <div className={styles.exampleFlow}>
          <div className={styles.exampleStage}>
            <strong>Input:</strong> "salaaaam 3likom"
          </div>
          <div className={styles.exampleStage}>
            <strong>After Detection:</strong> Latin script
          </div>
          <div className={styles.exampleStage}>
            <strong>After Normalization:</strong> "salam 3likom"
          </div>
          <div className={styles.exampleStage}>
            <strong>After Tokenization:</strong> ["salam", " ", "3likom"]
          </div>
          <div className={styles.exampleStage}>
            <strong>ICR:</strong> /salam 3alaykum/
          </div>
          <div className={styles.exampleStage}>
            <strong>After Generation:</strong> "سلام عليكم"
          </div>
          <div className={styles.exampleStage}>
            <strong>Final Output:</strong> "سلام عليكم" ✅
          </div>
        </div>
      </div>

      <div className={styles.note}>
        <div className="card">
          <h3>🎯 Key Innovation: ICR</h3>
          <p>
            The <strong>Intermediate Canonical Representation (ICR)</strong> is CaDaR's core innovation. 
            It's a script-independent representation that preserves the phonological essence of Darija, 
            enabling lossless round-trip conversion between scripts.
          </p>
          <p>
            Unlike simple character-by-character transliteration, the ICR maintains context, 
            handles ambiguities, and ensures that meaning is preserved throughout the conversion process.
          </p>
        </div>
      </div>
    </div>
  );
};

export default PipelineVisualization;