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 { useNotificationListener } from "../hooks/useNotificationListener";
import { usePushNotifications } from "../hooks/usePushNotifications";
import { styles } from "./HomeScreen.styles";

const API_URL = "http://167.86.73.246:8100";

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);
	const [lastNotification, setLastNotification] = useState<Notifications.Notification | null>(null);

	const expoPushToken = usePushNotifications({
		userId: 1,
		apiKey: "super-secret-api-key",
		backendUrl: API_URL,
		appVersion: "1.0.0",
		locale: "en-uk",
	});

	useNotificationListener(notification => {
		setLastNotification(notification);
	});

	useEffect(() => {
		async function fetchData() {
			try {
				const res = await fetch(`${API_URL}/`);
				const json = await res.json();
				setData(json.data);
			} catch (err) {
				console.error("Failed to fetch data:", err);
			}
		}
		fetchData();
	}, []);

	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.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>
	);
}