import { Image } from 'expo-image';
import { memo } from 'react';
import { Dimensions, FlatList, ListRenderItem, Pressable, StyleSheet, Text, View } from 'react-native';

const WINDOW_WIDTH = Dimensions.get('window').width;
const CARD_HORIZONTAL_GUTTER = 18;
const CARD_WIDTH = Math.min(WINDOW_WIDTH - 124, 360);

export type FeatureItem = {
  id: string;
  title: string;
  subtitle: string;
  image: string;
};

type FeatureCarouselProps = {
  items: FeatureItem[];
  onPress?: (item: FeatureItem) => void;
};

export function FeatureCarousel({ items, onPress }: FeatureCarouselProps) {
  const cardInterval = CARD_WIDTH + CARD_HORIZONTAL_GUTTER;

  const renderItem: ListRenderItem<FeatureItem> = ({ item }) => <FeatureCard item={item} onPress={onPress} />;

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.contentContainer}
      snapToInterval={cardInterval}
      snapToAlignment="start"
      decelerationRate="fast"
    />
  );
}

type FeatureCardProps = {
  item: FeatureItem;
  onPress?: (item: FeatureItem) => void;
};

const FeatureCard = memo(({ item, onPress }: FeatureCardProps) => {
  return (
    <Pressable
      onPress={() => onPress?.(item)}
      style={({ pressed }) => [
        styles.card,
        pressed && {
          transform: [{ scale: 0.98 }],
        },
      ]}
    >
      <View style={styles.imageContainer}>
        <Image source={{ uri: item.image }} style={styles.image} contentFit="cover" />
      </View>
      <View style={styles.cardContent}>
        <Text style={styles.cardTitle}>{item.title}</Text>
        <Text style={styles.cardSubtitle}>{item.subtitle}</Text>
      </View>
    </Pressable>
  );
});
FeatureCard.displayName = 'FeatureCard';

const styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 12,
    paddingRight: 24,
  },
  card: {
    width: CARD_WIDTH,
    marginRight: CARD_HORIZONTAL_GUTTER,
    borderRadius: 24,
    padding: 0,
    paddingBottom: 16,
    borderWidth: 1,
    borderColor: '#1B1C20',
    backgroundColor: '#0F1013',
    shadowColor: '#000000',
    shadowOpacity: 0.28,
    shadowRadius: 18,
    shadowOffset: { width: 0, height: 12 },
    elevation: 12,
  },
  imageContainer: {
    borderRadius: 18,
    overflow: 'hidden',
    marginBottom: 16,
  },
  image: {
    width: '100%',
    height: 184,
  },
  cardContent: {
    paddingHorizontal: 2,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '800',
    color: '#F4F8FF',
    textTransform: 'uppercase',
    marginBottom: 6,
    letterSpacing: 1.2,
  },
  cardSubtitle: {
    fontSize: 13,
    color: '#B4BBC5',
    lineHeight: 18,
  },
});