import React, { useState } from "react";
import {
	Button,
	FlatList,
	Pressable,
	StyleSheet,
	Text,
	TextInput,
	View,
} from "react-native";
import * as Updates from 'expo-updates';

export default function App() {
	const [buffer, setBuffer] = useState("");
	const [items, setItems] = useState<string[]>([]);
	const [status, setStatus] = useState("");

	const [updates, setUpdates] = useState("")

	const handleChange = (text: string) => {
		// Scanner "types" characters then appends Enter (\n)
		if (text.endsWith("\n")) {
			const code = text.trim(); // Remove newline
			handleScan(code);
			setBuffer(""); // Reset for next scan
		} else {
			setBuffer(text);
		}
	};

async function checkServerUpdate() {
  setUpdates('Checking for updates...');
  try {
    const res = await Updates.checkForUpdateAsync();
    if (res.isAvailable) {
      setUpdates('Update available! Fetching and reloading...');
      await Updates.fetchUpdateAsync();
      await Updates.reloadAsync();
    } else {
      setUpdates('No new update available.');
    }
  } catch (e:any) {
    setUpdates(`Update check failed: ${e.message}`);
  }
}

	const handleScan = (code: string) => {
		//console.log("Scanned:", code);

		if (code.toUpperCase().startsWith("LOC")) {
			console.log("Triggered relocate to lane");
			performRelocate(code);
		} else {
			setItems((prev) => [...prev, code]);
			setStatus(`Added: ${code}`);
		}
	};

	const performRelocate = (locationCode: string) => {
		if (items.length === 0) {
			setStatus(`Relocate to ${locationCode} requested, but no items`);
			return;
		}

		// Do your API call or whatever the "relocate" means
		console.log("Relocating", items, "to", locationCode);

		setStatus(`Moved ${items.length} items to ${locationCode}`);
		setItems([]);
	};

	return (
		<View style={styles.container}>
			<Button
				title="Clear Items"
				onPress={() => {
					setItems([]);
				}}
			/>
			<Text style={styles.title}>Scan Barcodes</Text>

			{/* The working input you already have */}
			<TextInput
				autoFocus
				value={buffer}
				onChangeText={handleChange}
				showSoftInputOnFocus={false}
				keyboardType="visible-password"
				style={{
					position: "absolute",
					opacity: 0, // invisible
					height: 0, // takes no space
					width: 0,
				}}
			/>
			<Pressable onPress={checkServerUpdate}style={{
    marginVertical: 12,
    padding: 12,
    backgroundColor: '#007AFF',
    borderRadius: 6,
  }}>
				<Text>Check Update</Text>
			</Pressable>
				<Text>Update Data</Text>
				<Text>{updates}</Text>
			<FlatList
				data={items}
				keyExtractor={(_, i) => i.toString()}
				renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
			/>

			<Text style={styles.status}>{status}</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	container: { flex: 1, padding: 16 },
	title: { fontWeight: "bold", fontSize: 20 },
	item: { paddingVertical: 4, fontSize: 16 },
	status: { marginTop: 20, fontStyle: "italic" },
});