import React, { useCallback, useRef, useState } from "react";
import { Animated, Pressable, Text, View } from "react-native";
import * as Haptics from "expo-haptics";
import { startRecording, stopRecording } from "../../services/audio";
import { Audio } from "expo-av";

interface VoiceButtonProps {
  onVoiceMessage: (audioUri: string, durationMs: number) => void;
}

const VOICE_BUTTON_SIZE = 88;

export function VoiceButton({ onVoiceMessage }: VoiceButtonProps) {
  const [isRecording, setIsRecording] = useState(false);
  const recordingRef = useRef<Audio.Recording | null>(null);
  const scaleAnim = useRef(new Animated.Value(1)).current;
  const pulseAnim = useRef(new Animated.Value(1)).current;
  const pulseLoop = useRef<Animated.CompositeAnimation | null>(null);

  const startPulse = useCallback(() => {
    pulseLoop.current = Animated.loop(
      Animated.sequence([
        Animated.timing(pulseAnim, {
          toValue: 1.15,
          duration: 600,
          useNativeDriver: true,
        }),
        Animated.timing(pulseAnim, {
          toValue: 1,
          duration: 600,
          useNativeDriver: true,
        }),
      ])
    );
    pulseLoop.current.start();
  }, [pulseAnim]);

  const stopPulse = useCallback(() => {
    pulseLoop.current?.stop();
    pulseAnim.setValue(1);
  }, [pulseAnim]);

  const handlePressIn = useCallback(async () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

    Animated.spring(scaleAnim, {
      toValue: 0.92,
      useNativeDriver: true,
    }).start();

    const recording = await startRecording();
    if (recording) {
      recordingRef.current = recording;
      setIsRecording(true);
      startPulse();
    }
  }, [scaleAnim, startPulse]);

  const handlePressOut = useCallback(async () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

    Animated.spring(scaleAnim, {
      toValue: 1,
      useNativeDriver: true,
    }).start();

    stopPulse();
    setIsRecording(false);

    if (recordingRef.current) {
      const result = await stopRecording();
      recordingRef.current = null;

      if (result && result.durationMs > 500) {
        onVoiceMessage(result.uri, result.durationMs);
      }
    }
  }, [scaleAnim, stopPulse, onVoiceMessage]);

  return (
    <View className="items-center justify-center py-4">
      {/* Pulse ring — only visible while recording */}
      <Animated.View
        style={{
          position: "absolute",
          width: VOICE_BUTTON_SIZE + 24,
          height: VOICE_BUTTON_SIZE + 24,
          borderRadius: (VOICE_BUTTON_SIZE + 24) / 2,
          backgroundColor: isRecording ? "rgba(255, 159, 67, 0.15)" : "transparent",
          transform: [{ scale: pulseAnim }],
        }}
      />

      {/* Button */}
      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
        <Pressable
          onPressIn={handlePressIn}
          onPressOut={handlePressOut}
          style={{
            width: VOICE_BUTTON_SIZE,
            height: VOICE_BUTTON_SIZE,
            borderRadius: VOICE_BUTTON_SIZE / 2,
            backgroundColor: isRecording ? "#FF9F43" : "#4A9EFF",
            alignItems: "center",
            justifyContent: "center",
            shadowColor: isRecording ? "#FF9F43" : "#4A9EFF",
            shadowOffset: { width: 0, height: 4 },
            shadowOpacity: 0.4,
            shadowRadius: 12,
            elevation: 8,
          }}
        >
          <Text style={{ fontSize: 32 }}>{isRecording ? "🎙" : "🎤"}</Text>
        </Pressable>
      </Animated.View>

      <Text className="text-pai-text-muted text-xs mt-3">
        {isRecording ? "Release to send" : "Hold to talk"}
      </Text>
    </View>
  );
}