import { MapPin } 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";

const pinPositions = [
  { top: "24%", left: "22%" },
  { top: "42%", left: "58%" },
  { top: "62%", left: "34%" },
  { top: "30%", left: "74%" },
  { top: "70%", left: "68%" }
] as const;

interface MapPreviewProps {
  businesses: Business[];
  onSelectBusiness: (business: Business) => void;
}

export function MapPreview({ businesses, onSelectBusiness }: MapPreviewProps) {
  return (
    <View style={styles.container}>
      <View style={styles.gridLineVertical} />
      <View style={styles.gridLineHorizontal} />
      <Text style={styles.label}>Carte Ambérieu centre</Text>
      {businesses.slice(0, 5).map((business, index) => {
        const position = pinPositions[index];

        return (
          <Pressable
            accessibilityRole="button"
            accessibilityLabel={`Voir ${business.name}`}
            key={business.id}
            onPress={() => onSelectBusiness(business)}
            style={[styles.pin, position]}
          >
            <MapPin color={colors.surface} size={16} fill={colors.primary} strokeWidth={2.4} />
          </Pressable>
        );
      })}
      <View style={styles.footer}>
        <Text style={styles.footerText}>{businesses.length} adresses autour de vous</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 206,
    borderRadius: radius.lg,
    overflow: "hidden",
    borderWidth: 1,
    borderColor: colors.line,
    backgroundColor: colors.tealSoft
  },
  gridLineVertical: {
    position: "absolute",
    top: -40,
    bottom: -40,
    left: "48%",
    width: 18,
    transform: [{ rotate: "18deg" }],
    backgroundColor: "rgba(255, 255, 255, 0.7)"
  },
  gridLineHorizontal: {
    position: "absolute",
    left: -40,
    right: -40,
    top: "52%",
    height: 16,
    transform: [{ rotate: "-8deg" }],
    backgroundColor: "rgba(255, 255, 255, 0.68)"
  },
  label: {
    position: "absolute",
    top: spacing.md,
    left: spacing.md,
    color: colors.ink,
    fontSize: 14,
    fontWeight: "900",
    backgroundColor: colors.surface,
    borderRadius: radius.pill,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.xs
  },
  pin: {
    position: "absolute",
    width: 34,
    height: 34,
    marginLeft: -17,
    marginTop: -17,
    borderRadius: radius.pill,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.primary,
    borderWidth: 3,
    borderColor: colors.surface
  },
  footer: {
    position: "absolute",
    left: spacing.md,
    right: spacing.md,
    bottom: spacing.md,
    borderRadius: radius.md,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    backgroundColor: "rgba(255, 255, 255, 0.92)"
  },
  footerText: {
    color: colors.ink,
    fontSize: 12,
    fontWeight: "800"
  }
});