'use client'

import { motion, AnimatePresence } from 'framer-motion'
import { PresenterState } from '@/lib/presenter/types'

interface AvatarPlaceholderProps {
  state: PresenterState
}

export default function AvatarPlaceholder({ state }: AvatarPlaceholderProps) {
  const isSpeaking = state === 'presenting' || state === 'answering'
  const isIdle = state === 'idle'

  if (isIdle) return null

  return (
    <AnimatePresence>
      <motion.div
        initial={{ scale: 0, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0, opacity: 0 }}
        className="fixed bottom-24 right-6 z-40"
      >
        <div className="relative w-16 h-16">
          {/* Pulse rings when speaking */}
          {isSpeaking && (
            <>
              <motion.div
                className="absolute inset-0 rounded-full border border-indigo-400/30"
                animate={{ scale: [1, 1.4, 1], opacity: [0.3, 0, 0.3] }}
                transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
              />
              <motion.div
                className="absolute inset-0 rounded-full border border-purple-400/20"
                animate={{ scale: [1, 1.6, 1], opacity: [0.2, 0, 0.2] }}
                transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut', delay: 0.2 }}
              />
            </>
          )}

          {/* Avatar circle */}
          <motion.div
            className={`w-16 h-16 rounded-full flex items-center justify-center shadow-lg
              ${isSpeaking
                ? 'bg-gradient-to-br from-indigo-500/40 to-purple-500/40 border-2 border-indigo-400/50'
                : 'bg-gradient-to-br from-indigo-500/20 to-purple-500/20 border border-indigo-400/30'
              }`}
            animate={isSpeaking ? { scale: [1, 1.05, 1] } : {}}
            transition={{ duration: 0.8, repeat: Infinity, ease: 'easeInOut' }}
          >
            {/* Bot icon */}
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
              className={isSpeaking ? 'text-indigo-300' : 'text-indigo-400/60'}
            >
              <rect x="3" y="11" width="18" height="10" rx="2" />
              <circle cx="12" cy="5" r="2" />
              <path d="M12 7v4" />
              <circle cx="8" cy="16" r="1" fill="currentColor" />
              <circle cx="16" cy="16" r="1" fill="currentColor" />
            </svg>
          </motion.div>

          {/* State dot */}
          <div className={`absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-black/80
            ${state === 'presenting' ? 'bg-green-400' :
              state === 'paused' ? 'bg-yellow-400' :
              state === 'answering' ? 'bg-blue-400' :
              'bg-indigo-400'
            }`}
          />
        </div>
      </motion.div>
    </AnimatePresence>
  )
}