import React, { useState, useEffect } from 'react';
import styles from './Playground.module.css';

export default function Playground() {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');
  const [operation, setOperation] = useState('ara2bizi');
  const [darija] = useState('Ma');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // Simulate processing (in real implementation, would call backend)
    if (!input.trim()) {
      setOutput('');
      return;
    }

    setIsLoading(true);
    const timer = setTimeout(() => {
      // Mock transliteration results
      let result = '';
      switch (operation) {
        case 'ara2bizi':
          result = mockAra2bizi(input);
          break;
        case 'bizi2ara':
          result = mockBizi2ara(input);
          break;
        case 'ara2ara':
          result = mockAra2ara(input);
          break;
        case 'bizi2bizi':
          result = mockBizi2bizi(input);
          break;
        default:
          result = input;
      }
      setOutput(result);
      setIsLoading(false);
    }, 300);

    return () => clearTimeout(timer);
  }, [input, operation]);

  const mockAra2bizi = (text) => {
    // Simplified mock for demo
    return text
      .replace(/سلام/g, 'salam')
      .replace(/عليكم/g, '3likom')
      .replace(/كيفاش/g, 'kifash')
      .replace(/داير/g, 'dayer')
      .replace(/؟/g, '?')
      .replace(/،/g, ',');
  };

  const mockBizi2ara = (text) => {
    // Simplified mock for demo
    return text
      .replace(/salam/g, 'سلام')
      .replace(/3likom/g, 'عليكم')
      .replace(/kifash/g, 'كيفاش')
      .replace(/dayer/g, 'داير')
      .replace(/\?/g, '؟')
      .replace(/,/g, '،');
  };

  const mockAra2ara = (text) => {
    // Mock standardization
    return text
      .replace(/أنَا/g, 'انا')
      .replace(/مِنْ/g, 'من')
      .replace(/المَغْرِب/g, 'المغرب')
      .replace(/أ/g, 'ا');
  };

  const mockBizi2bizi = (text) => {
    // Mock standardization
    return text
      .replace(/a+/g, 'a')
      .replace(/o+/g, 'o')
      .replace(/i+/g, 'i')
      .replace(/e+/g, 'e')
      .replace(/\s+/g, ' ');
  };

  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text);
  };

  const clearAll = () => {
    setInput('');
    setOutput('');
  };

  const swapTexts = () => {
    const temp = input;
    setInput(output);
    setOutput(temp);
    
    // Swap operation
    if (operation === 'ara2bizi') setOperation('bizi2ara');
    else if (operation === 'bizi2ara') setOperation('ara2bizi');
  };

  return (
    <div className={styles.playground}>
      <div className="container">
        <h1>CaDaR Interactive Playground</h1>
        <p>Try CaDaR's bidirectional transliteration in real-time</p>

        <div className={styles.controls}>
          <div className={styles.operationSelector}>
            <label>Operation:</label>
            <select
              value={operation}
              onChange={(e) => setOperation(e.target.value)}
            >
              <option value="ara2bizi">Arabic → Latin (Bizi)</option>
              <option value="bizi2ara">Latin (Bizi) → Arabic</option>
              <option value="ara2ara">Standardize Arabic</option>
              <option value="bizi2bizi">Standardize Latin</option>
            </select>
          </div>

          <div className={styles.buttons}>
            <button onClick={clearAll} className="button button--outline">
              Clear
            </button>
            <button onClick={swapTexts} className="button button--outline">
              Swap
            </button>
          </div>
        </div>

        <div className={styles.textAreas}>
          <div className={styles.textAreaContainer}>
            <label>Input</label>
            <textarea
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder={
                operation.includes('ara') 
                  ? "أدخل النص العربي..." 
                  : "Enter Latin text..."
              }
              className={styles.textArea}
              rows={6}
            />
            <div className={styles.characterCount}>
              {input.length} characters
            </div>
          </div>

          <div className={styles.textAreaContainer}>
            <label>Output</label>
            <textarea
              value={output}
              readOnly
              className={`${styles.textArea} ${styles.output}`}
              rows={6}
            />
            <div className={styles.outputActions}>
              <button 
                onClick={() => copyToClipboard(output)}
                className="button button--primary button--sm"
                disabled={!output}
              >
                Copy
              </button>
              <span className={styles.characterCount}>
                {output.length} characters
              </span>
            </div>
          </div>
        </div>

        {isLoading && (
          <div className={styles.loading}>
            Processing...
          </div>
        )}

        <div className={styles.examples}>
          <h3>Try These Examples</h3>
          <div className={styles.exampleButtons}>
            <button
              onClick={() => setInput("سلام عليكم")}
              className="button button--outline button--sm"
            >
              سلام عليكم
            </button>
            <button
              onClick={() => setInput("kifash dayer?")}
              className="button button--outline button--sm"
            >
              kifash dayer?
            </button>
            <button
              onClick={() => setInput("salaaaam bzaaaaf")}
              className="button button--outline button--sm"
            >
              salaaaam bzaaaaf
            </button>
            <button
              onClick={() => setInput("أنَا مِنْ المَغْرِب")}
              className="button button--outline button--sm"
            >
              أنَا مِنْ المَغْرِب
            </button>
          </div>
        </div>

        <div className={styles.info}>
          <div className="card">
            <h3>💡 Tips</h3>
            <ul>
              <li>CaDaR uses intelligent context-aware mapping</li>
              <li>It handles Darija-specific patterns like "3" for "ع" and "7" for "ح"</li>
              <li>Standardization removes duplicate characters and normalizes diacritics</li>
              <li>Round-trip conversion preserves meaning perfectly</li>
            </ul>
          </div>

          <div className="card">
            <h3>🔧 Features</h3>
            <ul>
              <li>Bidirectional transliteration with perfect round-trip</li>
              <li>Context-aware character mapping</li>
              <li>Text standardization and cleaning</li>
              <li>Performance: ~1-2ms per sentence</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}