/*
 * 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,
} from 'react-native';

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: '© 2025 Spurrin Innovations. All rights reserved.',
  };

  // App features and description
  const appDescription = {
    title: 'AI-Powered Medical Imaging Radiologist App',
    description: 'Comprehensive medical imaging and patient management platform designed specifically for radiologists. Provides access to AI-powered diagnostic predictions, DICOM image viewing with Cornerstone.js integration, and streamlined clinical workflows for reviewing radiologist feedback.',
    features: [
      'AI-powered diagnostic predictions with confidence scores',
      'DICOM image viewer with Cornerstone.js integration',
      'Radiologist feedback review system',
      'Patient case management and tracking',
      'Hospital integration and user management',
      'Mobile-optimized interface for clinical use',
    ],
  };



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





  // ============================================================================
  // 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>



        {/* 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,
  },





  // 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.
 */