/**
 * Adaptive camera component that uses expo-camera in Expo Go
 * and react-native-vision-camera in production builds.
 */

import React, { forwardRef, lazy, Suspense } from "react";
import { View, ActivityIndicator, StyleSheet, Text } from "react-native";
import Constants from "expo-constants";

export interface CameraHandle {
  takePhoto: () => Promise<{ uri: string }>;
}

interface AdaptiveCameraProps {
  flashEnabled?: boolean;
}

// Detect if running in Expo Go
const isExpoGo = Constants.appOwnership === "expo";

// Lazy load the appropriate camera component
const ExpoCamera = lazy(() =>
  import("./ExpoCamera").then((m) => ({ default: m.ExpoCamera }))
);
const VisionCamera = lazy(() =>
  import("./VisionCamera").then((m) => ({ default: m.VisionCamera }))
);

const CameraLoading = () => (
  <View style={styles.loading}>
    <ActivityIndicator size="large" color="#007AFF" />
    <Text style={styles.loadingText}>Initializing camera...</Text>
  </View>
);

export const AdaptiveCamera = forwardRef<CameraHandle, AdaptiveCameraProps>(
  (props, ref) => {
    const CameraComponent = isExpoGo ? ExpoCamera : VisionCamera;

    return (
      <Suspense fallback={<CameraLoading />}>
        <CameraComponent ref={ref} {...props} />
      </Suspense>
    );
  }
);

AdaptiveCamera.displayName = "AdaptiveCamera";

const styles = StyleSheet.create({
  loading: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "#000",
    justifyContent: "center",
    alignItems: "center",
  },
  loadingText: {
    marginTop: 16,
    color: "#888",
    fontSize: 14,
  },
});

export { isExpoGo };