import React, { useMemo } from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Pressable,
  Image,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import TrackRow from "../components/TrackRow";
import { useLibrary } from "../contexts/LibraryContext";
import { SafeAreaView } from "react-native-safe-area-context";
import Header from "../components/Header";

export default function HomeScreen() {
  const navigation = useNavigation();
  const { albums, likedTracks, toggleLike } = useLibrary();

  const homeLikedTracks = useMemo(() => likedTracks.slice(0, 5), [likedTracks]);

  return (
    <SafeAreaView style={styles.container}>
      <Header title="Home" showIcons={true}/>
      <Pressable onPress={() => navigation.navigate("LikedTracks")}>
        <Text style={styles.sectionTitle}>Liked tracks ➚</Text>
      </Pressable>

      {homeLikedTracks.map((track) => {
        const album = albums.find((a) => a.id === track.albumId);
        return (
          <TrackRow
            key={track.id}
            title={track.title}
            artist={track.artist ?? "Unknown artist"}
            duration={track.duration}
            cover={track.cover}
            showHeart={true}
            liked={track.liked}
            onToggleLike={() => toggleLike(track.albumId, track.id)}
            onPress={() => album && navigation.navigate("Album", { album })}
          />
        );
      })}

      <Text style={[styles.sectionTitle, { marginTop: 24 }]}>Albums</Text>

      <FlatList
        data={albums}
        keyExtractor={(item) => item.id}
        numColumns={2}
        columnWrapperStyle={styles.albumRow}
        contentContainerStyle={styles.albumList}
        renderItem={({ item }) => (
          <Pressable
            style={styles.albumItem}
            onPress={() => navigation.navigate("Album", { album: item })}
          >
            <Image source={item.cover} style={styles.cover} resizeMode="cover" />
          </Pressable>
        )}
        showsVerticalScrollIndicator={false}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    paddingTop: 24,
    paddingHorizontal: 16,
  },
  headerRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  headerActions: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  iconBtn: {
    padding: 2,
  },
  homeTitle: {
    color: "#ffffff",
    fontSize: 32,
    fontWeight: "700",
    marginBottom: 12,
  },
  sectionTitle: {
    color: "#ffffff",
    fontSize: 24,
    fontWeight: "700",
    marginBottom: 12,
  },
  albumList: {
    paddingBottom: 120,
  },
  albumRow: {
    justifyContent: "space-between",
    marginBottom: 12,
  },
  albumItem: {
    width: "48%",
    aspectRatio: 1,
    borderRadius: 8,
    overflow: "hidden",
    backgroundColor: "#222",
  },
  cover: {
    width: "100%",
    height: "100%",
  },
});