App.js

import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  View,
  Text,
  Button,
  Alert,
  Switch,
  ScrollView,
  Image,
  Modal,
  TextInput,
  Share,
  useColorScheme,
  TouchableOpacity,
  DeviceEventEmitter,
} from "react-native";

import {
  initialise,
  captureDocument,
  buildPdfForLastDocumentCapture,
  captureOpticalCode,
  generateQRCode,
  generateBarcode,
  activateLicense,
  assetCapture,
  setBottomStampData,
  getDeviceDetails,
  getLocationDetails,
  getDeviceSecurityInfo,
  getCurrentDigiPin,
  disableScreenProtection,
  startDeviceMonitoring,
  stopDeviceMonitoring,
  enableScreenProtection,
} from "@extrieve_technologies/quickcapture_react_native";

import FileViewer from "react-native-file-viewer";
// OPTIONAL: only if you want Read Image Info to work
// import DocumentPicker from "react-native-document-picker";

export default function App() {
  const theme = useColorScheme();

  const [isScreenProtectionEnabled, setIsScreenProtectionEnabled] =
    useState(false);
  const [isLiveMonitoringEnabled, setIsLiveMonitoringEnabled] = useState(false);

  const [images, setImages] = useState([]);
  const [base64Image, setBase64Image] = useState("");
  const [modalVisible, setModalVisible] = useState(false);
  const [qrText, setQrText] = useState("");
  const [promptModalVisible, setPromptModalVisible] = useState(false);
  const [inputText, setInputText] = useState("");
  
  const [captureModalVisible, setCaptureModalVisible] = useState(false);
  const [capturedFiles, setCapturedFiles] = useState([]);
  const [selectedFile, setSelectedFile] = useState(null);
  const [selectedFileModalVisible, setSelectedFileModalVisible] = useState(false);


  useEffect(() => {
    // ✅ activate license first, then initialise
    initialise();
    activatePluginLicense();
  }, []);

  // Listen for device monitoring events
  useEffect(() => {
    const subscription = DeviceEventEmitter.addListener(
      "DeviceGuardEvent",
      (data) => {
        console.log("Received native event:", data);
        Alert.alert(
          "⚠️ Security Threat",
          "Type: " + data?.threatType + "\n" + data?.message
        );
      }
    );

    return () => subscription.remove();
  }, []);

  const dynamicStyles = StyleSheet.create({
    input: {
      height: 40,
      margin: 12,
      borderWidth: 1,
      padding: 10,
      color: theme === "dark" ? "white" : "black",
      backgroundColor: theme === "dark" ? "#333" : "#FFF",
      width: "100%",
    },
  });

  // If you want Read Image Info, enable DocumentPicker and this function.
  /*
  const pickFile = async () => {
    try {
      const result = await DocumentPicker.pickSingle({
        type: [DocumentPicker.types.pdf, DocumentPicker.types.images],
        copyTo: "cachesDirectory",
      });

      const fullUri = result.fileCopyUri ?? result.uri;
      if (!fullUri) return null;

      let fullPath = fullUri.startsWith("file://")
        ? fullUri.replace("file://", "")
        : fullUri;

      fullPath = fullPath.replaceAll("%20", " ");
      return fullPath;
    } catch (e) {
      if (DocumentPicker.isCancel(e)) return null;
      console.error(e);
      return null;
    }
  };
  */

  const activatePluginLicense = () => {
    const androidLicense = "Your Android license key here";
    const iosLicense = "Your iOS license key here";

    activateLicense(androidLicense, iosLicense)
      .then((response) => {
        if (response) {
          Alert.alert("License Activated", "Activated successfully!");
        } else {
          Alert.alert("Activation Failed", "Activation unsuccessful.");
        }
      })
      .catch((error) => {
        console.error("Error activating license:", error);
        Alert.alert("License Activation Error", `Error: ${error.message ?? error}`);
      });
  };


  const handleStartCapture = () => {
  captureDocument()
    .then((resultString) => {
      const result = JSON.parse(resultString);

      const files = Array.isArray(result?.fileCollection)
        ? result.fileCollection
        : [];

      if (files.length) {
        setCapturedFiles(files);
        setCaptureModalVisible(true); // ✅ open popup
      } else {
        Alert.alert("No files", "No files were returned in fileCollection.");
      }
    })
    .catch((error) => {
      console.error("Error starting capture:", error);
      Alert.alert("Capture Error", `Error: ${error.message ?? error}`);
    });
  };

  const openFile = async (path) => {
  try {
    // Works for images/pdf depending on installed viewers
    await FileViewer.open(path);
  } catch (e) {
    Alert.alert("Open failed", String(e?.message ?? e));
  }
};

const shareFile = async (path) => {
  try {
    // Note: Share works best with a file URI
    const uri = path.startsWith("file://") ? path : `file://${path}`;
    await Share.share({ url: uri, message: "Captured file", title: "Share" });
  } catch (e) {
    Alert.alert("Share failed", String(e?.message ?? e));
  }
};

const onTapFile = (path) => {
  setSelectedFile(path);
  setSelectedFileModalVisible(true);
};


  const handleBuildPdf = async () => {
    try {
      const pdfPath = await buildPdfForLastDocumentCapture();
      await FileViewer.open(pdfPath, { mimeType: "application/pdf" });
    } catch (error) {
      console.error("Error building/opening PDF:", error);
      Alert.alert("PDF Error", String(error?.message ?? error));
    }
  };

  // ⚠️ This will crash unless pickFile is implemented
  const startReadImageInfo = async () => {
    Alert.alert(
      "Not enabled",
      "Enable DocumentPicker + pickFile() in App.js to use Read Image Info."
    );

    // const fullPath = await pickFile();
    // if (!fullPath) return;

    // readImageInfo(fullPath)
    //   .then((resultString) => {
    //     const result = JSON.parse(resultString);
    //     Alert.alert("Image Info", JSON.stringify(result, null, 2));
    //   })
    //   .catch((error) => {
    //     console.error("Error Reading Info:", error);
    //     Alert.alert("Read Image Info Error", `Error: ${error.message ?? error}`);
    //   });
  };

  const startAssetCapture = () => {
    assetCapture()
      .then((resultString) => {
        const result = JSON.parse(resultString);
        if (result?.fileCollection?.length) setImages(result.fileCollection);
        else Alert.alert("No images", "No images were captured");
      })
      .catch((error) => {
        console.error("Error starting asset capture:", error);
        Alert.alert("Capture Error", `Error: ${error.message ?? error}`);
      });
  };

  const startOpticalCodeScanner = () => {
    captureOpticalCode()
      .then((resultString) => Alert.alert("Scanned code", String(resultString)))
      .catch((error) => {
        console.error("Error scanning code:", error);
        Alert.alert("Scan Error", `Error: ${error.message ?? error}`);
      });
  };

  const buildQRCode = () => {
    if (!qrText.trim()) {
      Alert.alert("Input Required", "Enter text to generate a QR Code.");
      return;
    }
    generateQRCode(qrText)
      .then((base64String) => setBase64Image(base64String))
      .catch((error) => {
        console.error("Error generating QR code:", error);
        Alert.alert("QR Error", `Error: ${error.message ?? error}`);
      });
  };

  const buildBarcode = (enableText) => {
    if (!qrText.trim()) {
      Alert.alert("Input Required", "Enter text to generate a Bar Code.");
      return;
    }
    generateBarcode(qrText, enableText)
      .then((base64String) => setBase64Image(base64String))
      .catch((error) => {
        console.error("Error generating barcode:", error);
        Alert.alert("Barcode Error", `Error: ${error.message ?? error}`);
      });
  };

  const shareQRCode = async () => {
    try {
      const uri = `data:image/png;base64,${base64Image}`;
      await Share.share({ message: `Here is the QR/Barcode: ${uri}` });
      setModalVisible(false);
    } catch (error) {
      console.error("Error sharing:", error);
      Alert.alert("Share Error", String(error?.message ?? error));
    }
  };

  const startAddBottomStamping = () => {
    console.log("User input:", inputText);
    setPromptModalVisible(false);

    let res = inputText || "";

    getLocationDetails()
      .then((resultString) => {
        const result = JSON.parse(resultString);
        //res += `\nLatitude: ${result?.Latitude}, Longitude: ${result?.Longitude}`;
        //res += `\nDigiPin: ${result?.DigiPIN}`;
        setBottomStampData(res);
        Alert.alert(
          "Bottom Stamping Set",
          "Start capture to see stamping effect."
        );
        setInputText("");
      })
      .catch((error) => {
        console.error("Error getting location info:", error);
        Alert.alert("Location Error", `Error: ${error.message ?? error}`);
      });
  };

  const getDeviceInfo = () => {
    getDeviceDetails()
      .then((resultString) =>
        Alert.alert("Device Info", JSON.stringify(JSON.parse(resultString), null, 2))
      )
      .catch((error) =>
        Alert.alert("Device Info Error", `Error: ${error.message ?? error}`)
      );
  };

  const getLocationInfo = () => {
    getLocationDetails()
      .then((resultString) =>
        Alert.alert(
          "Location Info",
          JSON.stringify(JSON.parse(resultString), null, 2)
        )
      )
      .catch((error) =>
        Alert.alert("Location Error", `Error: ${error.message ?? error}`)
      );
  };

  const getSecurityInfo = () => {
    getDeviceSecurityInfo()
      .then((resultString) =>
        Alert.alert(
          "Security Info",
          JSON.stringify(JSON.parse(resultString), null, 2)
        )
      )
      .catch((error) =>
        Alert.alert("Security Error", `Error: ${error.message ?? error}`)
      );
  };

  const knowDigiPin = () => {
    getCurrentDigiPin()
      .then((digiPin) => Alert.alert("Digi Pin", String(digiPin)))
      .catch((error) =>
        Alert.alert("Digi Pin Error", `Error: ${error.message ?? error}`)
      );
  };

  const onScreenProtectionToggled = (value) => {
    setIsScreenProtectionEnabled(value);
    if (value) enableScreenProtection();
    else disableScreenProtection();
  };

  const onLiveMonitoringToggled = (value) => {
    setIsLiveMonitoringEnabled(value);
    if (value) startDeviceMonitoring("DeviceGuardEvent");
    else stopDeviceMonitoring();
  };

  return (
    <View style={styles.container}>
      <Text style={{ fontWeight: "700", fontSize: 18 }}>QuickCapture Test</Text>

      <View style={styles.buttonContainer}>
        <Button title="Start Document Capture" onPress={handleStartCapture} />
        <View style={{ height: 12 }} />
        <Button title="Build QR/Bar Code" onPress={() => setModalVisible(true)} />
        <View style={{ height: 12 }} />
        <Button title="Scan QR/bar code" onPress={startOpticalCodeScanner} />
        <View style={{ height: 12 }} />
        <Button title="Asset Capture" onPress={startAssetCapture} />
        <View style={{ height: 12 }} />
        <Button title="Read Image Info" onPress={startReadImageInfo} />
        <View style={{ height: 12 }} />
        <Button
          title="Add Bottom Stamp Text"
          onPress={() => setPromptModalVisible(true)}
        />
        <View style={{ height: 12 }} />
        <Button title="Device Info" onPress={getDeviceInfo} />
        <View style={{ height: 12 }} />
        <Button title="Location Info" onPress={getLocationInfo} />
        <View style={{ height: 12 }} />
        <Button title="Security Info" onPress={getSecurityInfo} />
        <View style={{ height: 12 }} />
        <Button title="Get Digi Pin" onPress={knowDigiPin} />

        <View style={{ height: 18 }} />

        <Text style={styles.label}>Screen Protection</Text>
        <Switch
          value={isScreenProtectionEnabled}
          onValueChange={onScreenProtectionToggled}
        />

        <Text style={styles.label}>Live Monitoring</Text>
        <Switch
          value={isLiveMonitoringEnabled}
          onValueChange={onLiveMonitoringToggled}
        />
      </View>

      {/* ✅ Capture results popup */}
<Modal
  animationType="slide"
  transparent
  visible={captureModalVisible}
  onRequestClose={() => setCaptureModalVisible(false)}
>
  <View style={styles.centeredView}>
    <View style={styles.captureModal}>
      <Text style={{ fontSize: 18, fontWeight: "800", marginBottom: 10 }}>
        Captured Files ({capturedFiles.length})
      </Text>

      <ScrollView contentContainerStyle={styles.captureGrid}>
        {capturedFiles.map((p, idx) => {
          const uri = p.startsWith("file://") ? p : `file://${p}`;
          return (
            <TouchableOpacity
              key={`${p}-${idx}`}
              style={styles.captureItem}
              onPress={() => onTapFile(p)}
            >
              <Image source={{ uri }} style={styles.captureThumb} />
              <Text numberOfLines={1} style={styles.captureName}>
                {p.split(/[\\/]/).pop()}
              </Text>

              <View style={styles.captureActions}>
                <TouchableOpacity
                  style={styles.smallBtn}
                  onPress={() => openFile(p)}
                >
                  <Text style={styles.smallBtnText}>Open</Text>
                </TouchableOpacity>

                <TouchableOpacity
                  style={styles.smallBtn}
                  onPress={() => shareFile(p)}
                >
                  <Text style={styles.smallBtnText}>Share</Text>
                </TouchableOpacity>
              </View>
            </TouchableOpacity>
          );
        })}
      </ScrollView>

      <TouchableOpacity
        style={[styles.actionButton, { marginTop: 12 }]}
        onPress={() => setCaptureModalVisible(false)}
      >
        <Text style={styles.actionButtonText}>Close</Text>
      </TouchableOpacity>
    </View>
  </View>
</Modal>

  {/* ✅ Full-screen preview popup */}
  <Modal
    animationType="fade"
    transparent
    visible={selectedFileModalVisible}
    onRequestClose={() => setSelectedFileModalVisible(false)}
  >
    <View style={styles.centeredView}>
      <View style={styles.previewModal}>
        <Text style={{ fontWeight: "800", marginBottom: 8 }}>
          {selectedFile ? selectedFile.split(/[\\/]/).pop() : ""}
        </Text>

        {selectedFile ? (
          <Image
            source={{
              uri: selectedFile.startsWith("file://")
                ? selectedFile
                : `file://${selectedFile}`,
            }}
            style={styles.previewImage}
            resizeMode="contain"
          />
        ) : null}

        <View style={{ flexDirection: "row", gap: 10, marginTop: 10 }}>
          <TouchableOpacity
            style={styles.actionButton}
            onPress={() => selectedFile && openFile(selectedFile)}
          >
            <Text style={styles.actionButtonText}>Open</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.actionButton}
            onPress={() => selectedFile && shareFile(selectedFile)}
          >
            <Text style={styles.actionButtonText}>Share</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[styles.actionButton, { backgroundColor: "#666" }]}
            onPress={() => setSelectedFileModalVisible(false)}
          >
            <Text style={styles.actionButtonText}>Close</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  </Modal>


      {/* QR/Barcode modal */}
      <Modal
        animationType="slide"
        transparent
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <TextInput
              style={dynamicStyles.input}
              onChangeText={setQrText}
              value={qrText}
              placeholder="Enter text for QR / Barcode"
              placeholderTextColor={theme === "dark" ? "#ccc" : "#666"}
            />

            <View style={styles.buttonRow}>
              <TouchableOpacity style={styles.actionButton} onPress={buildQRCode}>
                <Text style={styles.actionButtonText}>Generate QR</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={styles.actionButton}
                onPress={() => buildBarcode(false)}
              >
                <Text style={styles.actionButtonText}>Barcode</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={styles.actionButton}
                onPress={() => buildBarcode(true)}
              >
                <Text style={styles.actionButtonText}>Barcode + Text</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={styles.actionButton}
                onPress={() => setModalVisible(false)}
              >
                <Text style={styles.actionButtonText}>Close</Text>
              </TouchableOpacity>
            </View>

            {!!base64Image && (
              <View style={{ alignItems: "center", marginTop: 12 }}>
                <Image
                  source={{ uri: `data:image/png;base64,${base64Image}` }}
                  style={styles.bigImage}
                  resizeMode="contain"
                />

                <TouchableOpacity
                  style={[styles.actionButton, { marginTop: 10 }]}
                  onPress={shareQRCode}
                >
                  <Text style={styles.actionButtonText}>Share</Text>
                </TouchableOpacity>
              </View>
            )}
          </View>
        </View>
      </Modal>

      {/* Bottom stamp prompt modal */}
      <Modal transparent visible={promptModalVisible} animationType="fade">
        <View style={styles.promptBackdrop}>
          <View style={styles.promptCard}>
            <Text style={{ color: "black", fontWeight: "700" }}>
              Enter Bottom Stamping Text:
            </Text>
            <TextInput
              style={styles.promptInput}
              value={inputText}
              onChangeText={setInputText}
              placeholder="{DATETIME} ... \nNext line..."
            />
            <TouchableOpacity
              onPress={startAddBottomStamping}
              style={styles.promptSubmit}
            >
              <Text style={{ color: "white", textAlign: "center" }}>Submit</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => setPromptModalVisible(false)}
              style={[styles.promptSubmit, { marginTop: 8, backgroundColor: "#666" }]}
            >
              <Text style={{ color: "white", textAlign: "center" }}>Cancel</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      {/* Images */}
      <ScrollView contentContainerStyle={styles.imageGrid}>
        {images.map((imagePath, index) => (
          <Image
            key={String(index)}
            source={{ uri: `file://${imagePath}` }}
            style={styles.thumb}
            resizeMode="cover"
          />
        ))}
      </ScrollView>

      {images.length > 0 && (
        <View style={{ width: "100%", marginTop: 8 }}>
          <Button title="Build PDF from last capture" onPress={handleBuildPdf} />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  captureModal: {
  backgroundColor: "white",
  borderRadius: 16,
  padding: 16,
  width: "92%",
  maxHeight: "80%",
},
captureGrid: {
  flexDirection: "row",
  flexWrap: "wrap",
  justifyContent: "center",
  paddingBottom: 10,
},
captureItem: {
  width: 150,
  borderWidth: 1,
  borderColor: "#ddd",
  borderRadius: 12,
  padding: 10,
  margin: 8,
},
captureThumb: {
  width: "100%",
  height: 110,
  borderRadius: 10,
  backgroundColor: "#f1f1f1",
},
captureName: {
  marginTop: 6,
  fontSize: 12,
  fontWeight: "700",
},
captureActions: {
  flexDirection: "row",
  justifyContent: "space-between",
  marginTop: 8,
},
smallBtn: {
  backgroundColor: "#007BFF",
  paddingVertical: 6,
  paddingHorizontal: 10,
  borderRadius: 8,
},
smallBtnText: { color: "white", fontWeight: "700", fontSize: 12 },

previewModal: {
  backgroundColor: "white",
  borderRadius: 16,
  padding: 16,
  width: "92%",
  maxHeight: "85%",
  alignItems: "center",
},
previewImage: {
  width: "100%",
  height: 380,
  backgroundColor: "#f1f1f1",
  borderRadius: 12,
},

  container: {
    flex: 1,
    padding: 16,
    backgroundColor: "#F5FCFF",
  },
  label: { fontSize: 16, marginTop: 10 },
  buttonContainer: { width: "100%", marginTop: 12 },

  imageGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    marginTop: 16,
    paddingBottom: 30,
  },
  thumb: { width: 100, height: 100, margin: 5, borderRadius: 8 },

  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalView: {
    backgroundColor: "white",
    borderRadius: 16,
    padding: 18,
    width: "88%",
  },
  buttonRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    marginTop: 10,
  },
  actionButton: {
    backgroundColor: "#007BFF",
    paddingVertical: 10,
    paddingHorizontal: 12,
    borderRadius: 10,
    margin: 6,
  },
  actionButtonText: { color: "#fff", fontWeight: "700" },
  bigImage: { width: 220, height: 220 },

  promptBackdrop: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#00000088",
  },
  promptCard: {
    backgroundColor: "white",
    padding: 18,
    borderRadius: 12,
    width: "85%",
  },
  promptInput: {
    borderWidth: 1,
    borderColor: "#ccc",
    marginTop: 10,
    padding: 8,
    borderRadius: 10,
    color: "black",
  },
  promptSubmit: {
    backgroundColor: "blue",
    padding: 10,
    borderRadius: 10,
    marginTop: 12,
  },
});