smart-home-tablet/components/VoiceOverlay.tsx

'use client'
import { useEffect, useRef, useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'

type VoiceState = 'idle' | 'wake' | 'command' | 'response' | 'error'
type Agent = 'cosmo' | 'lusya'

interface VoiceEvent {
  event: VoiceState
  agent?: Agent
  text?: string
  timestamp: string
}

const AGENT_STYLE: Record<Agent, { primary: string; secondary: string; name: string; emoji: string }> = {
  cosmo: { primary: '#818cf8', secondary: '#a855f7', name: 'Cosmo',  emoji: '🦞' },
  lusya: { primary: '#ec4899', secondary: '#f43f5e', name: 'Люся', emoji: '👩' },
}

export default function VoiceOverlay() {
  const [state, setState] = useState<VoiceState>('idle')
  const [agent, setAgent] = useState<Agent>('cosmo')
  const [text, setText] = useState('')
  const dismissTimer = useRef<ReturnType<typeof setTimeout> | null>(null)

  const clearDismiss = () => {
    if (dismissTimer.current) {
      clearTimeout(dismissTimer.current)
      dismissTimer.current = null
    }
  }
  const scheduleDismiss = (ms: number) => {
    clearDismiss()
    dismissTimer.current = setTimeout(() => setState('idle'), ms)
  }

  useEffect(() => {
    let es: EventSource | null = null
    let retry: ReturnType<typeof setTimeout> | null = null
    let closedByUs = false

    const connect = () => {
      es = new EventSource('/api/voice/stream')

      es.onmessage = (e) => {
        try {
          const evt: VoiceEvent = JSON.parse(e.data)
          if (evt.agent) setAgent(evt.agent)

          if (evt.event === 'wake') {
            setState('wake')
            setText('')
            scheduleDismiss(20000) // safety net: 20s max without command
          } else if (evt.event === 'command') {
            setState('command')
            setText(evt.text || '')
            scheduleDismiss(30000)
          } else if (evt.event === 'response') {
            setState('response')
            setText(evt.text || '')
            scheduleDismiss(6000)
          } else if (evt.event === 'error') {
            setState('error')
            setText(evt.text || 'Ошибка')
            scheduleDismiss(4000)
          } else if (evt.event === 'idle') {
            clearDismiss()
            setState('idle')
          }
        } catch {}
      }

      es.onerror = () => {
        if (closedByUs) return
        es?.close()
        retry = setTimeout(connect, 3000)
      }
    }

    connect()

    return () => {
      closedByUs = true
      clearDismiss()
      if (retry) clearTimeout(retry)
      es?.close()
    }
  }, [])

  const isActive = state !== 'idle'
  const style = AGENT_STYLE[agent]

  return (
    <AnimatePresence>
      {isActive && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.35 }}
          style={{
            position: 'fixed', inset: 0, zIndex: 300,
            background: 'rgba(5, 5, 15, 0.78)',
            backdropFilter: 'blur(24px)',
            WebkitBackdropFilter: 'blur(24px)' as any,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            gap: 36, padding: 40,
            pointerEvents: 'none',
          }}
        >
          <SiriBlob color={style.primary} color2={style.secondary} state={state} />

          <div style={{ textAlign: 'center', maxWidth: 760 }}>
            <div style={{
              fontSize: 12, color: 'rgba(255,255,255,0.45)', fontWeight: 700,
              letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 14,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            }}>
              <span style={{ fontSize: 18 }}>{style.emoji}</span>
              {style.name}
              {state !== 'wake' && (
                <span style={{
                  display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
                  background: style.primary,
                  marginLeft: 4,
                }} />
              )}
              <span style={{ letterSpacing: '0.1em' }}>
                {state === 'wake' ? '· слушает' : state === 'command' ? '· распознал' : state === 'response' ? '· отвечает' : state === 'error' ? '· ошибка' : ''}
              </span>
            </div>

            <div style={{
              fontSize: state === 'wake' ? 36 : 26,
              fontWeight: 700,
              color: state === 'error' ? '#fca5a5' : 'rgba(255,255,255,0.96)',
              letterSpacing: '-0.5px', lineHeight: 1.35,
              minHeight: 48,
            }}>
              {state === 'wake' ? 'Слушаю…' : (text || '…')}
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

function SiriBlob({ color, color2, state }: { color: string; color2: string; state: VoiceState }) {
  const isIntense = state === 'wake'
  return (
    <div style={{ position: 'relative', width: 220, height: 220 }}>
      {/* Outer pulsing ring */}
      <motion.div
        animate={{
          scale: isIntense ? [1, 1.25, 1] : [1, 1.08, 1],
          opacity: isIntense ? [0.5, 0.15, 0.5] : [0.35, 0.1, 0.35],
        }}
        transition={{
          duration: isIntense ? 1.4 : 3,
          repeat: Infinity,
          ease: 'easeInOut',
        }}
        style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          background: `radial-gradient(circle, ${color}55 0%, transparent 70%)`,
          filter: 'blur(24px)',
        }}
      />
      {/* Inner core */}
      <motion.div
        animate={{
          scale: isIntense ? [1, 1.08, 1] : 1,
        }}
        transition={{
          duration: 1.2,
          repeat: Infinity,
          ease: 'easeInOut',
        }}
        style={{
          position: 'absolute', inset: 50, borderRadius: '50%',
          background: `radial-gradient(circle, ${color} 0%, ${color2} 55%, transparent 80%)`,
          filter: 'blur(14px)',
          boxShadow: `0 0 80px ${color}66, 0 0 40px ${color}44`,
        }}
      />
      {/* Bright center dot */}
      <motion.div
        animate={{ scale: isIntense ? [1, 0.88, 1] : 1 }}
        transition={{ duration: 0.8, repeat: Infinity, ease: 'easeInOut' }}
        style={{
          position: 'absolute', inset: 88, borderRadius: '50%',
          background: `radial-gradient(circle, white 0%, ${color} 60%, transparent 100%)`,
          filter: 'blur(6px)',
          opacity: 0.9,
        }}
      />
    </div>
  )
}