// Generated by GitHub Copilot
import React, { useEffect, useRef } from 'react';
import { Animated, Text, StyleSheet, AccessibilityInfo } from 'react-native';
import { Colors } from '../theme/colors';
import { Spacing } from '../theme/spacing';

interface GoalBannerProps {
  /** When true the banner slides in; hides automatically after 4 seconds. */
  visible: boolean;
}

/**
 * Slide-in banner shown when the user reaches their daily calorie goal.
 * Auto-dismisses after 4 seconds.
 * In-app only — no native push notification required.
 * REQ-UX-003
 *
 * Accessibility: announces the goal achievement via `AccessibilityInfo.announceForAccessibility`
 * so screen readers hear it even though the banner is transient.
 */
export default function GoalBanner({ visible }: GoalBannerProps) {
  const slideAnim = useRef(new Animated.Value(-80)).current;
  const opacityAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (!visible) return;

    // Announce for screen readers
    AccessibilityInfo.announceForAccessibility("Goal reached! You've hit your daily calorie target.");

    // Slide in
    Animated.parallel([
      Animated.spring(slideAnim, { toValue: 0, useNativeDriver: true, bounciness: 8 }),
      Animated.timing(opacityAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
    ]).start();

    // Auto-dismiss after 4 seconds
    const timer = setTimeout(() => {
      Animated.parallel([
        Animated.timing(slideAnim, { toValue: -80, duration: 300, useNativeDriver: true }),
        Animated.timing(opacityAnim, { toValue: 0, duration: 300, useNativeDriver: true }),
      ]).start();
    }, 4000);

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

  if (!visible) return null;

  return (
    <Animated.View
      style={[
        styles.banner,
        { transform: [{ translateY: slideAnim }], opacity: opacityAnim },
      ]}
      accessible
      accessibilityRole="alert"
      accessibilityLabel="Goal reached! You've hit your daily calorie target."
    >
      <Text style={styles.text}>🎉 Goal reached! Daily target hit.</Text>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  banner: {
    position: 'absolute',
    top: Spacing.sm,
    left: Spacing.md,
    right: Spacing.md,
    backgroundColor: Colors.primary,
    borderRadius: Spacing.borderRadius.md,
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
    zIndex: 999,
    elevation: 6,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    minHeight: Spacing.touchTarget,
    justifyContent: 'center',
  },
  text: {
    color: Colors.white,
    fontSize: 15,
    fontWeight: '600',
    textAlign: 'center',
  },
});