import { IngredientTagList } from '@/add-log/components/IngredientTagList';
import { BottomSheet, BottomSheetTextInput } from '@/aesthetics/BottomSheet';
import { Text } from '@/aesthetics/Text';
import { colors, useColors } from '@/aesthetics/styles';
import { useHaptics } from '@/aesthetics/useHaptics';
import { useStrings } from '@/common/hooks/useStrings';
import type { Suggestion } from '@/types/foodlog';
import { Plus, X } from 'lucide-react-native';
import { useState } from 'react';
import { Pressable, ScrollView, StyleSheet, View } from 'react-native';

type SuggestionListProps = {
  suggestions: Suggestion[];
  onPressSuggestion: (suggestion: Suggestion) => void;
  onDeleteSuggestion: (id: string) => void;
  onAddSuggestion: (name: string, ingredients: string[]) => void;
};

export function SuggestionList({
  suggestions,
  onPressSuggestion,
  onDeleteSuggestion,
  onAddSuggestion,
}: SuggestionListProps) {
  const c = useColors();
  const strings = useStrings();
  const { impact, ImpactStyle } = useHaptics();
  const [editMode, setEditMode] = useState(false);
  const [showAddModal, setShowAddModal] = useState(false);
  const [newName, setNewName] = useState('');
  const [newIngredients, setNewIngredients] = useState<string[]>([]);
  const [newIngredient, setNewIngredient] = useState('');

  const closeAddModal = () => {
    setShowAddModal(false);
    setNewName('');
    setNewIngredients([]);
    setNewIngredient('');
  };

  const handleAddSuggestion = () => {
    const trimmedName = newName.trim();
    if (!trimmedName) return;
    onAddSuggestion(trimmedName, newIngredients);
    closeAddModal();
  };

  const handleAddIngredient = () => {
    const trimmed = newIngredient.trim();
    if (trimmed && !newIngredients.includes(trimmed)) {
      setNewIngredients(prev => [...prev, trimmed]);
    }
    setNewIngredient('');
  };

  const handleRemoveIngredient = (ingredient: string) => {
    setNewIngredients(prev => prev.filter(i => i !== ingredient));
  };

  return (
    <>
      <View style={styles.suggestionsArea}>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.pillScroll}
          keyboardShouldPersistTaps="handled"
        >
          {suggestions.map(suggestion => (
            <View key={suggestion.id}>
              <Pressable
                onPress={() => {
                  if (editMode) {
                    setEditMode(false);
                    return;
                  }
                  onPressSuggestion(suggestion);
                }}
                onLongPress={() => {
                  impact(ImpactStyle.Medium);
                  setEditMode(true);
                }}
                delayLongPress={300}
                style={({ pressed }) => [styles.pill, { opacity: pressed ? 0.7 : 1 }]}
              >
                <View style={styles.pillBlur}>
                  <Text style={styles.pillText}>{suggestion.label}</Text>
                </View>
                {editMode && (
                  <Pressable
                    style={styles.pillDelete}
                    onPress={() => onDeleteSuggestion(suggestion.id)}
                    hitSlop={8}
                  >
                    <X size={10} color={colors.camera.text} />
                  </Pressable>
                )}
              </Pressable>
            </View>
          ))}
          <View>
            {editMode ? (
              <Pressable style={styles.pill} onPress={() => setEditMode(false)}>
                <View style={[styles.pillBlur, styles.donePillBlur]}>
                  <Text style={styles.doneText}>{strings.common.done}</Text>
                </View>
              </Pressable>
            ) : (
              <Pressable style={styles.pill} onPress={() => setShowAddModal(true)}>
                <View style={[styles.pillBlur, styles.addPillBlur]}>
                  <Plus size={16} color={colors.camera.text} />
                </View>
              </Pressable>
            )}
          </View>
        </ScrollView>
      </View>

      <BottomSheet
        visible={showAddModal}
        onClose={closeAddModal}
        title={strings.addLog.log.addShortcut}
      >
        <Text style={[styles.label, { color: c.secondaryText }]}>
          {strings.addLog.log.foodItem}
        </Text>
        <BottomSheetTextInput
          style={[
            styles.input,
            { color: c.text, borderColor: c.border, backgroundColor: c.background },
          ]}
          placeholder={strings.addLog.log.enterFoodItemName}
          placeholderTextColor={c.secondaryText}
          value={newName}
          onChangeText={setNewName}
          autoFocus
        />

        <IngredientTagList
          label={strings.addLog.log.ingredientsOptional}
          ingredients={newIngredients}
          newIngredient={newIngredient}
          onChangeNewIngredient={setNewIngredient}
          onAddIngredient={handleAddIngredient}
          onRemoveIngredient={handleRemoveIngredient}
        />

        <Pressable
          style={[styles.saveBtn, { backgroundColor: c.accent }]}
          onPress={handleAddSuggestion}
        >
          <Text style={[styles.saveText, { color: c.buttonText }]}>
            {strings.addLog.log.addShortcut}
          </Text>
        </Pressable>
      </BottomSheet>
    </>
  );
}

const styles = StyleSheet.create({
  suggestionsArea: { paddingHorizontal: 16, marginTop: 12 },
  pillScroll: { paddingBottom: 12, paddingHorizontal: 4, gap: 8 },
  pill: { borderRadius: 18 },
  pillBlur: {
    paddingHorizontal: 14,
    height: 36,
    justifyContent: 'center',
    borderRadius: 18,
    backgroundColor: colors.camera.pillBg,
  },
  pillText: { fontSize: 14, color: colors.camera.text },
  pillDelete: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: colors.camera.deleteBg,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1,
  },
  addPillBlur: {
    width: 36,
    height: 36,
    paddingHorizontal: 0,
    paddingVertical: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.camera.buttonBgActive,
  },
  donePillBlur: { backgroundColor: colors.camera.doneBg },
  doneText: { color: colors.camera.text, fontWeight: '600', fontSize: 14 },
  label: { fontSize: 14, fontWeight: '500', marginBottom: 8 },
  input: {
    borderWidth: 1,
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 14,
    fontSize: 16,
    marginBottom: 20,
  },
  saveBtn: { paddingVertical: 16, borderRadius: 12, alignItems: 'center' },
  saveText: { fontSize: 16, fontWeight: '600' },
});