/*
 * File: AppInfoScreen.tsx
 * Description: App information screen displaying version, build, and app details
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
  Linking,
  TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import { theme } from '../../../theme/theme';
import { SettingsHeader } from '../components/SettingsHeader';
import { CustomModal } from '../../../shared/components';

/**
 * AppInfoScreenProps Interface
 * 
 * Purpose: Defines the props required by the AppInfoScreen component
 * 
 * Props:
 * - navigation: React Navigation object for screen navigation
 */
interface AppInfoScreenProps {
  navigation: any;
}

/**
 * AppInfoScreen Component
 * 
 * Purpose: Display comprehensive app information including version, build details,
 * and links to legal documents and support resources
 * 
 * Features:
 * 1. App logo and basic information
 * 2. Version and build details
 * 3. Legal and privacy information
 * 4. Support and contact links
 * 5. App description and features
 */
export const AppInfoScreen: React.FC<AppInfoScreenProps> = ({
  navigation,
}) => {
  // ============================================================================
  // APP INFORMATION DATA
  // ============================================================================
  
  // App version and build information
  const appInfo = {
    name: 'NeoScan Radiologist',
    version: '1.0.0',
    buildNumber: '2025.08.001',
    releaseDate: 'August 2025',
    developer: 'Tech4Biz Solutions',
    copyright: '© 2024 Spurrin Innovations. All rights reserved.',
  };

  // App features and description
  const appDescription = {
    title: 'Emergency Radiology Physician App',
    description: 'Advanced medical imaging and patient management platform designed specifically for emergency room physicians. Provides real-time access to critical patient scans, AI-powered diagnostic assistance, and streamlined clinical workflows.',
    features: [
      'Real-time patient monitoring',
      'AI-powered diagnostic assistance',
      'Emergency alert system',
      'Secure patient data management',
      'Mobile-optimized interface',
      'Hospital system integration',
    ],
  };

  // Legal and support information
  const legalInfo = {
    privacyPolicy: 'https://neoscan.com/privacy',
    termsOfService: 'https://neoscan.com/terms',
    supportEmail: 'support@neoscan.com',
    supportPhone: '+1-800-NEOSCAN',
    website: 'https://neoscan.com',
  };

  // ============================================================================
  // EVENT HANDLERS
  // ============================================================================

  /**
   * handleExternalLink Function
   * 
   * Purpose: Handle opening external links in browser
   * 
   * @param url - URL to open
   */
  const handleExternalLink = async (url: string) => {
    try {
      const supported = await Linking.canOpenURL(url);
      if (supported) {
        await Linking.openURL(url);
      } else {
        console.log("Can't open URL:", url);
      }
    } catch (error) {
      console.error('Error opening URL:', error);
    }
  };

  /**
   * handleEmailSupport Function
   * 
   * Purpose: Handle opening email client for support
   */
  const handleEmailSupport = () => {
    const emailUrl = `mailto:${legalInfo.supportEmail}?subject=NeoScan Physician App Support`;
    handleExternalLink(emailUrl);
  };

  /**
   * handlePhoneSupport Function
   * 
   * Purpose: Handle opening phone dialer for support
   */
  const handlePhoneSupport = () => {
    const phoneUrl = `tel:${legalInfo.supportPhone}`;
    handleExternalLink(phoneUrl);
  };

  // ============================================================================
  // MAIN RENDER
  // ============================================================================

  return (
    <View style={styles.container}>
      {/* App info header with back button */}
      <SettingsHeader 
        title="App Information" 
        showBackButton={true}
        onBackPress={() => navigation.goBack()}
      />
      
      {/* Scrollable app information content */}
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* App logo and basic info section */}
        <View style={styles.appHeaderSection}>
          <View style={styles.appLogoContainer}>
            <View style={styles.appLogo}>
              <Text style={styles.appLogoText}>NS</Text>
            </View>
          </View>
          
          <Text style={styles.appName}>{appInfo.name}</Text>
          <Text style={styles.appVersion}>Version {appInfo.version}</Text>
          <Text style={styles.appBuild}>Build {appInfo.buildNumber}</Text>
          <Text style={styles.appReleaseDate}>{appInfo.releaseDate}</Text>
        </View>

        {/* App description section */}
        <View style={styles.infoSection}>
          <Text style={styles.sectionTitle}>{appDescription.title}</Text>
          <Text style={styles.appDescription}>{appDescription.description}</Text>
          
          <Text style={styles.featuresTitle}>Key Features:</Text>
          {appDescription.features.map((feature, index) => (
            <View key={index} style={styles.featureItem}>
              <View style={styles.featureBullet} />
              <Text style={styles.featureText}>{feature}</Text>
            </View>
          ))}
        </View>

        {/* Version and build details section */}
        <View style={styles.infoSection}>
          <Text style={styles.sectionTitle}>Technical Information</Text>
          
          <View style={styles.infoRow}>
            <Text style={styles.infoLabel}>App Version:</Text>
            <Text style={styles.infoValue}>{appInfo.version}</Text>
          </View>
          
          <View style={styles.infoRow}>
            <Text style={styles.infoLabel}>Build Number:</Text>
            <Text style={styles.infoValue}>{appInfo.buildNumber}</Text>
          </View>
          
          <View style={styles.infoRow}>
            <Text style={styles.infoLabel}>Release Date:</Text>
            <Text style={styles.infoValue}>{appInfo.releaseDate}</Text>
          </View>
          
          <View style={styles.infoRow}>
            <Text style={styles.infoLabel}>Developer:</Text>
            <Text style={styles.infoValue}>{appInfo.developer}</Text>
          </View>
        </View>

        {/* Support and contact section */}
        <View style={styles.infoSection}>
          <Text style={styles.sectionTitle}>Support & Contact</Text>
          
          <TouchableOpacity 
            style={styles.contactItem}
            onPress={handleEmailSupport}
            activeOpacity={0.7}
          >
            <Text style={styles.contactLabel}>Email Support:</Text>
            <Text style={styles.contactValue}>{legalInfo.supportEmail}</Text>
          </TouchableOpacity>
          
          <TouchableOpacity 
            style={styles.contactItem}
            onPress={handlePhoneSupport}
            activeOpacity={0.7}
          >
            <Text style={styles.contactLabel}>Phone Support:</Text>
            <Text style={styles.contactValue}>{legalInfo.supportPhone}</Text>
          </TouchableOpacity>
          
          <TouchableOpacity 
            style={styles.contactItem}
            onPress={() => handleExternalLink(legalInfo.website)}
            activeOpacity={0.7}
          >
            <Text style={styles.contactLabel}>Website:</Text>
            <Text style={styles.contactValue}>{legalInfo.website}</Text>
          </TouchableOpacity>
        </View>

        {/* Legal information section */}
        <View style={styles.infoSection}>
          <Text style={styles.sectionTitle}>Legal Information</Text>
          
          <TouchableOpacity 
            style={styles.legalItem}
            onPress={() => handleExternalLink(legalInfo.privacyPolicy)}
            activeOpacity={0.7}
          >
            <Text style={styles.legalText}>Privacy Policy</Text>
            <Icon name="chevron-right" size={20} color={theme.colors.primary} />
          </TouchableOpacity>
          
          <TouchableOpacity 
            style={styles.legalItem}
            onPress={() => handleExternalLink(legalInfo.termsOfService)}
            activeOpacity={0.7}
          >
            <Text style={styles.legalText}>Terms of Service</Text>
            <Icon name="chevron-right" size={20} color={theme.colors.primary} />
          </TouchableOpacity>
        </View>

        {/* Copyright section */}
        <View style={styles.copyrightSection}>
          <Text style={styles.copyrightText}>{appInfo.copyright}</Text>
        </View>

        {/* Bottom spacing for tab bar */}
        <View style={styles.bottomSpacing} />
      </ScrollView>
    </View>
  );
};

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

const styles = StyleSheet.create({
  // Main container for the app info screen
  container: {
    flex: 1,
    backgroundColor: theme.colors.background,
  },
  
  // Scroll view styling
  scrollView: {
    flex: 1,
  },
  
  // Scroll content styling
  scrollContent: {
    paddingHorizontal: theme.spacing.md,
  },
  
  // Bottom spacing for tab bar
  bottomSpacing: {
    height: theme.spacing.xl,
  },

  // App header section with logo and basic info
  appHeaderSection: {
    alignItems: 'center',
    paddingVertical: theme.spacing.xl,
    marginBottom: theme.spacing.md,
  },

  appLogoContainer: {
    marginBottom: theme.spacing.md,
  },

  appLogo: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: theme.colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
    ...theme.shadows.medium,
  },

  appLogoText: {
    color: theme.colors.background,
    fontSize: 32,
    fontFamily: theme.typography.fontFamily.bold,
  },

  appName: {
    fontSize: theme.typography.fontSize.displayMedium,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.xs,
    textAlign: 'center',
  },

  appVersion: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.primary,
    marginBottom: theme.spacing.xs,
  },

  appBuild: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textSecondary,
    marginBottom: theme.spacing.xs,
  },

  appReleaseDate: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textSecondary,
  },

  // Information sections
  infoSection: {
    backgroundColor: theme.colors.background,
    borderRadius: theme.borderRadius.medium,
    padding: theme.spacing.md,
    marginBottom: theme.spacing.md,
    ...theme.shadows.primary,
  },

  sectionTitle: {
    fontSize: theme.typography.fontSize.displaySmall,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.md,
  },

  appDescription: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textSecondary,
    lineHeight: 22,
    marginBottom: theme.spacing.md,
  },

  featuresTitle: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.sm,
  },

  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: theme.spacing.xs,
  },

  featureBullet: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: theme.colors.primary,
    marginRight: theme.spacing.sm,
  },

  featureText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textSecondary,
    flex: 1,
  },

  // Information rows
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: theme.spacing.xs,
    borderBottomColor: theme.colors.border,
    borderBottomWidth: 1,
  },

  infoLabel: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textPrimary,
  },

  infoValue: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textSecondary,
  },

  // Contact items
  contactItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: theme.spacing.sm,
    borderBottomColor: theme.colors.border,
    borderBottomWidth: 1,
  },

  contactLabel: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textPrimary,
  },

  contactValue: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.primary,
  },

  // Legal items
  legalItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: theme.spacing.sm,
    borderBottomColor: theme.colors.border,
    borderBottomWidth: 1,
  },

  legalText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.primary,
  },

  // Copyright section
  copyrightSection: {
    alignItems: 'center',
    paddingVertical: theme.spacing.lg,
    marginBottom: theme.spacing.md,
  },

  copyrightText: {
    fontSize: theme.typography.fontSize.bodySmall,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textMuted,
    textAlign: 'center',
    lineHeight: 18,
  },


});

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