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

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

type Category = "home" | "royal-road" | "podcasts" | "mixtapes";

export default function HomeScreen() {
	const [data, setData] = useState<Item[]>([]);
	const [selected, setSelected] = useState<Category>("home");
	const [menuOpen, setMenuOpen] = useState(false);

	// Register push notifications
	usePushNotifications({
		userId: 1,
		apiKey: "super-secret-api-key",
		backendUrl: API_URL,
		appVersion: "1.0.0",
		locale: "en-uk",
	});

	// Load saved notifications on startup
	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 => {
			// Try to extract category from push payload
			const rawCategory = notification.request.content.data?.category as Category | undefined;
			const category: Category = rawCategory && ["royal-road", "podcasts", "mixtapes"].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)); // persist
				return updated;
			});
		});

		return () => subscription.remove();
	}, []);

	// Filtered view: home shows everything
	const filteredData = selected === "home" ? data : data.filter(item => item.category === selected);

	const menuItems: { label: string; key: Category }[] = [
		{ label: "Home", key: "home" },
		{ label: "Royal Road", key: "royal-road" },
		{ label: "Podcasts", key: "podcasts" },
		{ label: "Mixtapes", key: "mixtapes" },
	];

	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}>
					{selected === "home" && "Welcome to Home!"}
					{selected === "royal-road" && "Royal Road Updates"}
					{selected === "podcasts" && "Latest Podcasts"}
					{selected === "mixtapes" && "New Mixtapes"}
				</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>
	);
}