/*
 * File: ComingSoonScreen.tsx
 * Description: Coming Soon screen component with SVG image placeholder
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
  Image,
} from 'react-native';
import { theme } from '../../theme/theme';
import Icon from 'react-native-vector-icons/Feather';

// ============================================================================
// INTERFACES
// ============================================================================

/**
 * ComingSoonScreenProps Interface
 * 
 * Purpose: Defines the props required by the ComingSoonScreen component
 * 
 * Props:
 * - title: Main title for the coming soon screen (optional)
 * - subtitle: Subtitle or description text (optional)
 * - onBack: Function to handle back navigation (optional)
 * - showBackButton: Whether to show back button (default: true)
 * - backgroundColor: Custom background color (optional)
 * - textColor: Custom text color (optional)
 * - imageComponent: Custom SVG/image component to render (optional)
 */
interface ComingSoonScreenProps {
  title?: string;
  subtitle?: string;
  onBack?: () => void;
  showBackButton?: boolean;
  backgroundColor?: string;
  textColor?: string;
  imageComponent?: React.ReactNode;
}

// ============================================================================
// COMING SOON SCREEN COMPONENT
// ============================================================================

/**
 * ComingSoonScreen Component
 * 
 * Purpose: Displays a coming soon message with space for SVG image
 * 
 * Features:
 * 1. Customizable title and subtitle
 * 2. Space allocated for SVG image
 * 3. Optional back button with navigation
 * 4. Customizable colors and styling
 * 5. Responsive design for different screen sizes
 * 6. Safe area handling
 * 7. Status bar management
 * 8. Scrollable content for smaller screens
 * 
 * Usage:
 * - For features under development
 * - Placeholder screens during app development
 * - Maintenance or update screens
 * - Feature announcements
 */
export const ComingSoonScreen: React.FC<ComingSoonScreenProps> = ({
  title = 'Coming Soon',
  subtitle = 'We\'re working hard to bring you something amazing. Stay tuned for updates!',
  onBack,
  showBackButton = true,
  backgroundColor,
  textColor,
  imageComponent,
}) => {
  // ============================================================================
  // HELPER FUNCTIONS
  // ============================================================================

  /**
   * handleBack Function
   * 
   * Purpose: Handle back navigation if onBack function is provided
   */
  const handleBack = () => {
    if (onBack) {
      onBack();
    }
  };

  // ============================================================================
  // RENDER SECTION
  // ============================================================================

  return (
    <SafeAreaView style={[
      styles.container,
      backgroundColor && { backgroundColor }
    ]}>
      <StatusBar
        barStyle="dark-content"
        backgroundColor={backgroundColor || theme.colors.background}
        translucent={false}
      />
      
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
        bounces={false}
      >
        {/* Header with Back Button */}
        {showBackButton && onBack && (
          <View style={styles.header}>
            <TouchableOpacity
              onPress={handleBack}
              style={styles.backButton}
              activeOpacity={0.7}
            >
              <Icon 
                name="arrow-left" 
                size={24} 
                color={textColor || theme.colors.textPrimary} 
              />
            </TouchableOpacity>
          </View>
        )}

        {/* Main Content */}
        <View style={styles.content}>
          {/* SVG Image Container */}
          <View style={styles.imageContainer}>
            {imageComponent ? (
              imageComponent
            ) : (
              <View style={styles.imagePlaceholder}>
              <Image
                source={require('../../assets/images/coming-soon.jpg')}
                style={styles.imagePlaceholder}
              />
              </View>
            )}
          </View>

          {/* Title */}
          <Text style={[
            styles.title,
            textColor && { color: textColor }
          ]}>
            {title}
          </Text>

          {/* Subtitle */}
          <Text style={[
            styles.subtitle,
            textColor && { color: textColor }
          ]}>
            {subtitle}
          </Text>


          {/* Action Buttons */}
          <View style={styles.buttonContainer}>
            <TouchableOpacity
              style={[
                styles.button,
                styles.primaryButton,
                { backgroundColor: textColor || theme.colors.primary }
              ]}
              activeOpacity={0.8}
            >
              <Text style={[
                styles.buttonText,
                { color: backgroundColor || theme.colors.background }
              ]}>
                Get Notified
              </Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={[
                styles.button,
                styles.secondaryButton,
                { borderColor: textColor || theme.colors.primary }
              ]}
              activeOpacity={0.8}
            >
              <Text style={[
                styles.secondaryButtonText,
                { color: textColor || theme.colors.primary }
              ]}>
                Learn More
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

// ============================================================================
// STYLES SECTION
// ============================================================================

const styles = StyleSheet.create({
  // Main container
  container: {
    flex: 1,
    backgroundColor: theme.colors.background,
  },

  // Scroll view
  scrollView: {
    flex: 1,
  },

  // Scroll content
  scrollContent: {
    flexGrow: 1,
    paddingHorizontal: theme.spacing.lg,
  },

  // Header section
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: theme.spacing.lg,
    paddingBottom: theme.spacing.md,
  },

  // Back button
  backButton: {
    padding: theme.spacing.sm,
    borderRadius: theme.borderRadius.medium,
    backgroundColor: theme.colors.backgroundAlt,
    ...theme.shadows.small,
  },

  // Main content
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: theme.spacing.xxl,
  },

  // Image container
  imageContainer: {
    width: 280,
    height: 280,
    borderRadius: theme.borderRadius.large,
    backgroundColor: theme.colors.backgroundAlt,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: theme.spacing.xl,
    ...theme.shadows.medium,
  },

  // Image placeholder
  imagePlaceholder: {
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },

  // Placeholder text
  placeholderText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textSecondary,
    marginTop: theme.spacing.sm,
    textAlign: 'center',
  },

  // Title
  title: {
    fontSize: theme.typography.fontSize.displayLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    textAlign: 'center',
    marginBottom: theme.spacing.md,
    lineHeight: theme.typography.fontSize.displayLarge * 1.2,
  },

  // Subtitle
  subtitle: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textSecondary,
    textAlign: 'center',
    marginBottom: theme.spacing.xl,
    lineHeight: theme.typography.fontSize.bodyLarge * 1.4,
    paddingHorizontal: theme.spacing.md,
  },

  // Info container
  infoContainer: {
    marginBottom: theme.spacing.xl,
    width: '100%',
  },

  // Info item
  infoItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: theme.spacing.sm,
  },

  // Info text
  infoText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textSecondary,
    marginLeft: theme.spacing.sm,
  },

  // Button container
  buttonContainer: {
    width: '100%',
    gap: theme.spacing.md,
  },

  // Base button
  button: {
    paddingVertical: theme.spacing.md,
    paddingHorizontal: theme.spacing.lg,
    borderRadius: theme.borderRadius.medium,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 48,
    ...theme.shadows.primary,
  },

  // Primary button
  primaryButton: {
    backgroundColor: theme.colors.primary,
  },

  // Secondary button
  secondaryButton: {
    backgroundColor: 'white',
    borderWidth: 2,
    borderColor: theme.colors.primary,
  },

  // Button text
  buttonText: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.background,
  },

  // Secondary button text
  secondaryButtonText: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.primary,
  },
});

export default ComingSoonScreen;

/*
 * End of File: ComingSoonScreen.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */