/**
 * IncomingCallScreen.tsx — full-screen incoming call (shown when the app is in
 * the foreground; the lock-screen case is handled natively by CallKeep). Pulsing
 * avatar + large Accept/Decline like the native dialer.
 */
import React, { useEffect, useRef } from 'react';
import { View, Text, Pressable, StyleSheet, Animated, Easing, Vibration, SafeAreaView } from 'react-native';
import Avatar from '../components/Avatar';
import { colors, spacing, typography } from '../theme';

interface Props {
  caller: string;
  onAccept: () => void;
  onDecline: () => void;
}

export default function IncomingCallScreen({ caller, onAccept, onDecline }: Props) {
  const pulse = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    // Ringing pulse animation
    const loop = Animated.loop(
      Animated.sequence([
        Animated.timing(pulse, { toValue: 1.12, duration: 900, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
        Animated.timing(pulse, { toValue: 1, duration: 900, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
      ]),
    );
    loop.start();
    // Ring vibration pattern (native ringtone handled by CallKeep on lock screen)
    Vibration.vibrate([0, 800, 1200], true);
    return () => {
      loop.stop();
      Vibration.cancel();
    };
  }, [pulse]);

  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.top}>
        <Text style={styles.label}>ePhone Audio</Text>
        <Animated.View style={{ transform: [{ scale: pulse }], marginTop: spacing.xl }}>
          <Avatar name={caller} size={140} light />
        </Animated.View>
        <Text style={styles.name}>{caller}</Text>
        <Text style={styles.sub}>incoming call…</Text>
      </View>

      <View style={styles.actions}>
        <Action color={colors.decline} icon="✕" label="Decline" onPress={onDecline} />
        <Action color={colors.answer} icon="📞" label="Accept" onPress={onAccept} />
      </View>
    </SafeAreaView>
  );
}

function Action({ color, icon, label, onPress }: { color: string; icon: string; label: string; onPress: () => void }) {
  return (
    <View style={styles.actionWrap}>
      <Pressable
        onPress={onPress}
        style={({ pressed }) => [styles.actionBtn, { backgroundColor: color }, pressed && { opacity: 0.8 }]}
      >
        <Text style={styles.actionIcon}>{icon}</Text>
      </Pressable>
      <Text style={styles.actionLabel}>{label}</Text>
    </View>
  );
}

const BTN = 78;
const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.callBg, justifyContent: 'space-between' },
  top: { alignItems: 'center', marginTop: spacing.xxl },
  label: { ...typography.status, color: colors.callTextSecondary },
  name: { ...typography.callerName, color: colors.callText, marginTop: spacing.lg, textAlign: 'center', paddingHorizontal: spacing.lg },
  sub: { ...typography.status, color: colors.callTextSecondary, marginTop: spacing.sm },
  actions: { flexDirection: 'row', justifyContent: 'space-around', paddingHorizontal: spacing.xl, paddingBottom: spacing.xxl },
  actionWrap: { alignItems: 'center' },
  actionBtn: { width: BTN, height: BTN, borderRadius: BTN / 2, alignItems: 'center', justifyContent: 'center' },
  actionIcon: { fontSize: 34 },
  actionLabel: { ...typography.label, color: colors.callText, marginTop: spacing.sm },
});