import React, { useEffect, useRef } from "react";
import { Animated, Pressable, Text, View } from "react-native";
import { useTheme } from "../../contexts/ThemeContext";

interface IncomingToastProps {
  sessionName: string;
  preview: string;
  onTap: () => void;
  onDismiss: () => void;
}

const DISPLAY_MS = 4000;

export function IncomingToast({ sessionName, preview, onTap, onDismiss }: IncomingToastProps) {
  const { colors } = useTheme();
  const translateY = useRef(new Animated.Value(-60)).current;

  useEffect(() => {
    // Slide in from above (no opacity — keeps background solid)
    Animated.spring(translateY, {
      toValue: 0,
      useNativeDriver: true,
      tension: 80,
      friction: 10,
    }).start();

    // Auto-dismiss
    const timer = setTimeout(() => {
      Animated.timing(translateY, {
        toValue: -60,
        duration: 200,
        useNativeDriver: true,
      }).start(() => onDismiss());
    }, DISPLAY_MS);

    return () => clearTimeout(timer);
  }, []);

  return (
    <Animated.View
      style={{
        position: "absolute",
        top: 4,
        left: 12,
        right: 12,
        zIndex: 100,
        transform: [{ translateY }],
      }}
    >
      <Pressable
        onPress={onTap}
        style={({ pressed }) => ({
          flexDirection: "row",
          alignItems: "center",
          gap: 10,
          paddingHorizontal: 14,
          paddingVertical: 10,
          borderRadius: 12,
          backgroundColor: pressed ? colors.bgTertiary : colors.bgSecondary,
          borderWidth: 1,
          borderColor: colors.accent,
          shadowColor: "#000",
          shadowOffset: { width: 0, height: 4 },
          shadowOpacity: 0.4,
          shadowRadius: 8,
          elevation: 8,
        })}
      >
        <View
          style={{
            width: 10,
            height: 10,
            borderRadius: 5,
            backgroundColor: colors.accent,
          }}
        />
        <View style={{ flex: 1 }}>
          <Text style={{ color: colors.text, fontSize: 14, fontWeight: "700" }} numberOfLines={1}>
            {sessionName}
          </Text>
          <Text style={{ color: colors.textMuted, fontSize: 12, marginTop: 2 }} numberOfLines={1}>
            {preview}
          </Text>
        </View>
        <Text style={{ color: colors.accent, fontSize: 11, fontWeight: "600" }}>switch</Text>
      </Pressable>
    </Animated.View>
  );
}