import Clipboard from '@react-native-clipboard/clipboard';
import { getMeData } from 'api/auth/type';
import { myPassport } from 'api/passport';
import AppText from 'components/AppText';
import formatDate from 'helpers/formatData';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
import Toast from 'react-native-toast-message';
import Copy from 'svg/Copy';

const screenWidth = Dimensions.get('window').width;
const isSmallScreen = screenWidth < 200;

interface Props {
  myPassport: myPassport[];
  getMe: getMeData;
}

const MyPassport = ({ getMe, myPassport }: Props) => {
  const { t } = useTranslation();

  const handleCopy = (text: string) => {
    Clipboard.setString(text);
    Toast.show({
      type: 'success',
      text1: t('Nusxa olingan'),
      text2: t('Pochta kodi nusxalandi!'),
      position: 'top',
      visibilityTime: 2000,
    });
  };

  const getStatusMeta = (status?: string) => {
    const key = (status || '').toLowerCase();
    switch (key) {
      case 'active':
        return { label: t('Faol'), bg: '#E6F7EE', fg: '#1F9254' };
      case 'pending':
        return { label: t('Kutilmoqda'), bg: '#FFF7E6', fg: '#B26A00' };
      case 'inactive':
      case 'blocked':
        return { label: t('Faol emas'), bg: '#FDECEF', fg: '#A61D24' };
      default:
        return { label: t('Faol emas'), bg: '#EDF2F7', fg: '#A61D24' };
    }
  };

  return (
    <View style={styles.container}>
      {myPassport &&
        myPassport.map(data => (
          <View style={styles.card} key={data.passportPin}>
            <View
              style={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                alignItems: 'flex-start',
              }}
            >
              <AppText style={styles.title}>
                {t('Passport ma’lumotlarim')}{' '}
              </AppText>
              {getMe?.status && (
                <View
                  style={[
                    styles.statusBadge,
                    { backgroundColor: getStatusMeta(getMe.status).bg },
                  ]}
                >
                  <AppText
                    style={[
                      styles.statusText,
                      { color: getStatusMeta(getMe.status).fg },
                    ]}
                  >
                    {getStatusMeta(getMe.status).label}
                  </AppText>
                </View>
              )}
            </View>
            <View style={styles.infoCard}>
              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '35%', alignItems: 'flex-start' },
                ]}
              >
                <View style={styles.infoHeader}>
                  <AppText style={styles.infoTitle}>{t('Tez ID')} </AppText>
                  <TouchableOpacity
                    onPress={() =>
                      handleCopy((getMe && getMe?.aviaCargoId) || '')
                    }
                  >
                    <Copy color="#28A7E8" width={20} height={20} />
                  </TouchableOpacity>
                </View>
                <AppText style={styles.infoText}>{getMe?.aviaCargoId} </AppText>
              </View>

              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '65%', alignItems: 'flex-end' },
                ]}
              >
                <AppText style={styles.infoTitle}>{t('JSHSHIR')} </AppText>
                <AppText style={styles.infoText}>{data.passportPin} </AppText>
              </View>

              <View
                style={[
                  styles.info,
                  { flexBasis: '100%', alignItems: 'flex-start' },
                ]}
              >
                <AppText style={styles.infoTitle}>{t('To’liq ismi')} </AppText>
                <AppText style={styles.infoText}>{data.fullName} </AppText>
              </View>

              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '48%', alignItems: 'flex-start' },
                ]}
              >
                <AppText style={styles.infoTitle}>
                  {t('Passport seriya')}{' '}
                </AppText>
                <AppText style={styles.infoText}>
                  {data.passportSeries}{' '}
                </AppText>
              </View>

              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '48%', alignItems: 'flex-end' },
                ]}
              >
                <AppText style={styles.infoTitle}>
                  {t('Tug’ilgan kun')}{' '}
                </AppText>
                <AppText style={styles.infoText}>
                  {formatDate(data.birthDate)}
                </AppText>
              </View>

              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '48%', alignItems: 'flex-start' },
                ]}
              >
                <AppText style={[styles.infoTitle]}>
                  {t('Telefon raqami')}{' '}
                </AppText>
                <AppText style={[styles.infoText]}>+{data.phone} </AppText>
              </View>

              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '48%', alignItems: 'flex-end' },
                ]}
              >
                <AppText style={[styles.infoTitle]}>{t('Limit')} </AppText>
                <AppText style={[styles.infoText]}>
                  {data.availableLimit}${' '}
                </AppText>
              </View>
            </View>
          </View>
        ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '95%',
    alignSelf: 'center',
    marginTop: 10,
  },
  statusText: {
    fontSize: 13,
    fontFamily: 'GolosText-Bold',
  },
  card: {
    backgroundColor: '#FFFFFF',
    padding: 20,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
    marginBottom: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: '500',
    color: '#343434',
    marginBottom: 10,
  },
  infoCard: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  info: {
    marginBottom: 15,
    gap: 5,
  },
  statusBadge: {
    alignSelf: 'flex-end',
    marginTop: 5,
    marginBottom: 10,
    paddingHorizontal: 14,
    paddingVertical: 4,
    borderRadius: 20,
  },
  infoTitle: {
    color: '#979797',
    fontSize: 16,
    fontWeight: '500',
  },
  infoText: {
    fontSize: 18,
    fontWeight: '500',
  },
  infoHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 20,
  },
});

export default MyPassport;
