import ScanQRCode from "@/components/ScanQRCode";
import { useState } from "react";
import {
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function Sensor() {
  const [scanModalVisible, setScanModalVisible] = useState(false);
  const [scannedData, setScannedData] = useState<string | null>(null);
  const handleQRCodeScanned = (data: string) => {
    setScannedData(data);
    // Alert.alert("QR Code Scanned", `Result: ${data}`);
  };

  const handleScanPress = () => {
    setScanModalVisible(true);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        <View style={styles.container}>
          <Text style={styles.titleText}>Cảm biến trên tàu</Text>

          <Pressable style={styles.scanButton} onPress={handleScanPress}>
            <Text style={styles.scanButtonText}>📱 Scan QR Code</Text>
          </Pressable>

          {scannedData && (
            <View style={styles.resultContainer}>
              <Text style={styles.resultLabel}>Last Scanned:</Text>
              <Text style={styles.resultText}>{scannedData}</Text>
            </View>
          )}
        </View>
      </ScrollView>

      <ScanQRCode
        visible={scanModalVisible}
        onClose={() => setScanModalVisible(false)}
        onScanned={handleQRCodeScanned}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  scrollContent: {
    flexGrow: 1,
  },
  container: {
    alignItems: "center",
    padding: 15,
  },
  titleText: {
    fontSize: 32,
    fontWeight: "700",
    lineHeight: 40,
    marginBottom: 30,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  scanButton: {
    backgroundColor: "#007AFF",
    paddingVertical: 14,
    paddingHorizontal: 30,
    borderRadius: 10,
    marginVertical: 15,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  scanButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
    textAlign: "center",
  },
  resultContainer: {
    marginTop: 30,
    padding: 15,
    backgroundColor: "#f0f0f0",
    borderRadius: 10,
    minWidth: "80%",
  },
  resultLabel: {
    fontSize: 14,
    fontWeight: "600",
    color: "#666",
    marginBottom: 8,
  },
  resultText: {
    fontSize: 14,
    color: "#333",
    fontFamily: "Menlo",
    fontWeight: "500",
  },
});