import React, { useState, useEffect, createContext, useContext } from 'react';
import { Text, View, StyleSheet, ActivityIndicator, TouchableOpacity, FlatList } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { CameraView, Camera } from 'expo-camera';
import { Ionicons } from '@expo/vector-icons';
import axios from 'axios'; // Import Axios for HTTP requests

// Create a Context for QR code data
const QRCodeContext = createContext();

const Tab = createBottomTabNavigator();

// Component for QR Scanner Screen
function QRScannerScreen() {
  const { qrCodes, setQrCodes } = useContext(QRCodeContext); // Access context
  const [hasPermission, setHasPermission] = useState(null); // State for camera permission
  const [scanned, setScanned] = useState(false); // State for scanned status
  const [showSplash, setShowSplash] = useState(true); // State for splash screen
  const [scannedData, setScannedData] = useState(''); // State for scanned data
  const [scanResult, setScanResult] = useState(null); // State for VirusTotal scan result

  useEffect(() => {
    const initializeApp = async () => {
      const { status } = await Camera.requestCameraPermissionsAsync(); // Request camera permissions
      setHasPermission(status === 'granted'); // Set permission status
      setShowSplash(false); // Hide splash screen
    };

    initializeApp(); // Initialize app
  }, []);

// Function to handle barcode scanned event
const handleBarCodeScanned = async ({ type, data }) => {
  setScanned(true); // Mark as scanned

  // Determine the type of data (URL, text, or just numbers)
  let dataType;
  if (/^(http|https):\/\//.test(data)) {
    dataType = 'URL';
  } else if (/^[0-9]+$/.test(data)) {
    dataType = 'Numbers';
  } else {
    dataType = 'Text';
  }

  // Construct the scanned data with the data type
  let newScannedData = `Type: ${dataType}\nData: ${data}`; // Initialize with type and data

  try {
    const scanId = await scanWithVirusTotal(data); // Send data to VirusTotal and get scan ID
    const positive = await getScanResult(scanId); // Get scan result and extract positive score
    newScannedData += `\nScore: ${positive}`; // Append positive score to newScannedData
  } catch (error) {
    console.error('Error handling barcode scan:', error); // Handle error
  }

  setScannedData(newScannedData); // Save scanned data
  setQrCodes([...qrCodes, newScannedData]); // Add scanned data to history
};

// Function to send data to VirusTotal and get the scan ID
const scanWithVirusTotal = async (data) => {
  const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; // Replace with your VirusTotal API key
  const url = 'https://www.virustotal.com/vtapi/v2/url/scan';
  const params = {
    apikey: apiKey,
    url: data
  };

  try {
    const response = await axios.post(url, null, { params }); // Send URL scan request
    return response.data.scan_id; // Return scan ID
  } catch (error) {
    console.error('Error scanning with VirusTotal:', error); // Handle error
    throw error; // Propagate error
  }
};

// Function to get scan result from VirusTotal and return the positive score
const getScanResult = async (scanId) => {
  const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; // Replace with your VirusTotal API key
  const url = 'https://www.virustotal.com/vtapi/v2/url/report';
  const params = {
    apikey: apiKey,
    resource: scanId
  };

  try {
    const response = await axios.get(url, { params }); // Get scan result
    return response.data.positives; // Return positive score
  } catch (error) {
    console.error('Error getting scan result:', error); // Handle error
    throw error; // Propagate error
  }
};

  if (showSplash) {
    return (
      <View style={styles.splashContainer}>
        <ActivityIndicator size="large" color="#ff69b4" />
      </View>
    );
  }

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }

  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      {/* Header banner */}
      <View style={styles.banner}>
        <Text style={styles.headerText}>SafeQR</Text>
      </View>
      {/* Welcome message */}
      <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
      {/* Camera view container */}
      <View style={styles.cameraContainer}>
        <CameraView
          onBarcodeScanned={scanned ? undefined : handleBarCodeScanned} // Disable scanner if already scanned
          barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }} // Scanner settings
          style={styles.camera} // Apply styles
        />
      </View>
   {/* Display scanned data */}
   {scannedData !== '' && (
        <View style={styles.dataBox}>
          <Text style={styles.dataText}>{scannedData}</Text>
          {scanResult && <Text style={styles.dataText}>{JSON.stringify(scanResult)}</Text>}
        </View>
      )}
      {/* Button to scan again */}
      {scanned && (
        <TouchableOpacity style={styles.button} onPress={() => setScanned(false)}>
          <Text style={styles.buttonText}>Tap to Scan Again</Text>
        </TouchableOpacity>
      )}
      {/* Menu (Placeholder for additional menu items) */}
      <View style={styles.menu}>
        {/* Your existing menu items */}
      </View>
    </View>
  );
}

// Component for History Screen
function HistoryScreen() {
  const { qrCodes } = useContext(QRCodeContext); // Access context

  return (
    <View style={styles.container}>
      <Text style={styles.welcomeText}>History Screen</Text>
      <FlatList
        data={qrCodes} // Data for FlatList
        renderItem={({ item }) => (
          <View style={styles.dataBox}>
            <Text style={styles.dataText}>{item}</Text>
          </View>
        )}
        keyExtractor={(item, index) => index.toString()} // Key extractor for FlatList
      />
    </View>
  );
}

// Component for Settings Screen
function SettingsScreen() {
  const { setQrCodes } = useContext(QRCodeContext); // Access context

  // Function to clear history
  const clearHistory = () => {
    setQrCodes([]);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcomeText}>Settings Screen</Text>
      <TouchableOpacity style={styles.button} onPress={clearHistory}>
        <Text style={styles.buttonText}>Clear History</Text>
      </TouchableOpacity>
    </View>
  );
}

// Component for Profile Screen
function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.welcomeText}>Profile Screen</Text>
    </View>
  );
}

// Main App component with bottom tab navigation
export default function App() {
  const [qrCodes, setQrCodes] = useState([]); // State to hold QR codes

  return (
    <QRCodeContext.Provider value={{ qrCodes, setQrCodes }}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ color, size }) => {
              let iconName;

              // Set different icons for each tab
              if (route.name === 'QR Scanner') {
                iconName = 'qr-code-outline';
              } else if (route.name === 'History') {
                iconName = 'time-outline';
              } else if (route.name === 'Settings') {
                iconName = 'settings-outline';
              } else if (route.name === 'Profile') {
                iconName = 'person-outline';
              }

              // Return the appropriate icon
              return <Ionicons name={iconName} size={size} color={color} />;
            },
          })}
          tabBarOptions={{
            activeTintColor: 'tomato', // Active tab color
            inactiveTintColor: 'gray', // Inactive tab color
          }}
        >
          <Tab.Screen name="QR Scanner" component={QRScannerScreen} />
          <Tab.Screen name="History" component={HistoryScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
          <Tab.Screen name="Profile" component={ProfileScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </QRCodeContext.Provider>
  );
}

// StyleSheet for styling components
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fa5da2', 
  },
  splashContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f8f0fc", // light purple background
  },
  banner: {
    backgroundColor: "#333", // dark background
    paddingVertical: 10,
    alignItems: "center",
  },
  headerText: {
    color: "white",
    fontSize: 24,
  },
  welcomeText: {
    textAlign: "center",
    fontSize: 20,
    marginVertical: 10, // Adjusted margin
    color: "white", 
  },
  cameraContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  camera: {
    width: 300,
    height: 300,
  },
  button: {
    backgroundColor: '#333',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 10,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
  dataBox: {
    marginVertical: 10,
    padding: 10,
    backgroundColor: "#fff",
    borderRadius: 5,
    alignItems: "center",
    justifyContent: "center",
  },
  dataText: {
    fontSize: 16,
    color: "#000",
  },
  menu: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    backgroundColor: "#ff69b4", // pink background
    paddingVertical: 10,
  },


  // Additional styles for green and red boxes
  greenBox: {
    backgroundColor: '#00FF00', // Green color
  },
  redBox: {
    backgroundColor: '#FF0000', // Red color
  },
});