import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { formatMoney } from '@navi/ui';
import type { Destination, Listing, LocaleCode } from '@navi/types';
import { color, radius, spacing, typography } from '../../theme';
import { imageForDestination, imageForListing } from '../../assets/naviAssets';
import { naviTheme } from '../../theme/naviTheme';

interface ListingCardProps {
  listing: Listing;
  locale: LocaleCode;
  saved?: boolean;
  ctaLabel?: string;
  onPress: () => void;
  onSave?: () => void;
}

export function ListingCard({ listing, locale, saved, ctaLabel = 'View', onPress, onSave }: ListingCardProps) {
  const { t } = useTranslation();
  const imageSource = imageForListing(listing) ?? (listing.coverImageUrl ? { uri: listing.coverImageUrl } : undefined);
  const actionLabel = ctaLabel === 'View' ? t('catalog.view') : ctaLabel;

  return (
    <Pressable style={styles.card} onPress={onPress} accessibilityRole="button">
      <View>
        {imageSource ? (
          <Image source={imageSource} style={styles.image} resizeMode="cover" />
        ) : (
          <View style={[styles.image, styles.imageFallback]}>
            <Text style={styles.imageFallbackText}>Navi</Text>
          </View>
        )}
        <View style={styles.badge}>
          <Text style={styles.badgeText}>{labelForKind(listing.kind, t)}</Text>
        </View>
        {onSave ? (
          <Pressable
            style={styles.heart}
            onPress={onSave}
            accessibilityRole="button"
            accessibilityLabel={saved ? t('catalog.removeSavedItem') : t('catalog.saveItem')}
          >
            <Text style={[styles.heartText, saved ? styles.heartSaved : null]}>{saved ? '♥' : '♡'}</Text>
          </Pressable>
        ) : null}
      </View>
      <View style={styles.body}>
        <Text style={styles.title} numberOfLines={2}>{listing.title}</Text>
        <Text style={styles.summary} numberOfLines={2}>{listing.summary}</Text>
        <View style={styles.metaRow}>
          <Text style={styles.rating}>★ {listing.ratingAverage.toFixed(1)} ({listing.ratingCount})</Text>
          <Text style={styles.price}>{listing.priceFrom.amountMinor > 0 ? formatMoney(listing.priceFrom, locale) : t('catalog.quote')}</Text>
        </View>
        <Text style={styles.cta}>{actionLabel}</Text>
      </View>
    </Pressable>
  );
}

interface DestinationCardProps {
  destination: Destination;
  onPress?: () => void;
}

export function DestinationCard({ destination, onPress }: DestinationCardProps) {
  const imageSource = imageForDestination(destination) ?? (destination.coverImageUrl ? { uri: destination.coverImageUrl } : undefined);

  return (
    <Pressable style={styles.card} onPress={onPress} accessibilityRole="button">
      {imageSource ? (
        <Image source={imageSource} style={styles.image} resizeMode="cover" />
      ) : (
        <View style={[styles.image, styles.imageFallback]}>
          <Text style={styles.imageFallbackText}>Navi</Text>
        </View>
      )}
      <View style={styles.body}>
        <Text style={styles.title} numberOfLines={2}>{destination.title}</Text>
        <Text style={styles.summary} numberOfLines={2}>{destination.summary}</Text>
      </View>
    </Pressable>
  );
}

export function FilterChip({ label, active, onPress }: { label: string; active?: boolean; onPress: () => void }) {
  return (
    <Pressable
      style={[styles.chip, active ? styles.chipActive : null]}
      onPress={onPress}
      accessibilityRole="button"
    >
      <Text style={[styles.chipText, active ? styles.chipTextActive : null]}>{label}</Text>
    </Pressable>
  );
}

function labelForKind(kind: Listing['kind'], t: (key: string) => string): string {
  switch (kind) {
    case 'STAY':
      return t('catalog.stay');
    case 'ACTIVITY':
      return t('catalog.experience');
    case 'RESTAURANT':
      return t('catalog.food');
    case 'PHARMACY':
      return t('catalog.pharmacy');
    case 'GROCERY':
      return t('catalog.grocery');
    case 'SIM_PLAN':
      return t('catalog.sim');
    case 'TAXI_TIER':
      return t('catalog.taxi');
  }
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.xl,
    borderWidth: 1,
    overflow: 'hidden',
    ...naviTheme.shadows.card,
  },
  image: {
    backgroundColor: color.bg[100],
    height: 172,
    width: '100%',
  },
  imageFallback: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  imageFallbackText: {
    color: color.blue[600],
    fontSize: typography.scale.h2.size,
    fontWeight: '800',
  },
  badge: {
    backgroundColor: color.bg[0],
    borderRadius: radius.pill,
    left: spacing[3],
    paddingHorizontal: spacing[3],
    paddingVertical: spacing[1],
    position: 'absolute',
    top: spacing[3],
  },
  badgeText: {
    color: color.ink[900],
    fontSize: typography.scale.caption.size,
    fontWeight: '800',
  },
  heart: {
    alignItems: 'center',
    backgroundColor: color.bg[0],
    borderRadius: radius.pill,
    height: 38,
    justifyContent: 'center',
    position: 'absolute',
    right: spacing[3],
    top: spacing[3],
    width: 38,
  },
  heartText: {
    color: color.ink[700],
    fontSize: 22,
    fontWeight: '800',
  },
  heartSaved: {
    color: color.danger,
  },
  body: {
    gap: spacing[2],
    padding: spacing[4],
  },
  title: {
    color: color.ink[900],
    fontSize: typography.scale.h3.size,
    fontWeight: '800',
    lineHeight: 23,
  },
  summary: {
    color: color.ink[500],
    fontSize: typography.scale.caption.size,
    lineHeight: 18,
  },
  metaRow: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  rating: {
    color: color.ink[700],
    fontSize: typography.scale.caption.size,
    fontWeight: '700',
  },
  price: {
    color: color.blue[600],
    fontSize: typography.scale.caption.size,
    fontWeight: '800',
  },
  cta: {
    color: color.blue[600],
    fontSize: typography.scale.caption.size,
    fontWeight: '800',
  },
  chip: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.pill,
    borderWidth: 1,
    paddingHorizontal: spacing[4],
    paddingVertical: spacing[2],
  },
  chipActive: {
    backgroundColor: color.blue[600],
    borderColor: color.blue[600],
  },
  chipText: {
    color: color.ink[700],
    fontSize: typography.scale.caption.size,
    fontWeight: '700',
  },
  chipTextActive: {
    color: color.bg[0],
  },
});