import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

const bootLogs = [
  'ИНИЦИАЛИЗАЦИЯ СИСТЕМЫ...',
  'ЗАГРУЗКА ЯДРА [##########......]',
  'МОНТИРОВАНИЕ ТОМОВ...',
  'ПОДКЛЮЧЕНИЕ К ЗАЩИЩЕННОЙ СЕТИ...',
  'ДОСТУП РАЗРЕШЕН.'
];

interface Props {
  onComplete: () => void;
}

const BootAnimation: React.FC<Props> = ({ onComplete }) => {
  const [logs, setLogs] = useState<string[]>([]);

  useEffect(() => {
    let delay = 0;
    bootLogs.forEach((log, index) => {
      delay += 200 + Math.random() * 300;
      setTimeout(() => {
        setLogs(prev => [...prev, log]);
        if (index === bootLogs.length - 1) {
          setTimeout(onComplete, 800);
        }
      }, delay);
    });
  }, [onComplete]);

  return (
    <motion.div
      exit={{ y: "-100%" }}
      transition={{ duration: 0.8, ease: [0.76, 0, 0.24, 1] }}
      className="fixed inset-0 z-[100] flex flex-col justify-between bg-[#0e0e10] p-8 md:p-12 text-[#20e3b2] font-mono text-xs uppercase"
    >
      <div className="flex justify-between w-full border-b border-[#20e3b2]/20 pb-4">
        <span>iiEasy // ЗАГРУЗКА</span>
        <span>V 1.0</span>
      </div>

      <div className="w-full max-w-lg">
        {logs.map((log, i) => (
          <motion.div 
            key={i}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="mb-1"
          >
            <span className="text-[#666] mr-2">
                {String(i).padStart(2, '0')} ::
            </span>
            {log}
          </motion.div>
        ))}
        <motion.div 
          animate={{ opacity: [0, 1, 0] }} 
          transition={{ repeat: Infinity, duration: 0.2 }}
          className="w-3 h-4 bg-[#20e3b2] mt-2 inline-block"
        />
      </div>

      <div className="flex justify-between w-full border-t border-[#20e3b2]/20 pt-4 text-[#666]">
        <span>ПАМЯТЬ: 128TB</span>
        <span>CPU: ОПТИМАЛЬНО</span>
      </div>
    </motion.div>
  );
};

export default BootAnimation;