frontend-app/app/index.tsx

import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, Button, Linking, TouchableOpacity, ScrollView } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
import { categories, categoryTitles, Category } from '../types/Category';
import { Item } from "../types/Item";
import { styles } from '../styles/styles';
import { usePushNotifications } from '../hooks/usePushNotifications';
import { useNotificationListener, STORAGE_KEY } from '../hooks/useNotificationListener';
import { version as appVersion } from '../package.json';

const Drawer = createDrawerNavigator();
const API_KEY_STORAGE = 'API_KEY';
const API_URL = 'https://notifier.gansejunge.com';

type ApiKeyScreenProps = {
	onApiKeySaved: (key: string) => void;
};


function ApiKeyScreen({ onApiKeySaved }: ApiKeyScreenProps) {
	const [apiKey, setApiKey] = useState('');

	const saveApiKey = async () => {
		if (apiKey.trim()) {
			await AsyncStorage.setItem(API_KEY_STORAGE, apiKey);
			onApiKeySaved(apiKey);
		}
	};

	return (
		<View style={styles.centered}>
			<Text style={styles.label}>Enter your API Key:</Text>
			<TextInput
				style={[styles.input, { color: '#000', backgroundColor: '#fff' }]}
				value={apiKey}
				onChangeText={setApiKey}
				secureTextEntry
				placeholder="API Key"
				placeholderTextColor="#030303ff"
			/>
			<Button title="Save" onPress={saveApiKey} />
		</View>
	);
}

function CategoryScreen({
	category,
	notifications,
	registered,
	registrationError,
}: {
	category: Category;
	notifications: Item[];
	registered: boolean;
	registrationError: string | null;
}) {
	const [showBanner, setShowBanner] = useState(true);

	// Auto-hide banner after 4 seconds whenever it changes
	useEffect(() => {
		if (!registered && !registrationError) return; // nothing to show
		setShowBanner(true); // reset visibility
		const timer = setTimeout(() => setShowBanner(false), 4000);
		return () => clearTimeout(timer);
	}, [registered, registrationError]);

	const filtered = category === "home"
		? notifications
		: notifications.filter(n => n.category === category);

	const sorted = filtered.sort((a, b) => b.timestamp - a.timestamp);

	const openLink = (url: string) => {
		if (url && url !== "#") Linking.openURL(url).catch(console.error);
	};

	return (
		<ScrollView contentContainerStyle={{ padding: 16 }}>
			{/* Banner */}
			{showBanner && registrationError && (
				<View style={{ padding: 8, backgroundColor: "#F44336", borderRadius: 4, marginBottom: 12 }}>
					<Text style={{ color: "#fff", textAlign: "center", fontSize: 12 }}>
						{registrationError}
					</Text>
				</View>
			)}

			<Text style={{ fontSize: 20, marginBottom: 16, color: "#fff", textAlign: "center" }}>
				{categoryTitles[category]}
			</Text>

			{sorted.length === 0 ? (
				<View style={{ backgroundColor: "#444", padding: 16, borderRadius: 10, alignItems: "center", justifyContent: "center", marginTop: 20 }}>
					<Text style={{ color: "#ccc", fontSize: 14 }}>No notifications yet.</Text>
				</View>
			) : (
				sorted.map((item, index) => (
					<View key={index} style={{ backgroundColor: "#444", padding: 12, borderRadius: 10, marginBottom: 12 }}>
						<Text style={{ color: "#fff", fontWeight: "bold", marginBottom: 4 }}>{item.title}</Text>
						<Text style={{ color: "#ccc", fontSize: 12, marginBottom: 4 }}>{new Date(item.timestamp).toLocaleString()}</Text>
						<Text style={{ color: "#fff", marginBottom: item.link && item.link !== "#" ? 8 : 0 }}>{item.info}</Text>
						{item.link && item.link !== "#" && (
							<TouchableOpacity onPress={() => openLink(item.link)}>
								<Text style={{ color: "#4da6ff", textDecorationLine: "underline" }}>Click here</Text>
							</TouchableOpacity>
						)}
					</View>
				))
			)}
		</ScrollView>
	);
}

// Custom Drawer with Logout at bottom
function CustomDrawerContent({ onLogout, ...props }: any) {
	return (
		<View style={{ flex: 1, backgroundColor: '#333' }}>
			<DrawerContentScrollView {...props} contentContainerStyle={{ paddingTop: 0 }}>
				<View style={{ flex: 1 }}>
					<DrawerItemList {...props} />
				</View>
			</DrawerContentScrollView>

			{/* Logout Button */}
			<View style={{ padding: 20, borderTopWidth: 1, borderTopColor: '#444' }}>
				<TouchableOpacity onPress={onLogout} style={styles.logoutButton}>
					<Text style={styles.logoutText}>Logout</Text>
				</TouchableOpacity>
			</View>
		</View>
	);
}

export default function App() {
	const [apiKeySaved, setApiKeySaved] = useState<boolean | null>(null);
	const [apiKey, setApiKey] = useState<string | null>(null);
	const [notifications, setNotifications] = useState<Item[]>([]);

	useEffect(() => {
		const checkApiKey = async () => {
			const key = await AsyncStorage.getItem(API_KEY_STORAGE);
			setApiKey(key); 
			setApiKeySaved(!!key);
		};
		checkApiKey();
	}, []);

	const { expoPushToken, registered, registrationError, unregisterToken } = usePushNotifications({
		apiKey: apiKey ?? undefined,
		backendUrl: API_URL,
		appVersion,
		locale: 'en-uk',
	});

	const handleLogout = async () => {
		if (unregisterToken) await unregisterToken();
		await AsyncStorage.removeItem(API_KEY_STORAGE);
		await AsyncStorage.removeItem(STORAGE_KEY);
		setApiKey(null);
		setApiKeySaved(false);
		setNotifications([]);
	};

	useNotificationListener(setNotifications);

	if (apiKeySaved === null) return null;

	if (!apiKeySaved) {
		return (
			<ApiKeyScreen
				onApiKeySaved={(key) => {
					setApiKey(key);
					setApiKeySaved(true);
				}}
			/>
		);
	}

	return (
			<Drawer.Navigator
				initialRouteName="home"
				drawerContent={props => <CustomDrawerContent {...props} onLogout={handleLogout} />}
				screenOptions={{
					headerStyle: { backgroundColor: '#222' },
					headerTintColor: '#fff',
					drawerStyle: { backgroundColor: '#333', width: 240 },
					drawerActiveTintColor: '#fff',
					drawerInactiveTintColor: '#ccc',
					drawerLabelStyle: { textAlign: 'center', fontSize: 16 },
				}}
			>
				{categories.map(c => (
					<Drawer.Screen key={c.key} name={c.key} options={{ title: c.label }}>
				{() => (
			<	CategoryScreen 
					category={c.key} 
					notifications={notifications} 
					registered={registered} 
					registrationError={registrationError} 
		/>
	)}
</Drawer.Screen>
				))}
			</Drawer.Navigator>
	);
}