import NavbarBack from 'components/NavbarBack';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Dimensions,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Circle, Path } from 'react-native-svg';
import { PaymentStyle } from 'screens/wallet/payment/ui/style';
import Plane from 'svg/Plane';
import { fakeProducts } from '../lib/data';

interface PaymentQrCodeProps {}

const PaymentQrCode = (props: PaymentQrCodeProps) => {
  const { t } = useTranslation();
  const screenWidth = Dimensions.get('window').width;
  const isSmallScreen = screenWidth < 380;
  const svgWidth = screenWidth * 0.8;
  const svgWidthProduct = screenWidth * 1;
  return (
    <SafeAreaView>
      <NavbarBack title={t("To'lov usuli")} />
      <ScrollView
        style={PaymentStyle.containerMethod}
        contentContainerStyle={{ paddingBottom: 80 }}
      >
        <View style={PaymentStyle.cardMethod}>
          <View style={PaymentStyle.planeContainer}>
            <View style={{ position: 'relative', width: 200, height: 100 }}>
              <Svg height="80" width="200">
                <Circle cx="15" cy="60" r="15" fill="#313133" />
                <Circle cx="15" cy="60" r="7.5" fill="#3D3C3F" />
                <Circle cx="15" cy="60" r="3.5" fill="#28A7E8" />
                <Path
                  d="M 15 60 Q 100 0 185 60"
                  stroke="#8C8A93"
                  strokeWidth="2"
                  fill="none"
                  strokeDasharray="6"
                />
                <Circle cx="185" cy="60" r="15" fill="#313133" />
                <Circle cx="185" cy="60" r="7.5" fill="#3D3C3F" />
                <Circle cx="185" cy="60" r="3.5" fill="#28A7E8" />
              </Svg>
              <View style={PaymentStyle.planeIcon}>
                <Plane width={50} height={50} color="#DCDEE3" />
              </View>
            </View>
          </View>
          <View style={PaymentStyle.infoCard}>
            <View
              style={[
                PaymentStyle.info,
                isSmallScreen
                  ? { flexBasis: '48%', alignItems: 'flex-start' }
                  : { flexBasis: '48%', alignItems: 'flex-start' },
              ]}
            >
              <Text style={PaymentStyle.titleMethod}>USD</Text>
              <Text style={PaymentStyle.textMethod}>12.267 UZS</Text>
            </View>

            <View
              style={[
                PaymentStyle.info,
                isSmallScreen
                  ? { flexBasis: '48%', alignItems: 'flex-end' }
                  : { flexBasis: '48%', alignItems: 'flex-end' },
              ]}
            >
              <Text style={PaymentStyle.titleMethod}>Cargo</Text>
              <Text style={PaymentStyle.textMethod}>12.267 UZS/ kg</Text>
            </View>

            <View
              style={[
                PaymentStyle.info,
                isSmallScreen
                  ? { flexBasis: '48%', alignItems: 'flex-start' }
                  : { flexBasis: '48%', alignItems: 'flex-start' },
              ]}
            >
              <Text style={PaymentStyle.titleMethod}>
                {t('Yetkazish vaqti')}
              </Text>
              <Text style={PaymentStyle.textMethod}>08.25.2025</Text>
            </View>

            <View
              style={[
                PaymentStyle.info,
                isSmallScreen
                  ? { flexBasis: '48%', alignItems: 'flex-end' }
                  : { flexBasis: '48%', alignItems: 'flex-end' },
              ]}
            >
              <Text style={PaymentStyle.titleMethod}>Avia-CP</Text>
              <Text style={PaymentStyle.textMethod}>223</Text>
            </View>
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: 30,
            }}
          >
            <View
              style={{
                backgroundColor: '#28a8e80c',
                width: 30,
                height: 30,
                borderRadius: 60,
                position: 'absolute',
                left: -15,
              }}
            />
            <Svg height="1" width={svgWidth}>
              <Path
                d={`M 15 0 Q ${svgWidth} 0 ${svgWidth} 0`}
                stroke="#8C8A93"
                strokeWidth="2"
                fill="none"
                strokeDasharray="6"
              />
            </Svg>
            <View
              style={{
                backgroundColor: '#28A7E81A',
                width: 30,
                height: 30,
                borderRadius: 60,
                position: 'absolute',
                right: -15,
              }}
            />
          </View>
          {fakeProducts.map((item, index) => (
            <View key={index} style={{ marginBottom: 15 }}>
              <View style={PaymentStyle.receiptCard}>
                <View style={PaymentStyle.rowBetween}>
                  <Text style={PaymentStyle.itemName}>{item.name}</Text>
                  <Text style={PaymentStyle.track}>
                    {t('Trek ID')}: {item.trackId}
                  </Text>
                </View>
                <View style={PaymentStyle.rowBetween}>
                  <Text style={PaymentStyle.weight}>
                    {t('Og’irligi')}: {item.weight}
                  </Text>
                  <Text style={PaymentStyle.price}>1kg * {item.unitPrice}</Text>
                </View>
                <View style={PaymentStyle.rowRight}>
                  <Text style={PaymentStyle.total}>
                    {t('Umumiy narxi')}: {item.total} {t('so‘m')}
                  </Text>
                </View>
              </View>
              <Svg height="1" width={svgWidthProduct}>
                <Path
                  d={`M 0 0 Q ${svgWidthProduct} 0 ${svgWidthProduct} 0`}
                  stroke="#8C8A93"
                  strokeWidth="2"
                  fill="none"
                  strokeDasharray="9"
                />
              </Svg>
            </View>
          ))}
          <View style={PaymentStyle.infoCard}>
            <View
              style={[
                PaymentStyle.info,
                isSmallScreen
                  ? { flexBasis: '48%', alignItems: 'flex-start' }
                  : { flexBasis: '48%', alignItems: 'flex-start' },
              ]}
            >
              <Text style={PaymentStyle.titleMethod}>{t('Umumiy narxi')}</Text>
            </View>

            <View
              style={[
                PaymentStyle.info,
                isSmallScreen
                  ? { flexBasis: '48%', alignItems: 'flex-end' }
                  : { flexBasis: '48%', alignItems: 'flex-end' },
              ]}
            >
              <Text style={PaymentStyle.titleMethod}>100.000.000</Text>
            </View>
            <View
              style={{ alignItems: 'center', marginTop: 10, margin: 'auto' }}
            >
              <View
                style={{
                  width: 200,
                  height: 200,
                  position: 'relative',
                  backgroundColor: '#fff',
                  padding: 10,
                }}
              >
                <Image
                  source={{
                    uri: 'https://docs.lightburnsoftware.com/legacy/img/QRCode/ExampleCode.png',
                  }}
                  style={{ width: '100%', height: '100%' }}
                  resizeMode="contain"
                />

                {/* Top-left */}
                <View
                  style={[
                    styles.cornerStyle,
                    { top: 0, left: 0, borderColor: '#0072FF' },
                  ]}
                />
                {/* Top-right */}
                <View
                  style={[
                    styles.cornerStyle,
                    {
                      top: 0,
                      right: 0,
                      borderColor: '#0072FF',
                      transform: [{ rotate: '90deg' }],
                    },
                  ]}
                />
                {/* Bottom-left */}
                <View
                  style={[
                    styles.cornerStyle,
                    {
                      bottom: 0,
                      left: 0,
                      borderColor: '#0072FF',
                      transform: [{ rotate: '-90deg' }],
                    },
                  ]}
                />
                {/* Bottom-right */}
                <View
                  style={[
                    styles.cornerStyle,
                    {
                      bottom: 0,
                      right: 0,
                      borderColor: '#007AFF',
                      transform: [{ rotate: '180deg' }],
                    },
                  ]}
                />
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default PaymentQrCode;

const styles = StyleSheet.create({
  cornerStyle: {
    position: 'absolute' as const,
    width: 40,
    height: 40,
    borderTopWidth: 6,
    borderLeftWidth: 6,
    borderColor: '#007AFF',
  },
});