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

const { KeyenceModule } = NativeModules;

export default function App() {
	KeyenceModule.hello().then(console.log).catch(console.error);
	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 cacheBuster = `?t=${Date.now()}`;

			const res = await Updates.checkForUpdateAsync();
			console.log("Update check result:", res);

			if (res.isAvailable) {
				setUpdates("Update available! Downloading...");
				const fetchResult = await Updates.fetchUpdateAsync();
				console.log("Fetch result:", fetchResult);

				if (fetchResult.isNew) {
					setUpdates("Update downloaded! Reloading app...");
					// Add a small delay to ensure everything is ready
					setTimeout(() => {
						Updates.reloadAsync();
					}, 1000);
				} else {
					setUpdates("Update download completed but no new bundle?");
				}
			} else {
				setUpdates("No new update available.");
			}
		} catch (e: any) {
			console.error("Update error:", e);
			setUpdates(`Update 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}>
			<Text>But maybe later i will be </Text>

			<Button
				title="Clear Items"
				onPress={() => {
					setItems([]);
				}}
			/>
			<Text style={styles.title}>Scan Barcode</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" },
});