frontend-app/app/HomeScreen.tsx

import AsyncStorage from "@react-native-async-storage/async-storage";
import * as Notifications from "expo-notifications";
import React, { useEffect, useState } from "react";
import { Linking, ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Category, categories, categoryKeys, categoryTitles } from "types/Category";
import { Item } from "types/Item";
import { usePushNotifications } from "../hooks/usePushNotifications";
import { styles } from "../styles/HomeScreen.styles";

const API_URL = "https://notifier.gansejunge.com";
const STORAGE_KEY = "notifications";
const API_KEY_STORAGE = "api_key";

export default function HomeScreen() {
	const [data, setData] = useState<Item[]>([]);
	const [selected, setSelected] = useState<Category>("home");
	const [menuOpen, setMenuOpen] = useState(false);
	const [apiKey, setApiKey] = useState<string | null>(null);
	const [tempKey, setTempKey] = useState("");

	const pushToken = usePushNotifications({
		apiKey,
		backendUrl: API_URL,
		appVersion: "1.0.0",
		locale: "en-uk",
	});

	// Load API key on startup
	useEffect(() => {
		(async () => {
			const storedKey = await AsyncStorage.getItem(API_KEY_STORAGE);
			if (storedKey) setApiKey(storedKey);
		})();
	}, []);

	// Load saved notifications
	useEffect(() => {
		(async () => {
			try {
				const stored = await AsyncStorage.getItem(STORAGE_KEY);
				if (stored) setData(JSON.parse(stored));
			} catch (err) {
				console.error("Failed to load stored notifications:", err);
			}
		})();
	}, []);


	// Listen for incoming notifications
	useEffect(() => {
		const subscription = Notifications.addNotificationReceivedListener(notification => {
			const rawCategory = notification.request.content.data?.category as Category | undefined;
			const category: Category = rawCategory && categoryKeys.includes(rawCategory) ? rawCategory : "home";

			const item: Item = {
				timestamp: Date.now(),
				category,
				title: notification.request.content.title || "No title",
				info: notification.request.content.body || "No description",
				link: (notification.request.content.data?.link as string) || "#",
			};

			setData(prev => {
				const updated = [...prev, item].sort((a, b) => b.timestamp - a.timestamp);
				AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
				return updated;
			});
		});
		return () => subscription.remove();
	}, []);

	const filteredData = selected === "home" ? data : data.filter(item => item.category === selected);
	const menuItems = categories;

	if (!apiKey) {
		return (
			<SafeAreaView style={styles.container}>
				<View style={{ padding: 20 }}>
					<Text style={{ marginBottom: 10 }}>Enter API Key:</Text>
					<TextInput
						value={tempKey}
						onChangeText={setTempKey}
						style={{ borderWidth: 1, padding: 8, marginBottom: 10 }}
					/>
					<TouchableOpacity
						onPress={async () => {
							await AsyncStorage.setItem(API_KEY_STORAGE, tempKey);
							setApiKey(tempKey);
						}}
						style={{ backgroundColor: "blue", padding: 10 }}
					>
						<Text style={{ color: "white" }}>Save</Text>
					</TouchableOpacity>
				</View>
			</SafeAreaView>
		);
	}

	return (
		<SafeAreaView style={styles.container}>
			{/* Side Menu */}
			<View style={[styles.sideMenu, menuOpen && styles.sideMenuOpen]}>
				{menuItems.map(item => (
					<TouchableOpacity
						key={item.key}
						style={[styles.menuItem, selected === item.key && styles.menuItemSelected]}
						onPress={() => {
							setSelected(item.key);
							setMenuOpen(false);
						}}
					>
						<Text style={styles.menuText}>{item.label}</Text>
					</TouchableOpacity>
				))}
			</View>

			{/* Main Content */}
			<View style={styles.mainContent}>
				<TouchableOpacity style={styles.menuButton} onPress={() => setMenuOpen(!menuOpen)}>
					<Text style={styles.menuButtonText}>☰</Text>
				</TouchableOpacity>
				<Text style={styles.title}>{categoryTitles[selected]}</Text>

				<ScrollView style={styles.dataContainer}>
					{filteredData.length === 0 ? (
						<Text style={{ textAlign: "center", marginTop: 20 }}>No items yet</Text>
					) : (
						filteredData.map(item => (
							<View key={`${item.timestamp}-${item.title}`} style={styles.dataItem}>
								<Text style={styles.dataTitle}>{item.title}</Text>
								<Text style={styles.dataDescription}>{item.info}</Text>
								<TouchableOpacity onPress={() => Linking.openURL(item.link)}>
									<Text style={{ color: "blue" }}>Read more</Text>
								</TouchableOpacity>
							</View>
						))
					)}
				</ScrollView>
			</View>
		</SafeAreaView>
	);
}