/** Gift catalog grid with category tabs (VirtualGifts screen + room GiftPanel). */
import React from 'react';
import {FlatList, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {COLORS} from '../theme/colors';
import {RADIUS, SPACING} from '../theme/spacing';
import type {Gift, GiftCategory} from '../types/models';
import {formatCoins} from '../utils/formatters';

interface Props {
  categories: GiftCategory[];
  gifts: Gift[];
  activeCategory: string | null; // category slug
  onSelectCategory: (slug: string | null) => void;
  onSelectGift: (gift: Gift) => void;
  selectedGiftId?: number | null;
  balance?: number;
  compact?: boolean;
}

export function GiftGrid({
  categories,
  gifts,
  activeCategory,
  onSelectCategory,
  onSelectGift,
  selectedGiftId,
  balance,
  compact,
}: Props): React.JSX.Element {
  return (
    <View style={styles.wrap}>
      <View style={styles.catRow}>
        <CategoryChip label="All" active={activeCategory === null} onPress={() => onSelectCategory(null)} />
        {categories.map(c => (
          <CategoryChip
            key={c.id}
            label={c.name}
            active={activeCategory === c.slug}
            onPress={() => onSelectCategory(c.slug)}
          />
        ))}
      </View>

      {balance !== undefined && (
        <View style={styles.balanceRow}>
          <Text style={styles.balanceText}>💰 {formatCoins(balance)} coins</Text>
        </View>
      )}

      <FlatList
        data={gifts.filter(g => !activeCategory || g.category_slug === activeCategory)}
        keyExtractor={g => String(g.id)}
        numColumns={compact ? 3 : 4}
        contentContainerStyle={styles.grid}
        showsVerticalScrollIndicator={false}
        renderItem={({item}) => {
          const selected = selectedGiftId === item.id;
          return (
            <TouchableOpacity
              style={[styles.gift, selected && styles.giftSelected]}
              onPress={() => onSelectGift(item)}
              activeOpacity={0.8}>
              {item.icon_url ? (
                <Image source={{uri: item.icon_url}} style={styles.icon} />
              ) : (
                <Text style={styles.iconFallback}>{item.is_premium ? '👑' : '🎁'}</Text>
              )}
              <Text style={styles.giftName} numberOfLines={1}>
                {item.name}
              </Text>
              <View style={[styles.price, item.is_premium && styles.premium]}>
                <Text style={styles.priceText}>{formatCoins(item.price_coins)}</Text>
              </View>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
}

function CategoryChip({label, active, onPress}: {label: string; active: boolean; onPress: () => void}) {
  return (
    <TouchableOpacity onPress={onPress} style={[styles.chip, active && styles.chipActive]}>
      <Text style={[styles.chipText, active && styles.chipTextActive]}>{label}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  wrap: {flex: 1},
  catRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 6,
    paddingBottom: SPACING.s,
  },
  chip: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 99,
    backgroundColor: COLORS.cardBgLight,
  },
  chipActive: {backgroundColor: COLORS.purple},
  chipText: {color: COLORS.secondaryText, fontSize: 12, fontWeight: '600'},
  chipTextActive: {color: COLORS.white},
  balanceRow: {paddingBottom: SPACING.s},
  balanceText: {color: COLORS.gold, fontSize: 12, fontWeight: '700'},
  grid: {gap: 8, paddingBottom: SPACING.xl},
  gift: {
    flex: 1,
    margin: 4,
    backgroundColor: COLORS.cardBg,
    borderRadius: RADIUS.m,
    padding: SPACING.s,
    alignItems: 'center',
    borderWidth: 2,
    borderColor: 'transparent',
  },
  giftSelected: {borderColor: COLORS.magenta, backgroundColor: 'rgba(217,70,239,0.12)'},
  icon: {width: 42, height: 42, borderRadius: 10},
  iconFallback: {fontSize: 34},
  giftName: {color: COLORS.white, fontSize: 11, marginTop: 4, fontWeight: '600'},
  price: {
    marginTop: 4,
    backgroundColor: 'rgba(255,214,107,0.15)',
    borderRadius: 99,
    paddingHorizontal: 7,
    paddingVertical: 2,
  },
  premium: {backgroundColor: 'rgba(217,70,239,0.2)'},
  priceText: {color: COLORS.gold, fontSize: 10, fontWeight: '700'},
});