import { useEffect, useMemo, useState } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import { SlidersHorizontal } from "lucide-react-native";
import { BusinessCard } from "../components/BusinessCard";
import { CategoryPill } from "../components/CategoryPill";
import { MapPreview } from "../components/MapPreview";
import { Screen } from "../components/Screen";
import { SearchInput } from "../components/SearchInput";
import { SectionHeader } from "../components/SectionHeader";
import { businesses, categories } from "../data/mockData";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { Business, CategoryId } from "../types/domain";

interface ExploreScreenProps {
  favoriteIds: string[];
  initialCategory?: CategoryId;
  onBusinessPress: (business: Business) => void;
  onToggleFavorite: (businessId: string) => void;
}

const directoryCategories = categories.filter(
  (category) => category.id !== "evenements" && category.id !== "bonsPlans"
);

export function ExploreScreen({
  favoriteIds,
  initialCategory,
  onBusinessPress,
  onToggleFavorite
}: ExploreScreenProps) {
  const [query, setQuery] = useState("");
  const [activeCategory, setActiveCategory] = useState<CategoryId | "all">(
    initialCategory ?? "all"
  );

  useEffect(() => {
    setActiveCategory(initialCategory ?? "all");
  }, [initialCategory]);

  const filteredBusinesses = useMemo(() => {
    const normalizedQuery = query.trim().toLowerCase();

    return businesses.filter((business) => {
      const categoryMatches = activeCategory === "all" || business.category === activeCategory;
      const queryMatches =
        normalizedQuery.length === 0 ||
        business.name.toLowerCase().includes(normalizedQuery) ||
        business.tags.some((tag) => tag.toLowerCase().includes(normalizedQuery));

      return categoryMatches && queryMatches;
    });
  }, [activeCategory, query]);

  return (
    <Screen>
      <View style={styles.header}>
        <Text style={styles.title}>Explorer</Text>
        <Text style={styles.subtitle}>
          Trouvez un commerce, un artisan ou un service à Ambérieu-en-Bugey.
        </Text>
      </View>

      <SearchInput
        value={query}
        onChangeText={setQuery}
        placeholder="Nom, catégorie, besoin..."
      />

      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.filters}
      >
        <View style={[styles.allFilter, activeCategory === "all" && styles.allFilterActive]}>
          <SlidersHorizontal
            color={activeCategory === "all" ? colors.surface : colors.primary}
            size={18}
            strokeWidth={2.5}
          />
          <Text
            onPress={() => setActiveCategory("all")}
            style={[styles.allFilterText, activeCategory === "all" && styles.allFilterTextActive]}
          >
            Tous
          </Text>
        </View>
        {directoryCategories.map((category) => (
          <CategoryPill
            key={category.id}
            category={category}
            active={activeCategory === category.id}
            onPress={() => setActiveCategory(category.id)}
          />
        ))}
      </ScrollView>

      <View style={styles.section}>
        <SectionHeader
          title="Carte interactive"
          subtitle="Touchez un repère pour ouvrir la fiche"
        />
        <MapPreview businesses={filteredBusinesses} onSelectBusiness={onBusinessPress} />
      </View>

      <View style={styles.section}>
        <SectionHeader title="Annuaire local" subtitle={`${filteredBusinesses.length} résultats`} />
        {filteredBusinesses.map((business) => (
          <BusinessCard
            key={business.id}
            business={business}
            favorite={favoriteIds.includes(business.id)}
            onPress={() => onBusinessPress(business)}
            onToggleFavorite={() => onToggleFavorite(business.id)}
          />
        ))}
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  header: {
    gap: spacing.sm
  },
  title: {
    color: colors.ink,
    fontSize: 30,
    lineHeight: 34,
    fontWeight: "900"
  },
  subtitle: {
    color: colors.muted,
    fontSize: 14,
    lineHeight: 20,
    fontWeight: "600"
  },
  filters: {
    gap: spacing.sm,
    paddingRight: spacing.lg
  },
  allFilter: {
    minHeight: 42,
    borderRadius: radius.pill,
    borderWidth: 1,
    borderColor: colors.line,
    backgroundColor: colors.surface,
    paddingHorizontal: spacing.md,
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.sm
  },
  allFilterActive: {
    borderColor: colors.primary,
    backgroundColor: colors.primary
  },
  allFilterText: {
    color: colors.ink,
    fontSize: 13,
    fontWeight: "800"
  },
  allFilterTextActive: {
    color: colors.surface
  },
  section: {
    gap: spacing.md
  }
});