import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '@/shared/styles/useTheme';
import { useNavigation } from '@react-navigation/native';
import { Images } from '@/assets/assets';

const ComingSoonScreen: React.FC = () => {
  const { colors, fonts, spacing, shadows } = useTheme();
  const navigation = useNavigation();

  const handleGoBack = () => {
    navigation.goBack();
  };

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]}>
      {/* Header with Home Icon */}
      <View style={styles.header}>
        <TouchableOpacity
          style={[styles.homeButton, { backgroundColor: colors.primary }]}
          onPress={handleGoBack}
          activeOpacity={0.8}
        >
          <Icon name="home" size={24} color={colors.surface} />
        </TouchableOpacity>
      </View>

      {/* Main Content */}
      <View style={styles.content}>
        {/* Coming Soon Image */}
        <View style={styles.imageContainer}>
          <Image
            source={Images.coming_soon}
            style={styles.comingSoonImage}
            resizeMode="contain"
          />
        </View>

        {/* Text Content */}
        <View style={styles.textContainer}>
          <Text style={[styles.title, { color: colors.text, fontFamily: fonts.bold }]}>
            New Experience Arriving Shortly
          </Text>
          
          <Text style={[styles.subtitle, { color: colors.textLight, fontFamily: fonts.regular }]}>
            We're working hard to bring you an amazing experience. This feature will be available soon!
          </Text>

          <View style={styles.featureList}>
            <View style={styles.featureItem}>
              <Icon name="check-circle" size={20} color={colors.primary} />
              <Text style={[styles.featureText, { color: colors.text, fontFamily: fonts.regular }]}>
                Enhanced Dashboard
              </Text>
            </View>
            
            <View style={styles.featureItem}>
              <Icon name="check-circle" size={20} color={colors.primary} />
              <Text style={[styles.featureText, { color: colors.text, fontFamily: fonts.regular }]}>
                Real-time Analytics
              </Text>
            </View>
            
            <View style={styles.featureItem}>
              <Icon name="check-circle" size={20} color={colors.primary} />
              <Text style={[styles.featureText, { color: colors.text, fontFamily: fonts.regular }]}>
                Advanced Reporting
              </Text>
            </View>
          </View>

          <Text style={[styles.note, { color: colors.textLight, fontFamily: fonts.regular }]}>
            Stay tuned for updates! We'll notify you as soon as this feature is ready.
          </Text>
        </View>
      </View>

      {/* Footer */}
      <View style={styles.footer}>
        <TouchableOpacity
          style={[styles.backButton, { backgroundColor: colors.primary, borderColor: colors.primary }]}
          onPress={handleGoBack}
          activeOpacity={0.8}
        >
          <Icon name="arrow-back" size={20} color={colors.surface} />
          <Text style={[styles.backButtonText, { color: colors.surface, fontFamily: fonts.medium }]}>
            Back to Categories
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  homeButton: {
    width: 48,
    height: 48,
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
    ...StyleSheet.flatten({
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.15,
      shadowRadius: 4,
      elevation: 4,
    }),
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 24,
  },
  imageContainer: {
    marginBottom: 32,
    alignItems: 'center',
  },
  comingSoonImage: {
    width: 280,
    height: 280,
  },
  textContainer: {
    alignItems: 'center',
    maxWidth: 320,
  },
  title: {
    fontSize: 28,
    textAlign: 'center',
    marginBottom: 16,
    lineHeight: 36,
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 32,
    lineHeight: 24,
  },
  featureList: {
    marginBottom: 24,
    width: '100%',
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  featureText: {
    fontSize: 14,
    marginLeft: 12,
  },
  note: {
    fontSize: 14,
    textAlign: 'center',
    fontStyle: 'italic',
    lineHeight: 20,
  },
  footer: {
    paddingHorizontal: 24,
    paddingBottom: 24,
  },
  backButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 16,
    paddingHorizontal: 24,
    borderRadius: 12,
    borderWidth: 1,
  },
  backButtonText: {
    fontSize: 16,
    marginLeft: 8,
  },
});

export default ComingSoonScreen;
