import React, { memo } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Ionicons from '@react-native-vector-icons/ionicons';
import { useTheme, fontFamily } from '../../../theme';
import type { LoanPaymentMethod } from '../../../types/app';

interface PaymentMethodTileProps {
  method: LoanPaymentMethod;
  selected: boolean;
  onPress: () => void;
}

const METHOD_CONFIG: Record<LoanPaymentMethod, { icon: string; label: string; description: string }> = {
  'UPI': { icon: 'phone-portrait-outline', label: 'UPI', description: 'Pay via Google Pay, PhonePe, etc.' },
  'Net Banking': { icon: 'globe-outline', label: 'Net Banking', description: 'Pay from your bank account' },
  'Wallet': { icon: 'wallet-outline', label: 'Wallet', description: 'Pay from BankCBS Wallet' },
};

const PaymentMethodTileComponent = ({ method, selected, onPress }: PaymentMethodTileProps) => {
  const theme = useTheme();
  const config = METHOD_CONFIG[method];

  return (
    <Pressable onPress={onPress}>
      <View
        style={[
          styles.tile,
          {
            borderColor: selected ? theme.colors.primary : theme.colors.cardBorder,
            backgroundColor: selected ? `${theme.colors.primary}06` : theme.colors.surface,
            borderWidth: selected ? 2 : 1,
          },
        ]}
      >
        <View style={[styles.icon, { backgroundColor: selected ? `${theme.colors.primary}14` : theme.colors.surfaceMuted }]}>
          <Ionicons name={config.icon as any} size={22} color={selected ? theme.colors.primary : theme.colors.textSecondary} />
        </View>
        <View style={styles.copy}>
          <Text style={[styles.label, { color: theme.colors.textPrimary }]}>{config.label}</Text>
          <Text style={[styles.description, { color: theme.colors.textMuted }]}>{config.description}</Text>
        </View>
        <Ionicons
          name={selected ? 'radio-button-on' : 'radio-button-off'}
          size={22}
          color={selected ? theme.colors.primary : theme.colors.textMuted}
        />
      </View>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  tile: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 16,
    gap: 14,
  },
  icon: {
    width: 44,
    height: 44,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  copy: { flex: 1, gap: 2 },
  label: { fontSize: 15, fontFamily: fontFamily.bold },
  description: { fontSize: 12 },
});

export const PaymentMethodTile = memo(PaymentMethodTileComponent);