From 53ed8585bafb3642280b381376a1cd3f5bcc8889 Mon Sep 17 00:00:00 2001
From: Gabino Ocotl <Gabinoocotla123@gmail.com>
Date: Wed, 9 Jul 2025 22:11:00 -0500
Subject: [PATCH] Altered the files in frontend to interact with database and
 backend

---
 .../src/components/ApiTestComponent.tsx       | 143 ++++++++
 apps/mobile/src/context/AppContext.tsx        | 304 ++++++++++--------
 apps/mobile/src/screens/HomeScreen.tsx        |   8 +-
 apps/mobile/src/screens/ResultsScreen.tsx     |   2 +-
 apps/mobile/src/services/api.ts               | 188 +++++++++--
 5 files changed, 480 insertions(+), 165 deletions(-)
 create mode 100644 apps/mobile/src/components/ApiTestComponent.tsx

diff --git a/apps/mobile/src/components/ApiTestComponent.tsx b/apps/mobile/src/components/ApiTestComponent.tsx
new file mode 100644
index 0000000..22e4ed4
--- /dev/null
+++ b/apps/mobile/src/components/ApiTestComponent.tsx
@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, Alert } from 'react-native';
+import { Button } from './ui/Button';
+import { Card } from './ui/Card';
+import { apiService } from '../services/api';
+import { colors } from '../constants/Colors';
+import { typography } from '../constants/Typography';
+import { spacing } from '../constants/Layout';
+
+export function ApiTestComponent() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastResult, setLastResult] = useState<string>('');
+
+  const testBasicHealth = async () => {
+    setIsLoading(true);
+    try {
+      const result = await apiService.checkHealth();
+      if (result.success) {
+        setLastResult(`✅ Basic Health: ${result.data?.message}`);
+      } else {
+        setLastResult(`❌ Basic Health Failed: ${result.error}`);
+      }
+    } catch (error) {
+      setLastResult(`❌ Health Check Error: ${error}`);
+    }
+    setIsLoading(false);
+  };
+
+  const testDetailedHealth = async () => {
+    setIsLoading(true);
+    try {
+      const result = await apiService.checkDetailedHealth();
+      if (result.success) {
+        setLastResult(
+          `✅ Detailed Health: ${result.data?.service} v${result.data?.version} - ${result.data?.status}`
+        );
+      } else {
+        setLastResult(`❌ Detailed Health Failed: ${result.error}`);
+      }
+    } catch (error) {
+      setLastResult(`❌ Detailed Health Error: ${error}`);
+    }
+    setIsLoading(false);
+  };
+
+  const showInstructions = () => {
+    Alert.alert(
+      'Backend Integration Test',
+      'This component helps test your backend API connection:\n\n' +
+        '1. Basic Health - Tests /ping endpoint\n' +
+        '2. Detailed Health - Tests /api/health endpoint\n\n' +
+        'Make sure your backend server is running on localhost:4000',
+      [{ text: 'OK' }]
+    );
+  };
+
+  return (
+    <Card variant="outlined" padding="lg" style={styles.container}>
+      <Text style={styles.title}>🔧 API Integration Test</Text>
+      <Text style={styles.subtitle}>Test your backend connectivity</Text>
+
+      <View style={styles.buttonContainer}>
+        <Button
+          title="Test Basic Health"
+          onPress={testBasicHealth}
+          disabled={isLoading}
+          size="small"
+          style={styles.button}
+        />
+        <Button
+          title="Test Detailed Health"
+          onPress={testDetailedHealth}
+          disabled={isLoading}
+          size="small"
+          style={styles.button}
+        />
+        <Button
+          title="Instructions"
+          onPress={showInstructions}
+          variant="ghost"
+          size="small"
+          style={styles.button}
+        />
+      </View>
+
+      {isLoading && <Text style={styles.loading}>Testing connection...</Text>}
+
+      {lastResult && !isLoading && (
+        <View style={styles.resultContainer}>
+          <Text style={styles.resultLabel}>Last Result:</Text>
+          <Text style={styles.resultText}>{lastResult}</Text>
+        </View>
+      )}
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    marginBottom: spacing.sm,
+  },
+  buttonContainer: {
+    marginTop: spacing.md,
+  },
+  container: {
+    borderColor: colors.info,
+    borderWidth: 2,
+    marginVertical: spacing.md,
+  },
+  loading: {
+    ...typography.body,
+    color: colors.info,
+    fontStyle: 'italic',
+    marginTop: spacing.md,
+    textAlign: 'center',
+  },
+  resultContainer: {
+    backgroundColor: colors.surfaceLight,
+    borderRadius: spacing.xs,
+    marginTop: spacing.md,
+    padding: spacing.md,
+  },
+  resultLabel: {
+    ...typography.bodySmall,
+    color: colors.textSecondary,
+    fontWeight: '600',
+    marginBottom: spacing.xs,
+  },
+  resultText: {
+    ...typography.body,
+    color: colors.text,
+    fontFamily: 'monospace',
+  },
+  subtitle: {
+    ...typography.body,
+    color: colors.textSecondary,
+    marginTop: spacing.xs,
+  },
+  title: {
+    ...typography.h3,
+    color: colors.text,
+  },
+});
diff --git a/apps/mobile/src/context/AppContext.tsx b/apps/mobile/src/context/AppContext.tsx
index 804eb35..5671f8a 100644
--- a/apps/mobile/src/context/AppContext.tsx
+++ b/apps/mobile/src/context/AppContext.tsx
@@ -8,73 +8,6 @@ import React, {
 } from 'react';
 import { apiService, CheckinResponse } from '../services/api';
 
-// Mock data for development/demo purposes
-const getMockCheckinData = (): CheckinResponse => {
-  const mockVariations = [
-    {
-      id: `mock_${Date.now()}`,
-      transcript:
-        "I'm feeling really good today. Had a great workout this morning and feeling energized for the day ahead. Looking forward to tackling my projects.",
-      sentiment: {
-        score: 0.85,
-        label: 'Positive',
-        confidence: 0.92,
-      },
-    },
-    {
-      id: `mock_${Date.now()}`,
-      transcript:
-        "It's been a challenging week with lots of deadlines. Feeling a bit overwhelmed but trying to stay focused and take things one step at a time.",
-      sentiment: {
-        score: 0.35,
-        label: 'Stressed',
-        confidence: 0.78,
-      },
-    },
-    {
-      id: `mock_${Date.now()}`,
-      transcript:
-        'Had a regular day at work. Nothing particularly exciting or stressful. Just going through the motions and feeling pretty neutral about everything.',
-      sentiment: {
-        score: 0.55,
-        label: 'Neutral',
-        confidence: 0.65,
-      },
-    },
-  ];
-
-  const variation =
-    mockVariations[Math.floor(Math.random() * mockVariations.length)];
-
-  return {
-    ...variation,
-    coaching: {
-      breathingExercise: {
-        title: 'Deep Breathing Exercise',
-        instructions: [
-          'Inhale slowly through your nose for 4 seconds',
-          'Hold your breath for 7 seconds',
-          'Exhale slowly through your mouth for 8 seconds',
-          'Repeat 3-4 times',
-        ],
-        duration: 5,
-      },
-      stretchExercise: {
-        title: 'Neck and Shoulder Release',
-        instructions: [
-          'Gently roll your shoulders backward 5 times',
-          'Slowly turn your head left and right',
-          'Tilt your head to each shoulder and hold for 10 seconds',
-          'Take deep breaths throughout',
-        ],
-      },
-      resources: [],
-      motivationalMessage:
-        "Remember, it's okay to feel whatever you're feeling. Every emotion is valid, and reaching out for support is a sign of strength.",
-    },
-  };
-};
-
 export interface AppState {
   currentScreen: 'home' | 'recording' | 'results';
   isRecording: boolean;
@@ -84,7 +17,7 @@ export interface AppState {
     timestamp: string | null;
   };
   checkinData: {
-    id: string | null;
+    sessionId: string | null;
     transcript: string | null;
     sentiment: {
       score: number;
@@ -98,6 +31,11 @@ export interface AppState {
     isHealthy: boolean;
     message: string;
     lastChecked: string | null;
+    detailedStatus?: {
+      status: string;
+      service: string;
+      version: string;
+    };
   };
   loading: {
     health: boolean;
@@ -105,6 +43,8 @@ export interface AppState {
     processing: boolean;
   };
   error: string | null;
+  processingTime: number | null;
+  coachingMode: 'fast' | 'optimized';
 }
 
 export type AppAction =
@@ -117,7 +57,15 @@ export type AppAction =
   | { type: 'RESET_RECORDING' }
   | {
       type: 'SET_HEALTH_STATUS';
-      payload: { isHealthy: boolean; message: string };
+      payload: {
+        isHealthy: boolean;
+        message: string;
+        detailedStatus?: {
+          status: string;
+          service: string;
+          version: string;
+        };
+      };
     }
   | {
       type: 'SET_LOADING';
@@ -126,8 +74,15 @@ export type AppAction =
   | { type: 'SET_ERROR'; payload: string | null }
   | { type: 'SET_CHECKIN_DATA'; payload: CheckinResponse }
   | { type: 'START_UPLOAD' }
-  | { type: 'UPLOAD_SUCCESS'; payload: CheckinResponse }
-  | { type: 'UPLOAD_ERROR'; payload: string };
+  | {
+      type: 'UPLOAD_SUCCESS';
+      payload: {
+        data: CheckinResponse;
+        processingTime?: number;
+      };
+    }
+  | { type: 'UPLOAD_ERROR'; payload: string }
+  | { type: 'SET_COACHING_MODE'; payload: 'fast' | 'optimized' };
 
 const initialState: AppState = {
   currentScreen: 'home',
@@ -138,7 +93,7 @@ const initialState: AppState = {
     timestamp: null,
   },
   checkinData: {
-    id: null,
+    sessionId: null,
     transcript: null,
     sentiment: null,
     coaching: null,
@@ -155,6 +110,8 @@ const initialState: AppState = {
     processing: false,
   },
   error: null,
+  processingTime: null,
+  coachingMode: 'fast', // Default to fast mode for demos
 };
 
 function appReducer(state: AppState, action: AppAction): AppState {
@@ -199,13 +156,14 @@ function appReducer(state: AppState, action: AppAction): AppState {
           timestamp: null,
         },
         checkinData: {
-          id: null,
+          sessionId: null,
           transcript: null,
           sentiment: null,
           coaching: null,
           audioUrl: null,
         },
         error: null,
+        processingTime: null,
       };
 
     case 'SET_HEALTH_STATUS':
@@ -215,6 +173,7 @@ function appReducer(state: AppState, action: AppAction): AppState {
           isHealthy: action.payload.isHealthy,
           message: action.payload.message,
           lastChecked: new Date().toISOString(),
+          detailedStatus: action.payload.detailedStatus,
         },
       };
 
@@ -239,6 +198,7 @@ function appReducer(state: AppState, action: AppAction): AppState {
         loading: {
           ...state.loading,
           upload: true,
+          processing: true,
         },
         error: null,
       };
@@ -252,12 +212,13 @@ function appReducer(state: AppState, action: AppAction): AppState {
           processing: false,
         },
         checkinData: {
-          id: action.payload.id,
-          transcript: action.payload.transcript || null,
-          sentiment: action.payload.sentiment || null,
-          coaching: action.payload.coaching || null,
-          audioUrl: action.payload.audioUrl || null,
+          sessionId: action.payload.data.sessionId,
+          transcript: action.payload.data.transcript,
+          sentiment: action.payload.data.sentiment,
+          coaching: action.payload.data.coaching,
+          audioUrl: action.payload.data.audioUrl,
         },
+        processingTime: action.payload.processingTime || null,
         error: null,
       };
 
@@ -276,11 +237,11 @@ function appReducer(state: AppState, action: AppAction): AppState {
       return {
         ...state,
         checkinData: {
-          id: action.payload.id,
-          transcript: action.payload.transcript || null,
-          sentiment: action.payload.sentiment || null,
-          coaching: action.payload.coaching || null,
-          audioUrl: action.payload.audioUrl || null,
+          sessionId: action.payload.sessionId,
+          transcript: action.payload.transcript,
+          sentiment: action.payload.sentiment,
+          coaching: action.payload.coaching,
+          audioUrl: action.payload.audioUrl,
         },
         loading: {
           ...state.loading,
@@ -288,6 +249,12 @@ function appReducer(state: AppState, action: AppAction): AppState {
         },
       };
 
+    case 'SET_COACHING_MODE':
+      return {
+        ...state,
+        coachingMode: action.payload,
+      };
+
     default:
       return state;
   }
@@ -299,7 +266,9 @@ interface AppContextType {
   actions: {
     checkApiHealth: () => Promise<void>;
     uploadRecording: () => Promise<void>;
+    uploadRecordingWithMode: (mode?: 'fast' | 'optimized') => Promise<void>;
     resetApp: () => void;
+    setCoachingMode: (mode: 'fast' | 'optimized') => void;
   };
 }
 
@@ -315,31 +284,44 @@ export function AppProvider({ children }: { children: ReactNode }) {
     });
 
     try {
-      const result = await apiService.checkHealth();
+      // Check basic health first
+      const basicHealthResult = await apiService.checkHealth();
 
-      if (result.success && result.data) {
-        dispatch({
-          type: 'SET_HEALTH_STATUS',
-          payload: {
-            isHealthy: true,
-            message: result.data.message,
-          },
-        });
-      } else {
-        dispatch({
-          type: 'SET_HEALTH_STATUS',
-          payload: {
-            isHealthy: false,
-            message: result.message || 'Health check failed',
-          },
-        });
+      let isHealthy = false;
+      let message = 'Health check failed';
+      let detailedStatus;
+
+      if (basicHealthResult.success && basicHealthResult.data) {
+        isHealthy = true;
+        message = basicHealthResult.data.message || 'API is healthy';
+      }
+
+      // Try to get detailed health info (non-blocking)
+      try {
+        const detailedHealthResult = await apiService.checkDetailedHealth();
+        if (detailedHealthResult.success && detailedHealthResult.data) {
+          detailedStatus = detailedHealthResult.data;
+        }
+      } catch (detailedError) {
+        // Detailed health check failed, but that's okay
+        // eslint-disable-next-line no-console
+        console.log('Detailed health check failed:', detailedError);
       }
+
+      dispatch({
+        type: 'SET_HEALTH_STATUS',
+        payload: {
+          isHealthy,
+          message,
+          detailedStatus,
+        },
+      });
     } catch (error) {
       dispatch({
         type: 'SET_HEALTH_STATUS',
         payload: {
           isHealthy: false,
-          message: 'Connection failed',
+          message: 'Connection failed - backend may be offline',
         },
       });
     } finally {
@@ -359,44 +341,104 @@ export function AppProvider({ children }: { children: ReactNode }) {
     dispatch({ type: 'START_UPLOAD' });
 
     try {
-      const result = await apiService.submitCheckin(
-        state.recordingData.uri,
-        state.recordingData.duration
-      );
+      const result = await apiService.submitCheckin(state.recordingData.uri);
 
       if (result.success && result.data) {
-        dispatch({ type: 'UPLOAD_SUCCESS', payload: result.data });
+        // Extract processing time from success message
+        const processingTimeMatch = result.message?.match(/(\d+)ms/);
+        const processingTime = processingTimeMatch
+          ? parseInt(processingTimeMatch[1])
+          : undefined;
 
-        // Always navigate to results after successful upload
-        dispatch({ type: 'NAVIGATE_TO', payload: 'results' });
-
-        // If we don't have complete data, set processing loading state
-        if (
-          !result.data.transcript ||
-          !result.data.sentiment ||
-          !result.data.coaching
-        ) {
-          dispatch({
-            type: 'SET_LOADING',
-            payload: { type: 'processing', loading: true },
-          });
-          // TODO: Implement polling for processing status
-        }
-      } else {
-        // For development/demo: provide mock data when API fails
         dispatch({
           type: 'UPLOAD_SUCCESS',
-          payload: getMockCheckinData(),
+          payload: {
+            data: result.data,
+            processingTime,
+          },
         });
+
+        // Navigate to results after successful upload
         dispatch({ type: 'NAVIGATE_TO', payload: 'results' });
+      } else {
+        // Handle API errors with detailed error information
+        const errorMessage = result.error || 'Upload failed';
+        const details = result.code ? ` (${result.code})` : '';
+        dispatch({
+          type: 'UPLOAD_ERROR',
+          payload: `${errorMessage}${details}`,
+        });
       }
     } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Upload recording error:', error);
       dispatch({
         type: 'UPLOAD_ERROR',
-        payload: 'Failed to upload recording. Please try again.',
+        payload: 'Network error. Please check your connection and try again.',
       });
     }
-  }, [state.recordingData.uri, state.recordingData.duration]);
+  }, [state.recordingData.uri]);
+
+  const uploadRecordingWithMode = useCallback(
+    async (mode?: 'fast' | 'optimized') => {
+      if (!state.recordingData.uri) {
+        dispatch({
+          type: 'SET_ERROR',
+          payload: 'No recording found to upload',
+        });
+        return;
+      }
+
+      const selectedMode = mode || state.coachingMode;
+      dispatch({ type: 'START_UPLOAD' });
+
+      try {
+        const result = await apiService.submitCheckinWithMode(
+          state.recordingData.uri,
+          selectedMode
+        );
+
+        if (result.success && result.data) {
+          // Extract processing time from success message
+          const processingTimeMatch = result.message?.match(/(\d+)ms/);
+          const processingTime = processingTimeMatch
+            ? parseInt(processingTimeMatch[1])
+            : undefined;
+
+          dispatch({
+            type: 'UPLOAD_SUCCESS',
+            payload: {
+              data: result.data,
+              processingTime,
+            },
+          });
+
+          // Navigate to results after successful upload
+          dispatch({ type: 'NAVIGATE_TO', payload: 'results' });
+        } else {
+          // Handle API errors with detailed error information
+          const errorMessage = result.error || 'Upload failed';
+          const details = result.code ? ` (${result.code})` : '';
+          dispatch({
+            type: 'UPLOAD_ERROR',
+            payload: `${errorMessage}${details}`,
+          });
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Upload recording with mode error:', error);
+        dispatch({
+          type: 'UPLOAD_ERROR',
+          payload: 'Network error. Please check your connection and try again.',
+        });
+      }
+    },
+    [state.recordingData.uri, state.coachingMode]
+  );
+
+  const setCoachingMode = useCallback((mode: 'fast' | 'optimized') => {
+    dispatch({ type: 'SET_COACHING_MODE', payload: mode });
+  }, []);
 
   const resetApp = useCallback(() => {
     dispatch({ type: 'RESET_RECORDING' });
@@ -407,9 +449,17 @@ export function AppProvider({ children }: { children: ReactNode }) {
     () => ({
       checkApiHealth,
       uploadRecording,
+      uploadRecordingWithMode,
       resetApp,
+      setCoachingMode,
     }),
-    [checkApiHealth, uploadRecording, resetApp]
+    [
+      checkApiHealth,
+      uploadRecording,
+      uploadRecordingWithMode,
+      resetApp,
+      setCoachingMode,
+    ]
   );
 
   return (
diff --git a/apps/mobile/src/screens/HomeScreen.tsx b/apps/mobile/src/screens/HomeScreen.tsx
index 7ddfcd5..843ec9f 100644
--- a/apps/mobile/src/screens/HomeScreen.tsx
+++ b/apps/mobile/src/screens/HomeScreen.tsx
@@ -14,6 +14,7 @@ import { typography } from '../constants/Typography';
 import { spacing } from '../constants/Layout';
 import { Button } from '../components/ui/Button';
 import { Card } from '../components/ui/Card';
+import { ApiTestComponent } from '../components/ApiTestComponent';
 import { useAppContext } from '../context/AppContext';
 
 export function HomeScreen() {
@@ -116,6 +117,9 @@ export function HomeScreen() {
             )}
           </Card>
 
+          {/* API Testing Component - For development/testing */}
+          <ApiTestComponent />
+
           {/* Start Recording Button */}
           <Button
             title="🎤 Start Mental Check-in"
@@ -141,7 +145,7 @@ export function HomeScreen() {
               disabled={!state.apiHealth.isHealthy}
             />
 
-            {state.checkinData.id && (
+            {state.checkinData.sessionId && (
               <Button
                 title="📊 View Results"
                 onPress={viewResults}
@@ -153,7 +157,7 @@ export function HomeScreen() {
           </View>
 
           {/* Recent Activity */}
-          {state.checkinData.id && (
+          {state.checkinData.sessionId && (
             <Card variant="elevated" padding="lg" style={styles.recentCard}>
               <Text style={styles.recentTitle}>Recent Check-in</Text>
               <View style={styles.recentContent}>
diff --git a/apps/mobile/src/screens/ResultsScreen.tsx b/apps/mobile/src/screens/ResultsScreen.tsx
index 3de6f9a..7ff4a8b 100644
--- a/apps/mobile/src/screens/ResultsScreen.tsx
+++ b/apps/mobile/src/screens/ResultsScreen.tsx
@@ -196,7 +196,7 @@ export function ResultsScreen() {
   // Get data from context
   const { checkinData, recordingData } = state;
   const hasData =
-    checkinData.id &&
+    checkinData.sessionId &&
     (checkinData.transcript || checkinData.sentiment || checkinData.coaching);
 
   if (!hasData) {
diff --git a/apps/mobile/src/services/api.ts b/apps/mobile/src/services/api.ts
index e31fa4d..846e67d 100644
--- a/apps/mobile/src/services/api.ts
+++ b/apps/mobile/src/services/api.ts
@@ -1,37 +1,47 @@
 // API Configuration
-const API_BASE_URL = 'http://localhost:4000';
+// React Native apps cannot connect to 'localhost' - they need the computer's IP address
+// For Android emulator: use 10.0.2.2:4000
+// For iOS simulator/device: use your computer's IP address
+const API_BASE_URL = 'http://10.141.39.175:4000';
 
 export interface ApiResponse<T = unknown> {
   success: boolean;
   data?: T;
   message?: string;
   error?: string;
+  code?: string;
+  details?: unknown;
+  timestamp?: string;
 }
 
+// Backend health check response
 export interface HealthResponse {
   pong: boolean;
   message: string;
+  timestamp: string;
 }
 
-export interface CheckinRequest {
-  audioFile: string; // URI path to audio file
-  duration: number;
+export interface DetailedHealthResponse {
+  status: string;
+  service: string;
+  version: string;
   timestamp: string;
 }
 
+// Backend checkin response schema (matches server documentation)
 export interface CheckinResponse {
-  id: string;
-  transcript?: string;
-  sentiment?: {
-    score: number;
-    label: string;
-    confidence: number;
+  sessionId: string;
+  transcript: string;
+  sentiment: {
+    score: number; // 0-1, lower = negative
+    label: 'positive' | 'negative' | 'neutral';
+    confidence: number; // 0-1
   };
-  coaching?: {
+  coaching: {
     breathingExercise: {
       title: string;
       instructions: string[];
-      duration: number;
+      duration: number; // Duration in seconds
     };
     stretchExercise: {
       title: string;
@@ -42,11 +52,29 @@ export interface CheckinResponse {
       title: string;
       description: string;
       url: string;
-      type: 'phone' | 'website' | 'email';
+      category: 'counseling' | 'meditation' | 'emergency';
     }>;
     motivationalMessage: string;
   };
-  audioUrl?: string;
+  audioUrl: string; // URL to generated coaching audio (mp3)
+}
+
+// Backend complete response wrapper
+export interface BackendResponse<T = CheckinResponse> {
+  success: boolean;
+  data: T;
+  processingTime: number; // Total processing time in ms
+  error?: string;
+  code?: string;
+  details?: unknown;
+  timestamp?: string;
+}
+
+// React Native file upload type
+interface ReactNativeFile {
+  uri: string;
+  type: string;
+  name: string;
 }
 
 class ApiService {
@@ -64,11 +92,20 @@ class ApiService {
         ...options,
       });
 
+      const data = await response.json();
+
       if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        // Handle backend error responses
+        return {
+          success: false,
+          error:
+            data.error || `HTTP ${response.status}: ${response.statusText}`,
+          code: data.code || 'HTTP_ERROR',
+          details: data.details,
+          timestamp: data.timestamp,
+        };
       }
 
-      const data = await response.json();
       return {
         success: true,
         data,
@@ -82,48 +119,71 @@ class ApiService {
     }
   }
 
+  // Basic health check - /ping endpoint
   async checkHealth(): Promise<ApiResponse<HealthResponse>> {
     return this.makeRequest<HealthResponse>('/ping');
   }
 
-  async submitCheckin(
-    audioUri: string,
-    duration: number
-  ): Promise<ApiResponse<CheckinResponse>> {
+  // Detailed health check - /api/health endpoint
+  async checkDetailedHealth(): Promise<ApiResponse<DetailedHealthResponse>> {
+    return this.makeRequest<DetailedHealthResponse>('/api/health');
+  }
+
+  // Main audio upload endpoint
+  async submitCheckin(audioUri: string): Promise<ApiResponse<CheckinResponse>> {
     try {
       // Create FormData for file upload
       const formData = new FormData();
 
-      // Create file object from URI
-      const audioFile = {
+      // Detect audio format from URI
+      const audioFormat = audioUri.toLowerCase().includes('.wav')
+        ? 'audio/wav'
+        : audioUri.toLowerCase().includes('.m4a')
+          ? 'audio/m4a'
+          : 'audio/mp3';
+
+      // Create file object from URI (React Native compatible)
+      const audioFile: ReactNativeFile = {
         uri: audioUri,
-        type: 'audio/mp3',
-        name: `checkin_${Date.now()}.mp3`,
-      } as unknown;
+        type: audioFormat,
+        name: `recording.${audioFormat.split('/')[1]}`,
+      };
 
-      formData.append('audio', audioFile as Blob);
-      formData.append('duration', duration.toString());
-      formData.append('timestamp', new Date().toISOString());
+      formData.append('audio', audioFile as unknown as Blob);
 
       const url = `${API_BASE_URL}/api/checkin`;
       const response = await fetch(url, {
         method: 'POST',
         headers: {
-          'Content-Type': 'multipart/form-data',
+          // Don't set Content-Type for multipart/form-data - let browser set it with boundary
+          Accept: 'application/json',
         },
         body: formData,
       });
 
+      const data = (await response.json()) as BackendResponse<CheckinResponse>;
+
       if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        // Handle backend-specific error responses
+        return {
+          success: false,
+          error:
+            data.error || `HTTP ${response.status}: ${response.statusText}`,
+          code: data.code || 'HTTP_ERROR',
+          details: data.details,
+          timestamp: data.timestamp,
+        };
       }
 
-      const data = await response.json();
+      // Return the data portion of the backend response
       return {
-        success: true,
-        data,
+        success: data.success,
+        data: data.data,
+        message: `Processing completed in ${data.processingTime}ms`,
       };
     } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Audio upload error:', error);
       return {
         success: false,
         error: error instanceof Error ? error.message : 'Unknown error',
@@ -133,8 +193,66 @@ class ApiService {
     }
   }
 
-  async getCheckinStatus(id: string): Promise<ApiResponse<CheckinResponse>> {
-    return this.makeRequest<CheckinResponse>(`/api/checkin/${id}`);
+  // Test endpoint with coaching mode selection
+  async submitCheckinWithMode(
+    audioUri: string,
+    mode: 'fast' | 'optimized' = 'fast'
+  ): Promise<ApiResponse<CheckinResponse>> {
+    try {
+      const formData = new FormData();
+
+      const audioFormat = audioUri.toLowerCase().includes('.wav')
+        ? 'audio/wav'
+        : audioUri.toLowerCase().includes('.m4a')
+          ? 'audio/m4a'
+          : 'audio/mp3';
+
+      const audioFile: ReactNativeFile = {
+        uri: audioUri,
+        type: audioFormat,
+        name: `recording.${audioFormat.split('/')[1]}`,
+      };
+
+      formData.append('audio', audioFile as unknown as Blob);
+
+      const url = `${API_BASE_URL}/api/checkin?mode=${mode}`;
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'X-Coaching-Mode': mode, // Alternative header method
+        },
+        body: formData,
+      });
+
+      const data = (await response.json()) as BackendResponse<CheckinResponse>;
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error:
+            data.error || `HTTP ${response.status}: ${response.statusText}`,
+          code: data.code || 'HTTP_ERROR',
+          details: data.details,
+          timestamp: data.timestamp,
+        };
+      }
+
+      return {
+        success: data.success,
+        data: data.data,
+        message: `${mode} mode processing completed in ${data.processingTime}ms`,
+      };
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Audio upload error:', error);
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+        message:
+          'Failed to upload audio. Please check your connection and try again.',
+      };
+    }
   }
 }