import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { PacketsData } from 'api/packets';
import AppText from 'components/AppText';
import React, { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { TouchableOpacity, View } from 'react-native';
import { PaymentStyle } from './style';

type WalletStackParamList = {
  PaymentMethod: { packets: PacketsData };
  PaymentQrCode: { packets: PacketsData };
};

type LoginScreenNavigationProp =
  NativeStackNavigationProp<WalletStackParamList>;

interface Props {
  packets: PacketsData;
}

const Payment = ({ packets }: Props) => {
  const navigation = useNavigation<LoginScreenNavigationProp>();
  const { t } = useTranslation();

  const handlePaymentPress = useCallback(
    (item: any) => {
      const isPaid =
        item.paymentStatus === 'PAYED' || item.paymentStatus === 'PENDING';
      navigation.navigate(isPaid ? 'PaymentQrCode' : 'PaymentMethod', {
        packets: item,
      });
    },
    [navigation],
  );

  const cardContainerStyle = useMemo(
    () => ({
      flexDirection: 'row' as const,
      gap: 10,
      justifyContent: 'center' as const,
      alignItems: 'center' as const,
    }),
    [],
  );

  const badgeStyle = useMemo(
    () => [PaymentStyle.badge, { backgroundColor: '#D32F2F' }],
    [],
  );

  const renderPaymentCard = useCallback(
    (item: any) => {
      const isPaid =
        item.paymentStatus === 'PAYED' || item.paymentStatus === 'PENDING';
      const cardStyle = [
        PaymentStyle.card,
        { borderColor: isPaid ? '#4CAF50' : '#D32F2F', borderWidth: 1.5 },
      ];

      return (
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={() => handlePaymentPress(item)}
          key={item.id}
        >
          <View style={cardContainerStyle}>
            <View style={cardStyle}>
              <View style={PaymentStyle.cardHeader}>
                <AppText style={PaymentStyle.title}>{item.packetName}</AppText>
                {isPaid ? (
                  <AppText style={PaymentStyle.badge}>{t("To'langan")}</AppText>
                ) : (
                  <AppText style={badgeStyle}>{t("To'lanmagan")}</AppText>
                )}
              </View>
              <View style={PaymentStyle.row}>
                <AppText style={PaymentStyle.infoTitle}>
                  {t('Reys raqami')}
                </AppText>
                <AppText
                  style={[
                    PaymentStyle.text,
                    { width: '60%', textAlign: 'right' },
                  ]}
                >
                  {item.packetName}
                </AppText>
              </View>
              <View style={PaymentStyle.row}>
                <AppText style={PaymentStyle.infoTitle}>
                  {t("Mahsulotlar og'irligi")}
                </AppText>
                <AppText style={PaymentStyle.text}>{item.weight}</AppText>
              </View>
              <View style={PaymentStyle.row}>
                <AppText style={PaymentStyle.infoTitle}>
                  {t('Mahsulotlar soni')}
                </AppText>
                <AppText style={PaymentStyle.text}>{item.items.length}</AppText>
              </View>
              <View style={PaymentStyle.row}>
                <AppText style={PaymentStyle.infoTitle}>
                  {t('Umumiy narxi')}
                </AppText>
                <AppText style={PaymentStyle.text}>{item.totalPrice}</AppText>
              </View>
            </View>
          </View>
        </TouchableOpacity>
      );
    },
    [handlePaymentPress, cardContainerStyle, badgeStyle, t],
  );

  return (
    <View style={PaymentStyle.container}>
      {packets?.data.map(renderPaymentCard)}
    </View>
  );
};

export default Payment;