import React from 'react';
import {Image, Linking, Pressable, StyleSheet, Text, View} from 'react-native';
import type {PriceItem} from '@app/types/api';
import {PlatformMeta} from '@app/theme/colors';
import {Colors} from '@app/theme/colors';

type Props = {
  item: PriceItem;
};

const formatYen = (n: number | null | undefined): string => {
  if (n == null || Number.isNaN(n)) return '-';
  return `¥${Math.round(Number(n)).toLocaleString('ja-JP')}`;
};

export const PriceItemCard: React.FC<Props> = React.memo(({item}) => {
  const meta = PlatformMeta[item.platform as keyof typeof PlatformMeta];
  const color = meta?.color ?? Colors.primary;
  const label = meta?.label ?? item.platform;

  const onPress = () => {
    if (item.url) Linking.openURL(item.url).catch(() => {});
  };

  return (
    <Pressable onPress={onPress} style={({pressed}) => [styles.card, pressed && styles.pressed]}>
      <View style={[styles.badge, {backgroundColor: color}]}>
        <Text style={styles.badgeText} numberOfLines={1}>{label}</Text>
      </View>
      <View style={styles.row}>
        {item.image ? (
          <Image source={{uri: item.image}} style={styles.thumb} resizeMode="contain" />
        ) : (
          <View style={[styles.thumb, styles.thumbEmpty]}>
            <Text style={styles.thumbEmptyText}>no image</Text>
          </View>
        )}
        <View style={styles.body}>
          <Text style={styles.title} numberOfLines={3}>{item.title}</Text>
          <View style={styles.priceRow}>
            <Text style={styles.price}>{formatYen(item.price)}</Text>
            {item.saving_percent ? (
              <Text style={styles.saving}>-{item.saving_percent}%</Text>
            ) : null}
          </View>
          <View style={styles.metaRow}>
            {item.review_avg ? (
              <Text style={styles.meta}>★ {Number(item.review_avg).toFixed(1)}{item.review_cnt ? ` (${item.review_cnt})` : ''}</Text>
            ) : null}
            {item.shop ? <Text style={styles.meta} numberOfLines={1}>{item.shop}</Text> : null}
            {item.condition ? <Text style={styles.meta}>{item.condition}</Text> : null}
          </View>
        </View>
      </View>
    </Pressable>
  );
});

const styles = StyleSheet.create({
  card: {
    backgroundColor: Colors.card,
    borderRadius: 12,
    padding: 12,
    marginHorizontal: 12,
    marginVertical: 6,
    borderWidth: 1,
    borderColor: Colors.border,
  },
  pressed: {opacity: 0.7},
  badge: {
    alignSelf: 'flex-start',
    borderRadius: 6,
    paddingHorizontal: 8,
    paddingVertical: 2,
    marginBottom: 8,
  },
  badgeText: {color: '#FFFFFF', fontSize: 12, fontWeight: '600'},
  row: {flexDirection: 'row'},
  thumb: {
    width: 84,
    height: 84,
    borderRadius: 8,
    backgroundColor: '#F3F4F6',
    marginRight: 12,
  },
  thumbEmpty: {alignItems: 'center', justifyContent: 'center'},
  thumbEmptyText: {color: Colors.subText, fontSize: 10},
  body: {flex: 1},
  title: {color: Colors.text, fontSize: 14, lineHeight: 20, marginBottom: 6},
  priceRow: {flexDirection: 'row', alignItems: 'baseline', gap: 8},
  price: {color: Colors.text, fontSize: 18, fontWeight: '700'},
  saving: {color: Colors.danger, fontSize: 14, fontWeight: '600'},
  metaRow: {flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginTop: 4},
  meta: {color: Colors.subText, fontSize: 12},
});