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 { StyleSheet, 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 styles = useMemo(() => makeStyles(), []);

  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 === 'PAID';
      const cardStyle = [
        PaymentStyle.card,
        {
          borderColor: isPaid
            ? '#4CAF50'
            : item.paymentStatus === 'PENDING'
            ? '#FFA500'
            : '#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>
                ) : item.paymentStatus === 'PENDING' ? (
                  <AppText
                    style={{
                      backgroundColor: '#FFA500',
                      color: '#fff',
                      fontSize: 12,
                      paddingHorizontal: 8,
                      paddingVertical: 2,
                      borderRadius: 5,
                      overflow: 'hidden',
                    }}
                  >
                    {t('Kutilmoqda')}
                  </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>
              {item.items.map((e: any) => (
                <View
                  key={e.trekId}
                  style={{
                    ...styles.infoCard,
                    flexDirection: 'column',
                    gap: 4,
                  }}
                >
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      gap: 4,
                    }}
                  >
                    <AppText style={styles.infoTitle}>
                      {t('Mahsulot nomi')}
                    </AppText>
                    <AppText style={styles.infoText}>{e.name}</AppText>
                  </View>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      gap: 4,
                    }}
                  >
                    <AppText style={styles.infoTitle}>{t('Trek ID')}</AppText>
                    <AppText style={styles.infoText}>{e.trekId}</AppText>
                  </View>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      gap: 4,
                    }}
                  >
                    <AppText style={styles.infoTitle}>{t('Og’irligi')}</AppText>
                    <AppText style={styles.infoText}>{e.weight} kg</AppText>
                  </View>
                </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>
  );
};

const makeStyles = () =>
  StyleSheet.create({
    container: { width: '95%', margin: 'auto', borderRadius: 10 },
    count: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginTop: 10,
    },
    title: { fontSize: 16, fontWeight: '500', color: '#333' },

    card: {
      backgroundColor: '#fff',
      marginTop: 8,
      padding: 15,
      borderRadius: 10,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 2,
      elevation: 2,
    },

    statusCard: { marginBottom: 10 },
    circle: {
      padding: 8,
      borderRadius: 50,
      alignItems: 'center',
      justifyContent: 'center',
    },
    divider: { width: 20, borderBottomWidth: 2, borderStyle: 'dashed' },
    iconWrapper: {
      flexDirection: 'row',
      alignItems: 'center',
      flex: 1,
      marginBottom: 10,
    },

    statusLabelWrapper: {
      borderRadius: 8,
      alignSelf: 'flex-start',
      paddingVertical: 6,
      paddingHorizontal: 10,
      marginBottom: 12,
    },
    statusText: { fontFamily: 'GolosText-Bold', fontSize: 16 },

    infoCard: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: 6,
    },
    infoTitle: { fontSize: 16, color: '#979797', fontWeight: '500' },
    infoText: { fontSize: 14, color: '#28A7E8', fontWeight: '500' },
  });

export default Payment;
