import { Heart, MapPin, Star } from "lucide-react-native";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { Business } from "../types/domain";

interface BusinessCardProps {
  business: Business;
  favorite?: boolean;
  onPress: () => void;
  onToggleFavorite: () => void;
}

export function BusinessCard({
  business,
  favorite = false,
  onPress,
  onToggleFavorite
}: BusinessCardProps) {
  return (
    <Pressable
      accessibilityRole="button"
      onPress={onPress}
      style={({ pressed }) => [styles.card, pressed && styles.pressed]}
    >
      <View style={[styles.cover, { backgroundColor: business.coverColor }]}>
        <Text style={styles.coverText}>{business.photos[0]}</Text>
        <Pressable
          accessibilityRole="button"
          accessibilityLabel={favorite ? "Retirer des favoris" : "Ajouter aux favoris"}
          onPress={onToggleFavorite}
          style={styles.favoriteButton}
        >
          <Heart
            color={favorite ? colors.primary : colors.muted}
            fill={favorite ? colors.primary : "transparent"}
            size={18}
            strokeWidth={2.5}
          />
        </Pressable>
      </View>
      <View style={styles.body}>
        <View style={styles.topLine}>
          <Text style={styles.category}>{business.categoryLabel}</Text>
          <View style={styles.rating}>
            <Star color={colors.warning} fill={colors.warning} size={13} />
            <Text style={styles.ratingText}>{business.rating}</Text>
          </View>
        </View>
        <Text style={styles.title}>{business.name}</Text>
        <Text style={styles.description} numberOfLines={2}>
          {business.shortDescription}
        </Text>
        <View style={styles.meta}>
          <MapPin color={colors.primary} size={15} strokeWidth={2.4} />
          <Text style={styles.metaText}>{business.distance}</Text>
          {business.acceptsGiftCards ? <Text style={styles.dot}>•</Text> : null}
          {business.acceptsGiftCards ? <Text style={styles.metaText}>Chèques cadeaux</Text> : null}
        </View>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: radius.lg,
    backgroundColor: colors.surface,
    overflow: "hidden",
    borderWidth: 1,
    borderColor: colors.line
  },
  pressed: {
    opacity: 0.82
  },
  cover: {
    height: 116,
    padding: spacing.md,
    justifyContent: "flex-end"
  },
  coverText: {
    color: colors.ink,
    fontSize: 16,
    fontWeight: "900"
  },
  favoriteButton: {
    position: "absolute",
    top: spacing.md,
    right: spacing.md,
    width: 36,
    height: 36,
    borderRadius: radius.pill,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.surface
  },
  body: {
    padding: spacing.md,
    gap: spacing.sm
  },
  topLine: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    gap: spacing.sm
  },
  category: {
    color: colors.primary,
    fontSize: 12,
    fontWeight: "900"
  },
  rating: {
    flexDirection: "row",
    alignItems: "center",
    gap: 3
  },
  ratingText: {
    color: colors.ink,
    fontSize: 12,
    fontWeight: "800"
  },
  title: {
    color: colors.ink,
    fontSize: 18,
    lineHeight: 22,
    fontWeight: "900"
  },
  description: {
    color: colors.muted,
    fontSize: 13,
    lineHeight: 18,
    fontWeight: "600"
  },
  meta: {
    flexDirection: "row",
    alignItems: "center",
    flexWrap: "wrap",
    gap: spacing.xs
  },
  metaText: {
    color: colors.ink,
    fontSize: 12,
    fontWeight: "700"
  },
  dot: {
    color: colors.muted,
    fontSize: 13,
    fontWeight: "900"
  }
});