import React, { useState, useEffect } from 'react';
import { Mail, Globe, Book, Award, School, Briefcase, Binary, Database, Gamepad2, Sword, Brain, Zap } from 'lucide-react';

export default function CyberpunkProfile() {
  const [glowColor, setGlowColor] = useState('rgb(0, 255, 255)');
  const [isLoading, setIsLoading] = useState(true);
  const [xpLevel, setXpLevel] = useState(0);

  useEffect(() => {
    const colors = [
      'rgb(255, 0, 0)',    // Red
      'rgb(255, 165, 0)',  // Orange
      'rgb(255, 255, 0)',  // Yellow
      'rgb(0, 255, 0)',    // Green
      'rgb(0, 255, 255)',  // Cyan
      'rgb(0, 0, 255)',    // Blue
      'rgb(255, 0, 255)'   // Magenta
    ];
    let index = 0;
    const interval = setInterval(() => {
      index = (index + 1) % colors.length;
      setGlowColor(colors[index]);
    }, 1000);

    setTimeout(() => setIsLoading(false), 1500);

    // XP Animation
    const xpInterval = setInterval(() => {
      setXpLevel(prev => (prev < 100 ? prev + 1 : 0));
    }, 50);

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

  if (isLoading) {
    return (
      <div className="h-screen flex items-center justify-center bg-black">
        <div className="text-4xl font-bold animate-pulse bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500 bg-clip-text text-transparent">
          LOADING PROFILE v2.0.24...
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-8 relative overflow-hidden" style={{
      backgroundImage: 'linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("/api/placeholder/1920/1080")',
      backgroundSize: 'cover',
      backgroundAttachment: 'fixed'
    }}>
      {/* Rainbow Border */}
      <div className="fixed top-0 left-0 w-full h-2 animate-pulse bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500"></div>
      
      {/* Floating Particles Background */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {[...Array(20)].map((_, i) => (
          <div
            key={i}
            className="absolute w-2 h-2 bg-blue-500 rounded-full animate-float"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 5}s`,
              opacity: 0.3
            }}
          />
        ))}
      </div>

      {/* Header Section */}
      <div className="mb-12 text-center relative">
        <div className="absolute inset-0 bg-black/50 backdrop-blur-sm -z-10 rounded-lg border border-purple-500/50"></div>
        <div className="flex justify-center mb-4">
          <img src="/api/placeholder/150/150" alt="Profile" className="rounded-full border-4 border-purple-500 animate-pulse" />
        </div>
        <h1 className="text-6xl font-bold mb-4 relative bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500 bg-clip-text text-transparent" style={{
          textShadow: `0 0 10px ${glowColor}, 0 0 20px ${glowColor}`
        }}>
          So Miyagawa
          <div className="absolute -top-4 -right-4 text-xs animate-ping text-cyan-500">LVL 99</div>
        </h1>
        <h2 className="text-2xl mb-6 font-cyber relative">
          <span className="bg-gradient-to-r from-yellow-500 to-pink-500 bg-clip-text text-transparent">
            Digital Humanities // Language Systems Engineer
          </span>
        </h2>
        
        {/* XP Bar */}
        <div className="max-w-md mx-auto mb-6">
          <div className="h-4 bg-gray-800 rounded-full overflow-hidden border border-cyan-500">
            <div 
              className="h-full bg-gradient-to-r from-cyan-500 to-purple-500 transition-all duration-300"
              style={{ width: `${xpLevel}%` }}
            />
          </div>
          <div className="text-sm text-cyan-400 mt-1">XP: {xpLevel}/100</div>
        </div>

        <div className="flex justify-center gap-6 text-gray-300">
          <div className="flex items-center gap-2 hover:text-pink-400 transition-colors cursor-pointer group">
            <Mail className="animate-pulse group-hover:animate-spin" size={18} />
            <span>miyagawa.so.kbu.tsukuba.ac.jp</span>
          </div>
          <div className="flex items-center gap-2 hover:text-pink-400 transition-colors group">
            <Globe className="animate-pulse group-hover:animate-spin" size={18} />
            <a href="https://somiyagawa.com" className="hover:underline">somiyagawa.com</a>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
        {/* Left Column */}
        <div className="space-y-8">
          {/* Current Positions */}
          <section className="bg-black/60 p-6 rounded-lg border-2 border-pink-500/30 backdrop-blur-sm hover:border-pink-500 transition-all duration-300 transform hover:scale-105">
            <div className="flex items-center gap-2 mb-4">
              <Gamepad2 className="text-pink-400 animate-bounce" size={24} />
              <h2 className="text-2xl font-bold text-pink-400">Current Quests</h2>
            </div>
            <ul className="space-y-2 text-gray-300">
              <li className="flex items-center gap-2 group">
                <span className="text-pink-500 group-hover:animate-spin">⚔️</span>
                <span className="group-hover:text-pink-300">Associate Professor, University of Tsukuba</span>
              </li>
              <li className="flex items-center gap-2 group">
                <span className="text-pink-500 group-hover:animate-spin">⚔️</span>
                <span className="group-hover:text-pink-300">Visiting Associate Professor, NINJAL</span>
              </li>
              <li className="flex items-center gap-2 group">
                <span className="text-pink-500 group-hover:animate-spin">⚔️</span>
                <span className="group-hover:text-pink-300">Lecturer, Waseda University</span>
              </li>
            </ul>
          </section>

          {/* Education */}
          <section className="bg-black/60 p-6 rounded-lg border-2 border-cyan-500/30 backdrop-blur-sm hover:border-cyan-500 transition-all duration-300 transform hover:scale-105">
            <div className="flex items-center gap-2 mb-4">
              <Brain className="text-cyan-400 animate-pulse" size={24} />
              <h2 className="text-2xl font-bold text-cyan-400">Skill Tree Mastery</h2>
            </div>
            <ul className="space-y-4 text-gray-300">
              <li className="group">
                <div className="font-semibold text-cyan-300 group-hover:text-cyan-400">
                  Ph.D. Egyptology and Coptic Studies
                  <span className="ml-2 text-xs bg-cyan-500 px-2 py-1 rounded-full">+100 INT</span>
                </div>
                <div className="text-gray-400">University of Göttingen [2022]</div>
              </li>
              <li className="group">
                <div className="font-semibold text-cyan-300 group-hover:text-cyan-400">
                  M.A. Linguistics
                  <span className="ml-2 text-xs bg-cyan-500 px-2 py-1 rounded-full">+75 INT</span>
                </div>
                <div className="text-gray-400">Kyoto University [2015]</div>
              </li>
            </ul>
          </section>
        </div>

        {/* Right Column */}
        <div className="space-y-8">
          {/* Research Interests */}
          <section className="bg-black/60 p-6 rounded-lg border-2 border-green-500/30 backdrop-blur-sm hover:border-green-500 transition-all duration-300 transform hover:scale-105">
            <div className="flex items-center gap-2 mb-4">
              <Zap className="text-green-400 animate-pulse" size={24} />
              <h2 className="text-2xl font-bold text-green-400">Power Skills</h2>
            </div>
            <ul className="grid grid-cols-2 gap-2">
              {[
                ["Historical Linguistics", 95],
                ["Digital Humanities", 92],
                ["Egyptology", 88],
                ["Coptic Studies", 90],
                ["NLP", 85],
                ["Linguistic Typology", 87]
              ].map(([item, level], index) => (
                <li key={index} className="group">
                  <div className="flex items-center gap-2 text-gray-300">
                    <span className="text-green-500 animate-pulse">⚡</span>
                    <div className="w-full">
                      <div className="group-hover:text-green-300">{item}</div>
                      <div className="h-2 bg-gray-800 rounded-full mt-1">
                        <div 
                          className="h-full bg-gradient-to-r from-green-500 to-cyan-500 rounded-full"
                          style={{ width: `${level}%` }}
                        />
                      </div>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </section>

          {/* Awards */}
          <section className="bg-black/60 p-6 rounded-lg border-2 border-yellow-500/30 backdrop-blur-sm hover:border-yellow-500 transition-all duration-300 transform hover:scale-105">
            <div className="flex items-center gap-2 mb-4">
              <Award className="text-yellow-400 animate-spin" size={24} />
              <h2 className="text-2xl font-bold text-yellow-400">Achievement Unlocks</h2>
            </div>
            <ul className="space-y-3 text-gray-300">
              {[
                ["Director's Award", "NINJAL, 2023", "🏆"],
                ["Academic Award", "Digital Archives Society, 2022", "🌟"],
                ["Clark Award", "Hokkaido University, 2013", "✨"]
              ].map(([title, detail, emoji], index) => (
                <li key={index} className="flex items-center gap-2 group">
                  <span className="text-yellow-500 text-2xl animate-bounce">{emoji}</span>
                  <div>
                    <div className="font-semibold text-yellow-300 group-hover:text-yellow-400">{title}</div>
                    <div className="text-gray-400">{detail}</div>
                  </div>
                </li>
              ))}
            </ul>
          </section>
        </div>
      </div>

      {/* Research Experience Timeline */}
      <section className="mt-8 max-w-6xl mx-auto bg-black/60 p-6 rounded-lg border-2 border-blue-500/30 backdrop-blur-sm hover:border-blue-500 transition-all duration-300">
        <div className="flex items-center gap-2 mb-6">
          <Sword className="text-blue-400 animate-pulse" size={24} />
          <h2 className="text-2xl font-bold text-blue-400">Quest History</h2>
        </div>
        <div className="space-y-4">
          {[
            ["2017-2020", "Digital Humanities Advisor", "Egyptian Museum and Papyrus Collection", "🏛️"],
            ["2014-2022", "Research Fellow", "Coptic SCRIPTORIUM Project", "📚"],
            ["2015-2020", "Research Fellow", "DFG Special Research Program", "🔬"],
            ["2017-2018", "Visiting Researcher", "Hebrew University of Jerusalem", "🌍"]
          ].map(([year, title, org, emoji], index) => (
            <div key={index} className="flex gap-4 items-start group hover:bg-blue-500/10 p-2 rounded-lg transition-colors">
              <div className="text-blue-400 font-mono whitespace-nowrap flex items-center gap-2">
                <span className="text-xl">{emoji}</span>
                [{year}]
              </div>
              <div>
                <div className="font-semibold text-blue-300 group-hover:text-blue-400">{title}</div>
                <div className="text-gray-400">{org}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}