NeoScan_Radiologist/app/modules/AIPrediction/navigation/AIPredictionStackNavigator.tsx

/*
 * File: AIPredictionStackNavigator.tsx
 * Description: Stack navigator for AI Prediction module screens
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import { theme } from '../../../theme';

// Import screens
import { AIPredictionsScreen, AIPredictionDetailScreen } from '../screens';
import { ComingSoonScreen, DicomViewer } from '../../../shared/components';

// Import types
import type { AIPredictionStackParamList } from './navigationTypes';

// ============================================================================
// STACK NAVIGATOR SETUP
// ============================================================================

const Stack = createStackNavigator<AIPredictionStackParamList>();

// ============================================================================
// HEADER COMPONENTS
// ============================================================================

/**
 * Header Back Button
 * 
 * Purpose: Custom back button for navigation header
 */
const HeaderBackButton: React.FC<{ onPress: () => void }> = ({ onPress }) => (
  <TouchableOpacity style={styles.headerButton} onPress={onPress}>
    <Icon name="arrow-left" size={24} color={theme.colors.textPrimary} />
  </TouchableOpacity>
);

/**
 * Header Action Button
 * 
 * Purpose: Custom action button for navigation header
 */
const HeaderActionButton: React.FC<{
  iconName: string;
  onPress: () => void;
  accessibilityLabel?: string;
}> = ({ iconName, onPress, accessibilityLabel }) => (
  <TouchableOpacity 
    style={styles.headerButton} 
    onPress={onPress}
    accessibilityRole="button"
    accessibilityLabel={accessibilityLabel}
  >
    <Icon name={iconName} size={24} color={theme.colors.textPrimary} />
  </TouchableOpacity>
);

// ============================================================================
// SCREEN OPTIONS
// ============================================================================

/**
 * Default Screen Options
 * 
 * Purpose: Common screen options for all AI prediction screens
 */
const defaultScreenOptions = {
  headerStyle: {
    backgroundColor: theme.colors.background,
    elevation: 2,
    shadowOpacity: 0.1,
    shadowRadius: 4,
    shadowOffset: { width: 0, height: 2 },
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border,
  },
  headerTitleStyle: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontWeight: theme.typography.fontWeight.bold,
    color: theme.colors.textPrimary,
  },
  headerTintColor: theme.colors.textPrimary,
  headerBackTitleVisible: false,
  gestureEnabled: true,
  cardStyleInterpolator: ({ current, layouts }: any) => {
    return {
      cardStyle: {
        transform: [
          {
            translateX: current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [layouts.screen.width, 0],
            }),
          },
        ],
      },
    };
  },
};

// ============================================================================
// AI PREDICTION STACK NAVIGATOR COMPONENT
// ============================================================================

/**
 * AIPredictionStackNavigator Component
 * 
 * Purpose: Stack navigator for AI prediction module
 * 
 * Features:
 * - AI Prediction List screen (main screen)
 * - AI Prediction Details screen (case details)
 * - AI Prediction Filters screen (advanced filtering)
 * - AI Prediction Stats screen (detailed statistics)
 * - Custom header styling and buttons
 * - Smooth navigation transitions
 * - Accessibility support
 * - Coming soon screens for unimplemented features
 */
const AIPredictionStackNavigator: React.FC = () => {
  return (
    <Stack.Navigator
      initialRouteName="AIPredictionList"
      screenOptions={defaultScreenOptions}
    >
      {/* AI Prediction List Screen */}
      <Stack.Screen
        name="AIPredictionList"
        component={AIPredictionsScreen}
        options={({ navigation }) => ({
          title: 'AI Predictions',
          headerLeft: () => null, // No back button on main screen
          headerRight: () => (
            <HeaderActionButton
              iconName="more-vertical"
              onPress={() => {
                // Open options menu
                // For now, just navigate to stats
                // @ts-ignore
                navigation.navigate('AIPredictionStats');
              }}
              accessibilityLabel="More options"
            />
          ),
        })}
      />

      {/* AI Prediction Details Screen */}
      <Stack.Screen
        name="AIPredictionDetails"
        component={() => <DicomViewer 
          dicomUrl={'https://ohif-dicom-json-example.s3.amazonaws.com/LIDC-IDRI-0001/01-01-2000-30178/3000566.000000-03192/1-001.dcm'} 
          debugMode={true}
          onError={(error) => console.log('DICOM Error:', error)}
          onLoad={() => console.log('DICOM Viewer loaded successfully')}
        />}
        options={({ navigation, route }) => ({
          title: 'Create Suggestion',
          headerLeft: () => (
            <HeaderBackButton onPress={() => navigation.goBack()} />
          ),
          headerRight: () => (
            <HeaderActionButton
              iconName="help-circle"
              onPress={() => {
                // Show help for suggestion form
                console.log('Show help for case:', route.params?.caseId);
              }}
              accessibilityLabel="Help"
            />
          ),
        })}
      />

      {/* AI Prediction Filters Screen */}
      <Stack.Screen
        name="AIPredictionFilters"
        component={ComingSoonScreen}
        options={({ navigation }) => ({
          title: 'Advanced Filters',
          headerLeft: () => (
            <HeaderBackButton onPress={() => navigation.goBack()} />
          ),
          headerRight: () => (
            <HeaderActionButton
              iconName="refresh-cw"
              onPress={() => {
                // Reset filters
                console.log('Reset filters');
              }}
              accessibilityLabel="Reset filters"
            />
          ),
        })}
      />

      {/* AI Prediction Stats Screen */}
      <Stack.Screen
        name="AIPredictionStats"
        component={ComingSoonScreen}
        options={({ navigation, route }) => ({
          title: 'Statistics',
          headerLeft: () => (
            <HeaderBackButton onPress={() => navigation.goBack()} />
          ),
          headerRight: () => (
            <HeaderActionButton
              iconName="download"
              onPress={() => {
                // Export statistics
                console.log('Export stats:', route.params?.timeRange);
              }}
              accessibilityLabel="Export statistics"
            />
          ),
        })}
      />
    </Stack.Navigator>
  );
};

// ============================================================================
// STYLES
// ============================================================================

const styles = StyleSheet.create({
  headerButton: {
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    marginHorizontal: theme.spacing.xs,
  },
  headerButtonText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    color: theme.colors.primary,
    fontWeight: theme.typography.fontWeight.medium,
  },
});

export default AIPredictionStackNavigator;

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