import { Text } from '@/aesthetics/Text';
import { font, radius, spacing, useColors } from '@/aesthetics/styles';
import { getAllIngredients, isIngredientEnabled } from '@/add-log/utils/ingredients';
import type { StagedFoodLog } from '@/types/foodlog';
import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native';
import Animated, { FadeIn } from 'react-native-reanimated';

type IngredientPillListProps = {
  log: StagedFoodLog;
  onToggle: (logId: string, ingredient: string, isEnabled: boolean) => void;
};

const STAGGER_MS = 60;

export function IngredientPillList({ log, onToggle }: IngredientPillListProps) {
  const c = useColors();
  const allIngredients = getAllIngredients(log);
  const isStreaming = log.detectionPhase === 'streaming';

  if (log.regeneratingIngredients) {
    const humanTouched = [...log.userEnabledIngredients, ...log.userDisabledIngredients];
    if (humanTouched.length === 0) {
      return (
        <View style={styles.regeneratingRow}>
          <ActivityIndicator size="small" color={c.tertiaryText} />
        </View>
      );
    }
    return (
      <View style={styles.container}>
        <View style={styles.pillsRow}>
          {log.userEnabledIngredients.map(ingredient => (
            <Pressable
              key={ingredient}
              style={[styles.pill, { backgroundColor: c.tagBg }]}
              onPress={() => onToggle(log.id, ingredient, true)}
            >
              <Text style={[styles.pillText, { color: c.text }]}>{ingredient}</Text>
            </Pressable>
          ))}
          {log.userDisabledIngredients.map(ingredient => (
            <Pressable
              key={ingredient}
              style={[styles.pill, { backgroundColor: c.borderSubtle }]}
              onPress={() => onToggle(log.id, ingredient, false)}
            >
              <Text style={[styles.pillTextOff, { color: c.tertiaryText }]}>{ingredient}</Text>
            </Pressable>
          ))}
        </View>
        <View style={styles.regeneratingRow}>
          <ActivityIndicator size="small" color={c.tertiaryText} />
        </View>
      </View>
    );
  }

  if (allIngredients.length === 0) return null;

  return (
    <View style={styles.container}>
      <View style={styles.pillsRow}>
        {allIngredients.map((ingredient, i) => {
          const enabled = isIngredientEnabled(log, ingredient);
          const pill = (
            <Pressable
              key={ingredient}
              style={[styles.pill, { backgroundColor: enabled ? c.tagBg : c.borderSubtle }]}
              onPress={() => onToggle(log.id, ingredient, enabled)}
            >
              <Text
                style={[
                  enabled ? styles.pillText : styles.pillTextOff,
                  { color: enabled ? c.text : c.tertiaryText },
                ]}
              >
                {ingredient}
              </Text>
            </Pressable>
          );
          if (isStreaming) {
            return (
              <Animated.View key={ingredient} entering={FadeIn.delay(i * STAGGER_MS).duration(200)}>
                {pill}
              </Animated.View>
            );
          }
          return pill;
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { marginTop: spacing.sm },
  regeneratingRow: { marginTop: spacing.sm, height: 24, justifyContent: 'center' },
  pillsRow: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.xs },
  pill: {
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.xs,
    borderRadius: radius.pill,
  },
  pillText: { fontSize: font.xs },
  pillTextOff: { fontSize: font.xs, textDecorationLine: 'line-through' },
});