import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  Alert,
  Dimensions,
} from 'react-native';
import Svg, { Path } from 'react-native-svg';
import { useTheme } from '@/theme';
import { instance } from '@/services/instance';

import { SafeScreen } from '@/components/templates';
import { RootScreenProps } from '@/navigation/types';
import { Paths } from '@/navigation/paths';

const { width } = Dimensions.get('window');

// Google Pay Icon Component
const GooglePayIcon = () => (
  <Svg width={48} height={48} viewBox="0 0 48 48" fill="none">
    <Path
      d="M24 9.5C20.65 9.5 17.45 10.65 14.9 12.7L18.3 16.1C19.95 14.85 21.95 14.15 24 14.15C28.55 14.15 32.35 17.4 33.25 21.75H38.95C37.95 14.45 31.65 9.5 24 9.5Z"
      fill="#EA4335"
    />
    <Path
      d="M9.05 24C9.05 26.05 9.55 28 10.45 29.7L5.8 33.1C4.1 30.35 3 27.25 3 24C3 20.75 4.1 17.65 5.8 14.9L10.45 18.3C9.55 20 9.05 21.95 9.05 24Z"
      fill="#FBBC05"
    />
    <Path
      d="M24 38.5C20.65 38.5 17.45 37.35 14.9 35.3L10.45 38.7C13.2 41.4 16.95 43 21 43.5V43.5C28.3 42.5 34.3 37.5 36.75 30.75H33.25C32.35 35.1 28.55 38.5 24 38.5Z"
      fill="#34A853"
    />
    <Path
      d="M45 24C45 22.85 44.9 21.7 44.7 20.6H24V27.65H35.4C34.7 30.55 32.85 32.95 30.35 34.45L33.85 37.2C37.95 33.45 40.2 28.15 40.2 24C40.2 22.85 40.1 21.7 39.9 20.6H45V24Z"
      fill="#4285F4"
    />
  </Svg>
);

// Apple Pay Icon Component
const ApplePayIcon = () => (
  <Svg width={40} height={40} viewBox="0 0 24 24" fill="none">
    <Path
      d="M17.05 20.28C16.03 21.23 14.96 21.08 13.93 20.63C12.84 20.17 11.85 20.15 10.7 20.63C9.28 21.25 8.52 21.07 7.62 20.28C2.02 14.58 2.83 5.97 9.26 5.67C10.76 5.75 11.79 6.52 12.65 6.58C13.95 6.31 15.21 5.52 16.61 5.63C18.31 5.78 19.6 6.45 20.45 7.65C16.77 9.87 17.63 14.72 20.95 16.11C20.27 17.89 19.4 19.65 17.04 20.29L17.05 20.28ZM12.53 5.62C12.38 3.06 14.42 0.93 16.87 0.75C17.2 3.66 14.18 5.89 12.53 5.62Z"
      fill="white"
    />
  </Svg>
);

interface PriceConfig {
  prices?: Array<{
    id: string;
    name: string;
    price: number;
    currency: string;
  }>;
}

const Pay = ( { navigation }: RootScreenProps<Paths.Pay> ) => {
  const { colors, layout, gutters, fonts } = useTheme();
  const [selectedPayment, setSelectedPayment] = useState<
    'google' | 'apple' | ''
  >('');
  const [productList, setProductList] = useState<PriceConfig['prices']>([]);

  useEffect(() => {
    // 获取价格配置
    const fetchPriceConfig = async () => {
      try {
        const response = await instance.get('price-config').json<PriceConfig>();
        setProductList(response?.prices || []);
        console.log('getPriceConfig', response?.prices);
      } catch (err) {
        console.error('获取价格配置失败:', err);
      }
    };

    fetchPriceConfig();
  }, []);

  const selectPaymentMethod = (method: 'google' | 'apple') => {
    setSelectedPayment(method);
  };

  const handleCompleteSubscription = () => {
    if (!selectedPayment) {
      Alert.alert('提示', '请选择支付方式');
      return;
    }

    const paymentName =
      selectedPayment === 'google' ? 'Google Pay' : 'Apple Pay';
    Alert.alert('提示', `正在使用 ${paymentName} 完成订阅...`);
  };

  return (
    <SafeScreen style={styles.pageBgColor} navigation={navigation}>
      <ScrollView style={styles.container}>
        <View style={styles.content}>
          {/* 页面标题区域 */}
          <View style={styles.header}>
            <View style={styles.headerContent}>
              <Text style={[styles.title, fonts.bold]}>
                Complete Your Subscription
              </Text>
              <View style={styles.premiumBadge}>
                <Text style={[styles.premiumTitle, fonts.bold]}>
                  Premium Plan
                </Text>
                <Text style={styles.premiumPrice}>• $9.99/month</Text>
              </View>
            </View>
          </View>

          {/* 订阅摘要卡片 */}
          <View style={[styles.card, gutters.marginBottom_24]}>
            <Text style={[styles.cardTitle, fonts.bold]}>
              Subscription Summary
            </Text>

            <View style={styles.summaryList}>
              {/* Plan */}
              <View style={styles.summaryItem}>
                <Text style={styles.summaryLabel}>Plan:</Text>
                <Text style={[styles.summaryValue, fonts.bold]}>
                  Premium Plan
                </Text>
              </View>

              {/* Price */}
              <View style={styles.summaryItem}>
                <Text style={styles.summaryLabel}>Price:</Text>
                <Text style={[styles.summaryValue, fonts.bold]}>
                  $9.99/month
                </Text>
              </View>

              {/* Billing Cycle */}
              <View style={styles.summaryItem}>
                <Text style={styles.summaryLabel}>Billing Cycle:</Text>
                <Text style={[styles.summaryValue, fonts.bold]}>Monthly</Text>
              </View>
            </View>
          </View>

          {/* 选择支付方式 */}
          <View style={gutters.marginBottom_24}>
            <Text
              style={[styles.sectionTitle, fonts.bold, gutters.marginBottom_16]}
            >
              Choose Payment Method
            </Text>

            <View style={styles.paymentMethods}>
              {/* Google Pay */}
              <TouchableOpacity
                onPress={() => selectPaymentMethod('google')}
                style={[
                  styles.paymentButton,
                  styles.paymentButtonWhite,
                  selectedPayment === 'google' && styles.paymentButtonSelected,
                ]}
              >
                <View style={styles.paymentContent}>
                  <GooglePayIcon />
                  <Text style={[styles.paymentText, fonts.bold]}>
                    Google Pay
                  </Text>
                </View>
              </TouchableOpacity>

              {/* Apple Pay */}
              <TouchableOpacity
                onPress={() => selectPaymentMethod('apple')}
                style={[
                  styles.paymentButton,
                  styles.paymentButtonBlack,
                  selectedPayment === 'apple' && styles.paymentButtonSelected,
                ]}
              >
                <View style={styles.paymentContent}>
                  <ApplePayIcon />
                  <Text style={[styles.paymentTextWhite, fonts.bold]}>
                    Apple Pay
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>

          {/* 完成订阅按钮和条款 */}
          <View style={gutters.marginBottom_24}>
            <TouchableOpacity
              onPress={handleCompleteSubscription}
              disabled={!selectedPayment}
              style={[
                styles.completeButton,
                !selectedPayment && styles.completeButtonDisabled,
              ]}
            >
              <Text style={[styles.completeButtonText, fonts.bold]}>
                Complete Subscription
              </Text>
            </TouchableOpacity>

            <Text style={styles.termsText}>
              By subscribing, you agree to our{' '}
              <Text style={styles.termsLink}>Terms of Service</Text> and{' '}
              <Text style={styles.termsLink}>Privacy Policy</Text>.
            </Text>
          </View>
        </View>
      </ScrollView>
    </SafeScreen>
  );
};

const styles = StyleSheet.create({
  pageBgColor: {
    backgroundColor: '#FBBF24', // yellow-400
  },
  container: {
    flex: 1,
  },
  content: {
    maxWidth: 672, // 2xl
    width: width > 672 ? 672 : '100%',
    alignSelf: 'center',
    paddingHorizontal: 16,
    paddingVertical: 24,
  },
  header: {
    marginBottom: 24,
  },
  headerContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 16,
  },
  title: {
    fontSize: 32,
    color: '#1F2937', // dark-800
    flex: 1,
    marginRight: 16,
  },
  premiumBadge: {
    width: 168,
    backgroundColor: '#2563EB', // blue-600
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 24,
    borderWidth: 2,
    borderColor: '#0A0910',
  },
  premiumTitle: {
    color: '#FFFFFF',
    fontSize: 14,
  },
  premiumPrice: {
    color: '#FFFFFF',
    fontSize: 12,
  },
  card: {
    backgroundColor: '#FFFFFF',
    borderWidth: 2,
    borderColor: '#0A0910',
    borderRadius: 8,
    padding: 24,
  },
  cardTitle: {
    fontSize: 24,
    color: '#1D4ED8', // blue-700
    marginBottom: 24,
  },
  summaryList: {
    gap: 16,
  },
  summaryItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  summaryLabel: {
    fontSize: 16,
    color: '#6B7280', // gray-600
  },
  summaryValue: {
    fontSize: 18,
    color: '#1F2937', // dark-800
  },
  sectionTitle: {
    fontSize: 24,
    color: '#1F2937', // dark-800
  },
  paymentMethods: {
    flexDirection: 'row',
    gap: 16,
  },
  paymentButton: {
    flex: 1,
    borderWidth: 2,
    borderRadius: 8,
    padding: 24,
    minHeight: 120,
    justifyContent: 'center',
  },
  paymentButtonWhite: {
    backgroundColor: '#FFFFFF',
    borderColor: '#0A0910',
  },
  paymentButtonBlack: {
    backgroundColor: '#000000',
    borderColor: '#0A0910',
  },
  paymentButtonSelected: {
    borderColor: '#2563EB', // blue-600
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 8,
    elevation: 8,
  },
  paymentContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 12,
  },
  paymentText: {
    fontSize: 20,
    color: '#1F2937', // dark-800
  },
  paymentTextWhite: {
    fontSize: 20,
    color: '#FFFFFF',
  },
  completeButton: {
    width: '100%',
    backgroundColor: '#2563EB', // blue-600
    paddingHorizontal: 24,
    paddingVertical: 16,
    borderRadius: 8,
    borderWidth: 2,
    borderColor: '#0A0910',
    marginBottom: 16,
  },
  completeButtonDisabled: {
    backgroundColor: '#9CA3AF', // gray-400
  },
  completeButtonText: {
    color: '#FFFFFF',
    fontSize: 18,
    textAlign: 'center',
  },
  termsText: {
    fontSize: 14,
    color: '#6B7280', // gray-600
    textAlign: 'center',
  },
  termsLink: {
    color: '#2563EB', // blue-600
    textDecorationLine: 'underline',
  },
});

export default Pay;
