import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Linking, Platform } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { storage, StoreType } from 'src/storage';
import { fetchPremiumStatus } from '@api/app';
import { Colors } from 'src/theme';
import * as IAP from 'expo-iap';
import { SafeAreaView } from 'react-native-safe-area-context';
import { API_HOST } from 'src/constants';

const ManageSubscriptionScreen = () => {
  const navigation = useNavigation();
  const [loading, setLoading] = useState(true);
  const [validUntil, setValidUntil] = useState<string | null>(null);
  const [subSource, setSubSource] = useState<string>('web');

  useEffect(() => {
    const loadStatus = async () => {
      try {
        const token = storage.get('token', StoreType.STRING) as string;
        if (token) {
          const status = await fetchPremiumStatus(token);
          if (status?.data) {
            setValidUntil(status.data.end_date || status.data.next_payment || null);
            setSubSource(status.platform || 'web');
          }
        }
      } catch (err) {
        console.warn('Failed to fetch premium status on manage screen:', err);
      } finally {
        setLoading(false);
      }
    };
    loadStatus();
  }, []);

  const handleManage = async () => {
    if (subSource === 'wp') {
      Linking.openURL(API_HOST + '/my-account/subscriptions/').catch(err =>
        console.error('Failed to open WP subscription URL:', err)
      );
    } else if (subSource === 'apple' || subSource === 'google') {
      try {
        if (IAP.deepLinkToSubscriptions) {
          await IAP.deepLinkToSubscriptions();
        } else {
          if (Platform.OS === 'ios') {
            Linking.openURL('https://apps.apple.com/account/subscriptions');
          } else {
            Linking.openURL('https://play.google.com/store/account/subscriptions');
          }
        }
      } catch (e) {
        console.error('Deep link to subscriptions failed', e);
      }
    } else {
      if (Platform.OS === 'ios') {
        Linking.openURL('https://apps.apple.com/account/subscriptions');
      } else {
        Linking.openURL('https://play.google.com/store/account/subscriptions');
      }
    }
  };

  return (
    <SafeAreaView style={styles.safeArea} edges={['bottom', 'left', 'right']}>
      <View style={styles.container}>
        <TouchableOpacity style={styles.closeButton} onPress={() => navigation.goBack()}>
          <AntDesign name="close" size={20} color={Colors.LIGHT_GRAY} />
        </TouchableOpacity>

        <Text style={styles.title}>Manage Subscription</Text>
        <Text style={styles.subtitle}>Review your subscription details</Text>

        <View style={styles.detailsContainer}>
          {loading ? (
            <ActivityIndicator size="large" color={Colors.DARK_BLUE} />
          ) : (
            <View>
              <Text style={styles.infoLabel}>Status:</Text>
              <Text style={styles.infoValue}>Active</Text>

              <View style={styles.separator} />

              <Text style={styles.infoLabel}>Valid Until / Next Payment:</Text>
              <Text style={styles.infoValue}>{validUntil || 'Lifetime / Unknown'}</Text>

              <View style={styles.separator} />

              <Text style={styles.infoLabel}>Source:</Text>
              <Text style={styles.infoValue}>
                {subSource === 'wp' ? 'Website' :
                  subSource === 'apple' ? 'App Store' :
                    subSource === 'google' ? 'Google Play' : 'Unknown'}
              </Text>
            </View>
          )}
        </View>

        {!loading && (
          <TouchableOpacity style={styles.manageButton} onPress={handleManage}>
            <Text style={styles.manageButtonText}>Manage Subscription</Text>
          </TouchableOpacity>
        )}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: Colors.WHITE,
  },
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: Colors.WHITE,
  },
  closeButton: {
    alignSelf: 'flex-start',
    padding: 5,
  },
  title: {
    fontSize: 20,
    fontFamily: 'montserrat-700',
    color: Colors.DARK_BLUE,
    marginBottom: 8,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 14,
    fontWeight: '600',
    color: Colors.DARK_BLUE,
    textAlign: 'center',
    marginBottom: 20,
  },
  detailsContainer: {
    backgroundColor: Colors.FILL_LIGHT,
    borderWidth: 1,
    borderColor: Colors.LIGHT_GRAY,
    borderRadius: 12,
    padding: 16,
    marginBottom: 30,
  },
  infoLabel: {
    fontSize: 14,
    color: Colors.TEXT_GRAY,
    fontFamily: 'montserrat-600',
    marginBottom: 4,
  },
  infoValue: {
    fontSize: 16,
    fontWeight: 'bold',
    color: Colors.DARK_BLUE,
  },
  separator: {
    height: 1,
    backgroundColor: Colors.LIGHT_GRAY,
    marginVertical: 15,
  },
  manageButton: {
    backgroundColor: Colors.WHITE,
    borderWidth: 1,
    borderColor: Colors.ORANGE,
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  manageButtonText: {
    color: Colors.ORANGE,
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default ManageSubscriptionScreen;