import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { PacketsData } from 'api/packets';
import React, { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Text, 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 === 'paid';
      navigation.navigate(isPaid ? 'PaymentQrCode' : 'PaymentMethod', {
        packets: item, // tanlangan itemni to‘liq yuboramiz
      });
    },
    [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 === 'paid';
      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}>
                <Text style={PaymentStyle.title}>{item.packetName}</Text>
                {isPaid ? (
                  <Text style={PaymentStyle.badge}>{t("To'langan")}</Text>
                ) : (
                  <Text style={badgeStyle}>{t("To'lanmagan")}</Text>
                )}
              </View>
              <View style={PaymentStyle.row}>
                <Text style={PaymentStyle.infoTitle}>{t('Reys raqami')}</Text>
                <Text
                  style={[
                    PaymentStyle.text,
                    { width: '60%', textAlign: 'right' },
                  ]}
                >
                  {item.packetName}
                </Text>
              </View>
              <View style={PaymentStyle.row}>
                <Text style={PaymentStyle.infoTitle}>
                  {t("Mahsulotlar og'irligi")}
                </Text>
                <Text style={PaymentStyle.text}>{item.weight}</Text>
              </View>
              <View style={PaymentStyle.row}>
                <Text style={PaymentStyle.infoTitle}>
                  {t('Mahsulotlar soni')}
                </Text>
                <Text style={PaymentStyle.text}>{item.items.length}</Text>
              </View>
              <View style={PaymentStyle.row}>
                <Text style={PaymentStyle.infoTitle}>{t('Umumiy narxi')}</Text>
                <Text style={PaymentStyle.text}>{item.totalPrice}</Text>
              </View>
            </View>
          </View>
        </TouchableOpacity>
      );
    },
    [handlePaymentPress, cardContainerStyle, badgeStyle, t],
  );

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

export default Payment;
