import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'

interface Voidling {
  id: string
  name: string
  color: string
  mood: 'idle' | 'happy' | 'curious' | 'sleepy'
  type: 'wisp' | 'blob' | 'spark' | 'ember'
  x: number
  y: number
  vx: number
  vy: number
}

interface Particle {
  id: number
  x: number
  y: number
  size: number
  speed: number
  opacity: number
  color: string
}

const VOIDLING_TYPES = [
  { type: 'wisp', color: 'bg-purple-400', glow: 'shadow-purple-500/50', shape: 'rounded-full', description: 'Ethereal and floaty' },
  { type: 'blob', color: 'bg-cyan-400', glow: 'shadow-cyan-500/50', shape: 'rounded-[40%]', description: 'Bouncy and playful' },
  { type: 'spark', color: 'bg-amber-400', glow: 'shadow-amber-500/50', shape: 'rounded-sm', description: 'Energetic and quick' },
  { type: 'ember', color: 'bg-rose-400', glow: 'shadow-rose-500/50', shape: 'rounded-full', description: 'Warm and sleepy' },
]

const MOOD_EMOJIS = {
  idle: '◉',
  happy: '✧',
  curious: '❓',
  sleepy: '💤',
}

const PARTICLE_COLORS = ['bg-purple-400/30', 'bg-cyan-400/30', 'bg-pink-400/30', 'bg-amber-400/30']

function getRandomType(): Voidling['type'] {
  const types: Voidling['type'][] = ['wisp', 'blob', 'spark', 'ember']
  return types[Math.floor(Math.random() * types.length)]
}

function getTypeStyle(type: Voidling['type']) {
  return VOIDLING_TYPES.find(t => t.type === type) || VOIDLING_TYPES[0]
}

function getRandomPosition() {
  return {
    x: Math.random() * 80 + 10,
    y: Math.random() * 60 + 20,
    vx: (Math.random() - 0.5) * 0.3,
    vy: (Math.random() - 0.5) * 0.3,
  }
}

function getRandomMood(): Voidling['mood'] {
  const moods: Voidling['mood'][] = ['idle', 'happy', 'curious', 'sleepy']
  return moods[Math.floor(Math.random() * moods.length)]
}

function generateId() {
  return Math.random().toString(36).substring(2, 9)
}

function getTypeInfo(type: Voidling['type']) {
  return VOIDLING_TYPES.find(t => t.type === type) || VOIDLING_TYPES[0]
}

export default function Chamber() {
  const [voidlings, setVoidlings] = useState<Voidling[]>([])
  const [namingVoidling, setNamingVoidling] = useState<string | null>(null)
  const [newName, setNewName] = useState('')
  const [particles, setParticles] = useState<Particle[]>([])
  const [feedingId, setFeedingId] = useState<string | null>(null)

  useEffect(() => {
    const saved = localStorage.getItem('voidlings')
    if (saved) {
      try {
        setVoidlings(JSON.parse(saved))
      } catch {
        createStarterVoidlings()
      }
    } else {
      createStarterVoidlings()
    }
  }, [])

  useEffect(() => {
    localStorage.setItem('voidlings', JSON.stringify(voidlings))
  }, [voidlings])

  useEffect(() => {
    const interval = setInterval(() => {
      setParticles(prev => {
        const newParticles: Particle[] = prev
          .map(p => ({
            ...p,
            y: p.y - p.speed,
            opacity: p.opacity - 0.005,
          }))
          .filter(p => p.opacity > 0)
        
        if (newParticles.length < 30 && Math.random() > 0.7) {
          newParticles.push({
            id: Date.now() + Math.random(),
            x: Math.random() * 100,
            y: 100,
            size: Math.random() * 4 + 2,
            speed: Math.random() * 0.3 + 0.1,
            opacity: Math.random() * 0.5 + 0.3,
            color: PARTICLE_COLORS[Math.floor(Math.random() * PARTICLE_COLORS.length)],
          })
        }
        return newParticles
      })
    }, 50)
    return () => clearInterval(interval)
  }, [])

  useEffect(() => {
    const interval = setInterval(() => {
      setVoidlings(prev => prev.map(v => {
        let { x, y, vx, vy } = v
        
        if (v.mood === 'sleepy') {
          vx *= 0.95
          vy *= 0.95
        } else if (v.mood === 'happy') {
          vx += (Math.random() - 0.5) * 0.2
          vy += (Math.random() - 0.5) * 0.2
        } else if (v.mood === 'curious') {
          vx += (Math.random() - 0.5) * 0.1
          vy += (Math.random() - 0.5) * 0.1
        }
        
        if (v.type === 'spark') {
          vx *= 1.02
          vy *= 1.02
          if (Math.abs(vx) > 1) vx = vx > 0 ? 1 : -1
          if (Math.abs(vy) > 1) vy = vy > 0 ? 1 : -1
        }
        
        x += vx
        y += vy
        
        if (x < 5 || x > 95) { vx *= -1; x = Math.max(5, Math.min(95, x)) }
        if (y < 10 || y > 90) { vy *= -1; y = Math.max(10, Math.min(90, y)) }
        
        return { ...v, x, y, vx, vy }
      }))
    }, 100)
    return () => clearInterval(interval)
  }, [])

  function createStarterVoidlings() {
    const starters: Voidling[] = [
      { id: generateId(), name: 'Glip', color: 'bg-purple-400', mood: 'idle', type: 'wisp', ...getRandomPosition() },
      { id: generateId(), name: 'Floop', color: 'bg-cyan-400', mood: 'happy', type: 'blob', ...getRandomPosition() },
      { id: generateId(), name: 'Norf', color: 'bg-pink-400', mood: 'curious', type: 'spark', ...getRandomPosition() },
    ]
    setVoidlings(starters)
  }

  function spawnVoidling() {
    const pos = getRandomPosition()
    const type = getRandomType()
    const typeStyles = getTypeStyle(type)
    const newVoidling: Voidling = {
      id: generateId(),
      name: '???',
      color: typeStyles.color,
      mood: getRandomMood(),
      type: type,
      x: pos.x,
      y: pos.y,
      vx: pos.vx,
      vy: pos.vy,
    }
    setVoidlings([...voidlings, newVoidling])
    setNamingVoidling(newVoidling.id)
    setNewName('')
  }

  function startNaming(id: string) {
    setNamingVoidling(id)
    const v = voidlings.find(v => v.id === id)
    setNewName(v?.name === '???' ? '' : v?.name || '')
  }

  function finishNaming(id: string) {
    if (newName.trim()) {
      setVoidlings(voidlings.map(v => 
        v.id === id ? { ...v, name: newName.trim() } : v
      ))
    }
    setNamingVoidling(null)
    setNewName('')
  }

  function changeMood(id: string) {
    const moods: Voidling['mood'][] = ['idle', 'happy', 'curious', 'sleepy']
    setVoidlings(voidlings.map(v => {
      if (v.id === id) {
        const currentIndex = moods.indexOf(v.mood)
        const nextMood = moods[(currentIndex + 1) % moods.length]
        return { ...v, mood: nextMood }
      }
      return v
    }))
  }

  function feedVoidling(id: string) {
    setFeedingId(id)
    setVoidlings(voidlings.map(v => {
      if (v.id === id) {
        return { ...v, mood: 'happy', vy: v.vy - 0.5 }
      }
      return v
    }))
    setTimeout(() => setFeedingId(null), 500)
  }

  function releaseVoidling(id: string) {
    setVoidlings(voidlings.filter(v => v.id !== id))
  }

  const getMoodAnimation = (mood: Voidling['mood']) => {
    switch (mood) {
      case 'happy': return 'animate-bounce'
      case 'sleepy': return 'animate-pulse'
      case 'curious': return 'animate-ping'
      default: return ''
    }
  }

  return (
    <div className="min-h-screen p-8 relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        {particles.map(p => (
          <div
            key={p.id}
            className={`absolute rounded-full ${p.color}`}
            style={{
              left: `${p.x}%`,
              top: `${p.y}%`,
              width: p.size,
              height: p.size,
              opacity: p.opacity,
            }}
          />
        ))}
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-radial from-purple-500/5 to-transparent rounded-full" />
      </div>

      <div className="max-w-6xl mx-auto relative z-10">
        <div className="flex items-center justify-between mb-8">
          <Link 
            to="/" 
            className="text-zinc-500 hover:text-zinc-300 transition-colors text-sm"
          >
            ← Back to Portal
          </Link>
          <h1 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400">
            The Void Chamber
          </h1>
          <button
            onClick={spawnVoidling}
            className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-xl text-sm transition-all duration-200 hover:scale-105 border border-zinc-700"
          >
            + Summon Voidling
          </button>
        </div>

        <div className="relative w-full h-[70vh] bg-zinc-900/30 rounded-3xl border border-zinc-800 overflow-hidden">
          <div className="absolute inset-0">
            <div className="absolute top-10 left-10 w-32 h-32 bg-purple-500/10 rounded-full blur-2xl animate-pulse" />
            <div className="absolute bottom-20 right-20 w-40 h-40 bg-cyan-500/10 rounded-full blur-2xl animate-pulse delay-500" />
            <div className="absolute top-1/2 left-1/3 w-24 h-24 bg-pink-500/10 rounded-full blur-2xl animate-pulse delay-1000" />
          </div>

          {voidlings.length === 0 && (
            <div className="absolute inset-0 flex items-center justify-center text-zinc-500">
              <p>The chamber feels empty... Summon a voidling to begin.</p>
            </div>
          )}

          {voidlings.map((voidling) => {
            const typeInfo = getTypeInfo(voidling.type)
            return (
              <div
                key={voidling.id}
                className="absolute group cursor-pointer transition-all duration-300"
                style={{
                  left: `${voidling.x}%`,
                  top: `${voidling.y}%`,
                  transform: 'translate(-50%, -50%)',
                }}
                onClick={() => changeMood(voidling.id)}
                onDoubleClick={(e) => { e.stopPropagation(); startNaming(voidling.id) }}
              >
                <div
                  className={`
                    ${voidling.color} 
                    ${typeInfo.shape}
                    w-20 h-20 
                    flex items-center justify-center 
                    text-zinc-900 font-bold text-lg
                    transition-all duration-300
                    hover:scale-110
                    shadow-lg ${typeInfo.glow}
                    ${getMoodAnimation(voidling.mood)}
                    ${feedingId === voidling.id ? 'scale-125' : ''}
                    border-4 border-zinc-900/20
                  `}
                >
                  <span className="text-2xl filter drop-shadow-md">{MOOD_EMOJIS[voidling.mood]}</span>
                </div>
                
                <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap flex flex-col items-center gap-1">
                  {namingVoidling === voidling.id ? (
                    <input
                      autoFocus
                      type="text"
                      value={newName}
                      onChange={(e) => setNewName(e.target.value)}
                      onBlur={() => finishNaming(voidling.id)}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') finishNaming(voidling.id)
                      }}
                      className="bg-zinc-800 border border-zinc-600 rounded-lg px-2 py-1 text-xs text-center w-24 focus:outline-none focus:border-purple-400"
                      onClick={(e) => e.stopPropagation()}
                    />
                  ) : (
                    <>
                      <span className="text-xs text-zinc-400 bg-zinc-900/80 px-2 py-1 rounded-lg">
                        {voidling.name}
                      </span>
                      <span className="text-[10px] text-zinc-600 capitalize">
                        {voidling.type}
                      </span>
                    </>
                  )}
                </div>

                <div className="absolute -top-2 -right-2 flex gap-1">
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      feedVoidling(voidling.id)
                    }}
                    className="w-6 h-6 bg-amber-900/80 hover:bg-amber-700 rounded-full text-white text-xs opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                    title="Feed"
                  >
                    ◕
                  </button>
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      releaseVoidling(voidling.id)
                    }}
                    className="w-6 h-6 bg-red-900/80 hover:bg-red-700 rounded-full text-white text-xs opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    ×
                  </button>
                </div>
              </div>
            )
          })}
        </div>

        <div className="mt-6 text-center text-zinc-500 text-sm">
          <p>Click: change mood • Double-click: rename • ◕: feed • ×: release</p>
          <p className="mt-2">Your voidlings: {voidlings.length}</p>
          <div className="mt-3 flex justify-center gap-4 text-xs text-zinc-600">
            {VOIDLING_TYPES.map(t => (
              <span key={t.type} className="flex items-center gap-1">
                <span className={`w-2 h-2 rounded-full ${t.color}`} />
                {t.type}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}