FarmaFinder/apps/frontend-mobile/app/(tabs)/search.tsx

import React, { useState, useEffect } from 'react';
import { View, FlatList, StyleSheet, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation, useRouter } from 'expo-router';
import { SearchBar } from '../../components/SearchBar';
import { MedicineCard } from '../../components/MedicineCard';
import { LoadingSpinner } from '../../components/LoadingSpinner';
import { useDebounce } from '../../hooks/useDebounce';
import { useAuth } from '../../hooks/useAuth';
import { useRecentSearches } from '../../hooks/useRecentSearches';
import { searchMedicines } from '../../services/medicines';
import { searchParapharmacy, Product } from '../../services/products';
import { useThemeContext } from '../../components/ThemeProvider';
import { spacing, borderRadius } from '../../constants/theme';
import { Medicine } from '../../types';
import { config } from '../../constants/config';
import { useTranslation } from '../../src/i18n';

const TABLET_MIN_WIDTH = 768;

const suggestions = [
  { name: 'Paracetamol', icon: 'medical' as const },
  { name: 'Ibuprofeno', icon: 'fitness' as const },
  { name: 'Aspirina', icon: 'heart' as const },
  { name: 'Omeprazol', icon: 'bandage' as const },
];

export default function SearchScreen() {
  const { t } = useTranslation();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
  const { isAuthenticated } = useAuth();
  const { recentSearches, addSearch, removeSearch } = useRecentSearches();
  const { colors } = useThemeContext();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<Medicine[]>([]);
  const [products, setProducts] = useState<Product[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const debouncedQuery = useDebounce(query, config.SEARCH_DEBOUNCE_MS);
  const navigation = useNavigation();
  const router = useRouter();

  useEffect(() => {
    const parent = navigation.getParent();
    if (!parent) return;
    const unsubscribe = parent.addListener('tabPress', () => {
      setQuery('');
      setResults([]);
      setProducts([]);
      setSearchMode('all');
      setIsLoading(false);
      setError(null);
    });
    return unsubscribe;
  }, [navigation]);

  useEffect(() => {
    if (debouncedQuery.length < 2) {
      setResults([]);
      setProducts([]);
      return;
    }

    const fetchResults = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const data = await searchMedicines(debouncedQuery);
        setResults(data);
      } catch (err) {
        setError(t('search.error'));
        console.error(err);
      } finally {
        setIsLoading(false);
      }
    };

    const fetchProducts = async () => {
      try {
        const response = await searchParapharmacy(debouncedQuery);
        setProducts(response.results || []);
      } catch (err) {
        console.error('Parapharmacy search error:', err);
      }
    };

    fetchResults();
    fetchProducts();
  }, [debouncedQuery]);

  const handleSearch = (searchQuery: string) => {
    setQuery(searchQuery);
    if (searchQuery.trim()) addSearch(searchQuery);
  };

  const showSuggestions = !query && !isLoading && results.length === 0 && products.length === 0;

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <SearchBar
        onSearch={handleSearch}
        value={query}
        onChangeText={setQuery}
      />

      {query.length >= 2 && (results.length + products.length) > 0 && (
        <View style={styles.resultsSummary}>
          <Text style={[styles.resultsSummaryText, { color: colors.textSecondary }]}>
            {results.length + products.length} {t('search.resultsFound')}
          </Text>
        </View>
      )}

      {showSuggestions && (
        <>
          <View style={[styles.suggestionsSection, isTablet && styles.suggestionsSectionTablet]}>
            <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.suggestions')}</Text>
            <View style={styles.suggestionsGrid}>
              {suggestions.map((s) => (
                <TouchableOpacity
                  key={s.name}
                  style={[styles.suggestionCard, { backgroundColor: colors.card, borderColor: colors.border }]}
                  onPress={() => handleSearch(s.name)}
                  activeOpacity={0.7}
                >
                  <View style={[styles.suggestionIcon, { backgroundColor: colors.surfaceLow }]}>
                    <Ionicons name={s.icon} size={22} color={colors.primary} />
                  </View>
                  <Text style={[styles.suggestionName, { color: colors.text }]}>{s.name}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>

          {isAuthenticated && recentSearches.length > 0 && (
            <View style={[styles.recentSection, isTablet && styles.recentSectionTablet]}>
              <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.recentSearches')}</Text>
              {recentSearches.map((term) => (
                <TouchableOpacity
                  key={term}
                  style={styles.recentItem}
                  onPress={() => handleSearch(term)}
                  activeOpacity={0.7}
                >
                  <Ionicons name="time-outline" size={18} color={colors.textSecondary} />
                  <Text style={[styles.recentText, { color: colors.text }]}>{term}</Text>
                  <TouchableOpacity onPress={() => removeSearch(term)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
                    <Ionicons name="close" size={16} color={colors.textSecondary} />
                  </TouchableOpacity>
                </TouchableOpacity>
              ))}
            </View>
          )}
        </>
      )}

      {isLoading && <LoadingSpinner message={t('search.loading')} />}

      {error && (
        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}>
          <Text style={[styles.errorText, { color: colors.danger }]}>{error}</Text>
        </View>
      )}

      {!isLoading && !error && results.length === 0 && products.length === 0 && query.length >= 2 && (
        <View style={styles.emptyContainer}>
          <Text style={[styles.emptyText, { color: colors.textSecondary }]}>{t('search.noResults')}</Text>
        </View>
      )}

      <FlatList
        data={results}
        keyExtractor={(item) => item.nregistro}
        renderItem={({ item }) => <MedicineCard medicine={item} />}
        ListHeaderComponent={
          <>
            {products.length > 0 && (
              <View style={styles.section}>
                <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.parapharmacy')}</Text>
                {products.map((product) => (
                  <TouchableOpacity
                    key={`${product.source}-${product.id || product._id}`}
                    style={[styles.productCard, { backgroundColor: colors.card, borderColor: colors.border }]}
                    onPress={() => router.push(`/product/${product.source}/${product.id || product._id}`)}
                    activeOpacity={0.7}
                  >
                    <View style={styles.productInfo}>
                      <View style={styles.badges}>
                        <View style={[styles.sourceBadge, { backgroundColor: '#16a34a' }]}>
                          <Text style={styles.badgeText}>{t('search.parapharmacy')}</Text>
                        </View>
                      </View>
                      <Text style={[styles.productName, { color: colors.text }]} numberOfLines={1}>{product.name}</Text>
                      <Text style={[styles.productBrand, { color: colors.textSecondary }]} numberOfLines={1}>{product.brand} • {product.price}€</Text>
                    </View>
                  </TouchableOpacity>
                ))}
              </View>
            )}
          </>
        }
        contentContainerStyle={[styles.list, isTablet && styles.listTablet]}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  resultsSummary: {
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.sm,
  },
  resultsSummaryText: {
    fontSize: 14,
    fontWeight: '500',
  },
  section: {
    paddingHorizontal: spacing.lg,
    marginTop: spacing.md,
  },
  suggestionsSection: {
    marginTop: spacing.sm,
    alignSelf: 'center',
    width: '80%',
  },
  suggestionsSectionTablet: {
    maxWidth: 700,
    alignSelf: 'center',
    width: '100%',
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: '700',
    marginBottom: spacing.md,
  },
  suggestionsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: spacing.sm,
  },
  suggestionCard: {
    width: '48%' as unknown as number,
    borderRadius: borderRadius.lg,
    borderWidth: 1,
    padding: spacing.md,
    gap: spacing.sm,
  },
  suggestionIcon: {
    width: 40,
    height: 40,
    borderRadius: borderRadius.md,
    alignItems: 'center',
    justifyContent: 'center',
  },
  suggestionName: {
    fontSize: 16,
    fontWeight: '700',
  },
  recentSection: {
    marginTop: spacing.lg,
    alignSelf: 'center',
    width: '80%',
  },
  recentSectionTablet: {
    maxWidth: 700,
    alignSelf: 'center',
    width: '100%',
  },
  recentItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: spacing.sm,
    gap: spacing.sm,
  },
  recentText: {
    flex: 1,
    fontSize: 15,
  },
  list: {
    paddingBottom: spacing.xl,
  },
  listTablet: {
    maxWidth: 700,
    alignSelf: 'center',
    width: '100%',
  },
  errorContainer: {
    padding: spacing.md,
    marginHorizontal: spacing.lg,
    borderRadius: borderRadius.lg,
  },
  errorContainerTablet: {
    maxWidth: 700,
    alignSelf: 'center',
  },
  errorText: {
    textAlign: 'center',
    fontSize: 14,
  },
  emptyContainer: {
    padding: spacing.xl,
    alignItems: 'center',
  },
  emptyText: {
    fontSize: 16,
  },
  productCard: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: borderRadius.lg,
    borderWidth: 1,
    padding: spacing.md,
    marginBottom: spacing.sm,
  },
  productInfo: {
    flex: 1,
    gap: 4,
  },
  badges: {
    flexDirection: 'row',
    gap: spacing.sm,
    marginBottom: 2,
  },
  sourceBadge: {
    paddingHorizontal: spacing.sm,
    paddingVertical: 2,
    borderRadius: borderRadius.sm,
  },
  badgeText: {
    color: '#ffffff',
    fontSize: 11,
    fontWeight: '700',
  },
  productName: {
    fontSize: 15,
    fontWeight: '600',
  },
  productBrand: {
    fontSize: 13,
  },
});