import React, { useState, useEffect } from 'react';

export default function MLCodeDemo() {
  const [lines, setLines] = useState([]);
  const [isRunning, setIsRunning] = useState(false);

  const codeLines = [
    { text: '$ python train_model.py', color: 'text-green-400' },
    { text: 'Initializing neural network...', color: 'text-blue-400' },
    { text: 'Loading dataset: 50,000 samples', color: 'text-gray-300' },
    { text: 'Architecture: [784, 128, 64, 10]', color: 'text-purple-400' },
    { text: '', color: '' },
    { text: 'Epoch 1/10 - loss: 0.8432 - acc: 0.7234 ████░░░░░░', color: 'text-yellow-400' },
    { text: 'Epoch 2/10 - loss: 0.4521 - acc: 0.8456 ███████░░░', color: 'text-yellow-400' },
    { text: 'Epoch 3/10 - loss: 0.3012 - acc: 0.9012 █████████░', color: 'text-yellow-400' },
    { text: 'Epoch 4/10 - loss: 0.2234 - acc: 0.9234 ██████████', color: 'text-yellow-400' },
    { text: 'Epoch 5/10 - loss: 0.1823 - acc: 0.9445 ██████████', color: 'text-yellow-400' },
    { text: '', color: '' },
    { text: '✓ Training complete!', color: 'text-green-400' },
    { text: '✓ Model saved to model.h5', color: 'text-green-400' },
    { text: 'Final accuracy: 94.45%', color: 'text-cyan-400' },
  ];

  useEffect(() => {
    if (!isRunning) return;

    let index = 0;
    const interval = setInterval(() => {
      if (index < codeLines.length) {
        setLines(prev => [...prev, codeLines[index]]);
        index++;
      } else {
        setIsRunning(false);
      }
    }, 400);

    return () => clearInterval(interval);
  }, [isRunning]);

  const runCode = () => {
    setLines([]);
    setIsRunning(true);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-black flex items-center justify-center p-8">
      <div className="max-w-3xl w-full">
        <div className="mb-4 flex items-center justify-between">
          <h1 className="text-2xl font-bold text-white">ML Training Terminal</h1>
          <button
            onClick={runCode}
            disabled={isRunning}
            className="px-6 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-lg font-semibold hover:from-green-600 hover:to-emerald-700 disabled:opacity-50 transition-all transform hover:scale-105"
          >
            {isRunning ? '▶ Running...' : '▶ Run Code'}
          </button>
        </div>

        <div className="bg-gray-950 rounded-lg shadow-2xl border border-gray-800 overflow-hidden">
          <div className="bg-gray-800 px-4 py-2 flex items-center gap-2 border-b border-gray-700">
            <div className="w-3 h-3 rounded-full bg-red-500"></div>
            <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
            <div className="w-3 h-3 rounded-full bg-green-500"></div>
            <span className="ml-2 text-gray-400 text-sm font-mono">terminal</span>
          </div>

          <div className="p-6 font-mono text-sm h-96 overflow-auto">
            {lines.map((line, i) => (
              <div
                key={i}
                className={`${line.color} mb-1 transition-all duration-300`}
                style={{
                  animation: 'fadeIn 0.3s ease-in',
                  opacity: 1
                }}
              >
                {line.text || '\u00A0'}
              </div>
            ))}
            {isRunning && (
              <span className="text-white animate-pulse">▋</span>
            )}
          </div>
        </div>

        <div className="mt-4 text-gray-500 text-sm text-center">
          Simulated ML training output • Click "Run Code" to start
        </div>
      </div>

      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(-5px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `}</style>
    </div>
  );
}