'use client'

import { motion, AnimatePresence } from 'framer-motion'
import { useState, useEffect } from 'react'
import { Code, Network, Zap, Sparkles, Github } from 'lucide-react'
import { TypewriterText } from './TypewriterText'

const roles = [
  { text: 'Software Engineer Lead', icon: Code },
  { text: 'Infrastructure Architect', icon: Network },
  { text: 'Distributed Systems Builder', icon: Zap },
  { text: 'LLM Systems Optimizer', icon: Sparkles },
  { text: 'Open Source Developer', icon: Github },
]

export function HeroBlobFlow() {
  const [index, setIndex] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((prev) => (prev + 1) % roles.length)
    }, 2000)
    return () => clearInterval(interval)
  }, [])

  return (
    <div className="relative w-full max-w-md mx-auto aspect-square flex flex-col items-center justify-center">
      {/* Background glow */}
      <div className="absolute inset-0">
        <motion.div
          animate={{
            scale: [1, 1.15, 1],
            opacity: [0.25, 0.4, 0.25],
          }}
          transition={{
            duration: 6,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
          className="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-full blur-3xl"
        />
      </div>

      {/* Avatar center */}
      <motion.div
        initial={{ scale: 0, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.8, delay: 0.2 }}
        className="relative z-10 w-32 h-32"
      >
        <div className="w-full h-full rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-4xl border-4 border-white dark:border-gray-950 shadow-xl">
          RL
        </div>
      </motion.div>

      {/* Typewriter text below avatar */}
      <TypewriterText />

      {/* Rotating role text */}
      <div className="relative z-10 mt-12 px-6 w-full flex items-center justify-center">
        <AnimatePresence mode="wait">
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -20, scale: 0.95 }}
            transition={{ duration: 0.6, ease: 'easeInOut' }}
            className="absolute text-2xl font-semibold text-gray-900 dark:text-white text-center px-6 flex items-center gap-3 justify-center"
          >
            {(() => {
              const Icon = roles[index].icon
              return <Icon size={28} className="text-blue-600 dark:text-blue-400 flex-shrink-0" />
            })()}
            {roles[index].text}
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  )
}