import React from 'react';
import { View, Text, StyleSheet, Modal, TouchableOpacity, Linking } from 'react-native';
import { Feather } from '@expo/vector-icons';
import { useAppTheme } from '../context/ThemeContext';

interface KillSwitchProps {
  visible: boolean;
  message?: string;
  supportEmail?: string;
}

export const KillSwitchOverlay = ({ visible, message, supportEmail }: KillSwitchProps) => {
  const { colors, isDark } = useAppTheme();

  return (
    <Modal visible={visible} transparent animationType="fade">
      <View style={[styles.container, { backgroundColor: isDark ? '#0A0A0A' : '#F8FAFC' }]}>
        <View style={styles.content}>
          <View style={[styles.glow, { backgroundColor: colors.error, opacity: 0.1 }]} />
          
          <View style={[styles.iconContainer, { backgroundColor: isDark ? '#1A1A1A' : '#FFF' }]}>
            <View style={[styles.iconBox, { backgroundColor: `${colors.error}15` }]}>
              <Feather name="shield-off" size={48} color={colors.error} />
            </View>
          </View>
          
          <Text style={[styles.title, { color: colors.text }]}>System Maintenance</Text>
          
          <View style={styles.messageBox}>
            <Text style={[styles.message, { color: isDark ? '#94A3B8' : '#64748B' }]}>
              {message || "We're currently performing urgent system maintenance to improve your experience. Please check back later."}
            </Text>
          </View>

          <View style={[styles.statusBadge, { backgroundColor: isDark ? '#1E293B' : '#F1F5F9' }]}>
            <View style={[styles.dot, { backgroundColor: colors.error }]} />
            <Text style={[styles.statusText, { color: colors.textSecondary }]}>
              Service Temporarily Unavailable
            </Text>
          </View>

          {supportEmail && (
            <TouchableOpacity 
              activeOpacity={0.7}
              style={[styles.supportBtn, { backgroundColor: isDark ? '#FFF' : '#111' }]}
              onPress={() => Linking.openURL(`mailto:${supportEmail}`)}
            >
              <Feather name="mail" size={16} color={isDark ? '#000' : '#FFF'} style={{ marginRight: 8 }} />
              <Text style={[styles.supportText, { color: isDark ? '#000' : '#FFF' }]}>Contact Support</Text>
            </TouchableOpacity>
          )}
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 32,
  },
  glow: {
    position: 'absolute',
    width: 300,
    height: 300,
    borderRadius: 150,
    top: '10%',
  },
  content: {
    alignItems: 'center',
    width: '100%',
  },
  iconContainer: {
    padding: 20,
    borderRadius: 40,
    marginBottom: 32,
    elevation: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.1,
    shadowRadius: 20,
  },
  iconBox: {
    width: 100,
    height: 100,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 32,
    fontFamily: 'Outfit_800ExtraBold',
    textAlign: 'center',
    marginBottom: 20,
    letterSpacing: -0.5,
  },
  messageBox: {
    paddingHorizontal: 10,
    marginBottom: 40,
  },
  message: {
    fontSize: 16,
    fontFamily: 'Outfit_400Regular',
    textAlign: 'center',
    lineHeight: 26,
  },
  statusBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 18,
    borderRadius: 50,
    gap: 10,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
  },
  statusText: {
    fontSize: 13,
    fontFamily: 'Outfit_600SemiBold',
    letterSpacing: 0.5,
    textTransform: 'uppercase',
  },
  supportBtn: {
    marginTop: 60,
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 32,
    borderRadius: 20,
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
  },
  supportText: {
    fontSize: 15,
    fontFamily: 'Outfit_700Bold',
  },
});