/**
 * MicButton — bouton enregistrement vocal avec feedback visuel
 * États : idle → recording (pulsé rouge) → processing (spinner)
 */
import { useEffect, useRef } from 'react'
import { TouchableOpacity, ActivityIndicator, Animated, StyleSheet, View, Text } from 'react-native'
import { Mic, MicOff, Square } from 'lucide-react-native'
import { AudioState } from '@/lib/useAudioRecorder'
import { C } from '@/lib/theme'

interface Props {
  state: AudioState
  onPress: () => void
  errorMsg?: string | null
  size?: number
}

export function MicButton({ state, onPress, errorMsg, size = 20 }: Props) {
  const pulse = useRef(new Animated.Value(1)).current

  useEffect(() => {
    if (state === 'recording') {
      Animated.loop(
        Animated.sequence([
          Animated.timing(pulse, { toValue: 1.25, duration: 600, useNativeDriver: true }),
          Animated.timing(pulse, { toValue: 1, duration: 600, useNativeDriver: true }),
        ])
      ).start()
    } else {
      pulse.stopAnimation()
      pulse.setValue(1)
    }
  }, [state])

  const bgColor =
    state === 'recording' ? '#fee2e2' :
    state === 'processing' ? '#f3ece4' :
    state === 'error' ? '#fee2e2' :
    '#f3ece4'

  const borderColor =
    state === 'recording' ? '#fca5a5' :
    state === 'error' ? '#fca5a5' :
    C.border

  return (
    <Animated.View style={[s.wrap, { backgroundColor: bgColor, borderColor }, { transform: [{ scale: state === 'recording' ? pulse : 1 }] }]}>
      <TouchableOpacity onPress={onPress} disabled={state === 'processing'} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
        {state === 'processing'
          ? <ActivityIndicator size="small" color={C.brand} />
          : state === 'recording'
            ? <Square size={size - 2} color="#e11d48" />
            : state === 'error'
              ? <MicOff size={size} color="#e11d48" />
              : <Mic size={size} color={C.brand} />}
      </TouchableOpacity>
    </Animated.View>
  )
}

const s = StyleSheet.create({
  wrap: {
    width: 40, height: 40, borderRadius: 12,
    borderWidth: 1, alignItems: 'center', justifyContent: 'center',
  },
})