import { StyleSheet, Text, View } from "react-native";
import { Heart } from "lucide-react-native";
import { AppButton } from "../components/AppButton";
import { BusinessCard } from "../components/BusinessCard";
import { Screen } from "../components/Screen";
import { SectionHeader } from "../components/SectionHeader";
import { businesses } from "../data/mockData";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { Business } from "../types/domain";

interface FavoritesScreenProps {
  favoriteIds: string[];
  onBusinessPress: (business: Business) => void;
  onExplore: () => void;
  onToggleFavorite: (businessId: string) => void;
}

export function FavoritesScreen({
  favoriteIds,
  onBusinessPress,
  onExplore,
  onToggleFavorite
}: FavoritesScreenProps) {
  const favoriteBusinesses = businesses.filter((business) => favoriteIds.includes(business.id));

  return (
    <Screen>
      <View style={styles.header}>
        <Text style={styles.title}>Favoris</Text>
        <Text style={styles.subtitle}>
          Retrouvez rapidement vos commerces et artisans préférés.
        </Text>
      </View>

      {favoriteBusinesses.length === 0 ? (
        <View style={styles.empty}>
          <View style={styles.emptyIcon}>
            <Heart color={colors.primary} size={28} strokeWidth={2.6} />
          </View>
          <Text style={styles.emptyTitle}>Aucun favori pour l'instant</Text>
          <Text style={styles.emptyText}>
            Ajoutez des adresses depuis l'annuaire pour les retrouver ici.
          </Text>
          <AppButton label="Explorer les commerces" onPress={onExplore} />
        </View>
      ) : (
        <View style={styles.section}>
          <SectionHeader title="Mes adresses" subtitle={`${favoriteBusinesses.length} favoris`} />
          {favoriteBusinesses.map((business) => (
            <BusinessCard
              key={business.id}
              business={business}
              favorite
              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"
  },
  section: {
    gap: spacing.md
  },
  empty: {
    borderRadius: radius.lg,
    borderWidth: 1,
    borderColor: colors.line,
    backgroundColor: colors.surface,
    padding: spacing.xl,
    alignItems: "center",
    gap: spacing.md
  },
  emptyIcon: {
    width: 64,
    height: 64,
    borderRadius: radius.lg,
    backgroundColor: colors.primarySoft,
    alignItems: "center",
    justifyContent: "center"
  },
  emptyTitle: {
    color: colors.ink,
    fontSize: 19,
    fontWeight: "900",
    textAlign: "center"
  },
  emptyText: {
    color: colors.muted,
    fontSize: 14,
    lineHeight: 20,
    fontWeight: "600",
    textAlign: "center"
  }
});