import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import {
  GoogleNavProvider,
  GoogleNavView,
  TravelMode,
  type GoogleNavViewRef,
} from 'react-native-google-nav';

export default function NavigationScreen() {
  const navRef = useRef<GoogleNavViewRef>(null);

  const startNavigation = () => {
    navRef.current?.setDestinations(
      [
        {
          position: { latitude: -1.2921, longitude: 36.8219 },
          title: 'Nairobi CBD',
        },
        {
          position: { latitude: -1.2864, longitude: 36.8172 },
          title: 'University of Nairobi',
        },
      ],
      { travelMode: TravelMode.DRIVING }
    );
  };

  return (
    <GoogleNavProvider apiKey="YOUR_API_KEY">
      <View style={{ flex: 1 }}>
        <GoogleNavView
          ref={navRef}
          style={{ flex: 1 }}
          navigationUIEnabled
          headerEnabled
          tripProgressBarEnabled
          speedometerEnabled
          onNavigationReady={() => console.log('Navigation SDK ready')}
          onRouteReady={(e) =>
            console.log(`Route: ${e.totalDistanceMeters}m, ${e.totalTimeSeconds}s`)
          }
          onArrival={(e) =>
            console.log(`Arrived at stop #${e.waypointIndex}: ${e.waypointTitle}`)
          }
        />
        <Button title="Start Navigation" onPress={startNavigation} />
        <Button
          title="Start Simulation"
          onPress={() => navRef.current?.startSimulation()}
        />
      </View>
    </GoogleNavProvider>
  );
}

<GoogleNavProvider apiKey="YOUR_API_KEY">
  {children}
</GoogleNavProvider>

import { useGoogleNav } from 'react-native-google-nav';

function MyComponent() {
  const { isInitialized, termsAccepted, navigationState } = useGoogleNav();
  // ...
}

import { useOTPVerification } from 'react-native-google-nav';

function OTPScreen({ waypointIndex, orderId }) {
  const otp = useOTPVerification({
    waypointIndex,
    waypointTitle: 'Stop 1',
    expirySeconds: 300,
    maxAttempts: 3,
    callbacks: {
      onGenerate: async (wpIndex, code, expiresAt) => {
        // Send OTP to your backend → backend pushes to customer
        await api.sendOTP({ orderId, code, expiresAt });
      },
      onVerify: async (wpIndex, code) => {
        // Validate OTP with your backend
        const result = await api.verifyOTP({ orderId, code });
        return result.valid;
      },
    },
  });

  return (
    <View>
      {otp.status === 'idle' && (
        <Button onPress={otp.generate} title="Generate OTP" />
      )}
      {otp.status === 'sent' && (
        <>
          <Text>Time remaining: {otp.remainingSeconds}s</Text>
          <TextInput
            value={otp.enteredCode}
            onChangeText={otp.setEnteredCode}
            maxLength={6}
            keyboardType="number-pad"
          />
          <Button onPress={otp.verify} title="Verify" />
        </>
      )}
      {otp.status === 'verified' && <Text>Delivery confirmed!</Text>}
      {otp.status === 'failed' && <Text>Verification failed</Text>}
    </View>
  );
}

import { useBackgroundLocation } from 'react-native-google-nav';

function TrackingComponent() {
  useBackgroundLocation(
    {
      intervalMs: 30000,
      notificationTitle: 'Delivery Active',
      notificationText: 'Tracking your delivery route',
    },
    (location) => {
      console.log(`Background: ${location.latitude}, ${location.longitude}`);
      // Send to your backend
    }
  );
}

import { optimizeWaypointOrder, TravelMode } from 'react-native-google-nav';

const result = await optimizeWaypointOrder({
  apiKey: 'YOUR_API_KEY',
  origin: { latitude: -1.28, longitude: 36.82 },
  waypoints: [
    { position: { latitude: -1.30, longitude: 36.80 }, title: 'Stop A' },
    { position: { latitude: -1.29, longitude: 36.85 }, title: 'Stop B' },
    { position: { latitude: -1.31, longitude: 36.83 }, title: 'Stop C' },
  ],
  travelMode: TravelMode.DRIVING,
});

// result.waypoints — reordered waypoints
// result.optimizedOrder — original indices in optimized order
// result.totalDistanceMeters
// result.totalDurationSeconds

navRef.current?.setDestinations(result.waypoints, {
  travelMode: TravelMode.DRIVING,
});

<GoogleNavView
  theme={{
    headerBackgroundColor: '#1a73e8',
    headerSecondaryBackgroundColor: '#1565c0',
    headerTextColor: '#ffffff',
    headerManeuverIconColor: '#ffffff',
    routeColor: '#4285f4',
    routeTraveledColor: '#aaaaaa',
    trafficColorNormal: '#4caf50',
    trafficColorSlow: '#ff9800',
    trafficColorTrafficJam: '#f44336',
  }}
/>

import { DefaultNavigationTheme, DarkNavigationTheme } from 'react-native-google-nav';

<GoogleNavView theme={DarkNavigationTheme} />

// Start simulated driving along the route
navRef.current?.startSimulation();

// Stop simulation (e.g., at a delivery stop for OTP verification)
navRef.current?.stopSimulation();

// Resume after OTP — rebuilds route with remaining waypoints
navRef.current?.startSimulation();