import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

import { GradientCard } from './GradientCard';
import { Button } from './Button';
import { useTheme } from '../theme/context';
import type { Reward } from '../types';

// ─────────────────────────────────────────────────────────────────────────────
// Props
// ─────────────────────────────────────────────────────────────────────────────

interface RewardCardProps {
  reward: Reward;
  onRedeem?: () => void;
  disabled?: boolean;
  style?: object;
}

// ─────────────────────────────────────────────────────────────────────────────
// Component
// ─────────────────────────────────────────────────────────────────────────────

export function RewardCard({ reward, onRedeem, disabled = false, style }: RewardCardProps) {
  const theme = useTheme();
  const isAvailable = reward.available && !disabled;

  return (
    <GradientCard style={[styles.container, style]}>
      {reward.imageUrl ? (
        <Image source={{ uri: reward.imageUrl }} style={styles.image} resizeMode="cover" />
      ) : (
        <View style={[styles.imagePlaceholder, { backgroundColor: 'rgba(255, 69, 0, 0.1)' }]}>
          <Text style={styles.placeholderText}>🎁</Text>
        </View>
      )}

      <View style={styles.content}>
        <Text style={[styles.name, { color: theme.colors.text.primary }]}>{reward.name}</Text>
        <Text
          style={[styles.description, { color: theme.colors.text.secondary }]}
          numberOfLines={2}
        >
          {reward.description}
        </Text>

        <View style={styles.footer}>
          <View style={styles.cost}>
            <Text style={[styles.costAmount, { color: theme.colors.text.primary }]}>
              {reward.cost}
            </Text>
            <Text style={[styles.costCurrency, { color: theme.colors.text.secondary }]}>
              {reward.currency}
            </Text>
          </View>

          {onRedeem && (
            <Button
              title={isAvailable ? 'Redeem' : 'Unavailable'}
              onPress={onRedeem}
              variant={isAvailable ? 'primary' : 'secondary'}
              style={{ opacity: isAvailable ? 1 : 0.6 }}
            />
          )}
        </View>
      </View>
    </GradientCard>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Styles
// ─────────────────────────────────────────────────────────────────────────────

const styles = StyleSheet.create({
  container: {
    marginVertical: 8,
  },
  image: {
    width: '100%',
    height: 140,
  },
  imagePlaceholder: {
    width: '100%',
    height: 140,
    justifyContent: 'center',
    alignItems: 'center',
  },
  placeholderText: {
    fontSize: 48,
  },
  content: {
    padding: 16,
  },
  name: {
    fontSize: 18,
    fontWeight: '700',
    marginBottom: 4,
  },
  description: {
    fontSize: 14,
    marginBottom: 16,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  cost: {
    flexDirection: 'row',
    alignItems: 'baseline',
  },
  costAmount: {
    fontSize: 20,
    fontWeight: '800',
  },
  costCurrency: {
    fontSize: 12,
    marginLeft: 4,
  },
});

export default RewardCard;