import { TouchableOpacity, StyleSheet } from "react-native";
import { Tabs, router } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

function HeaderProfileButton() {
  return (
    <TouchableOpacity
      onPress={() => router.push("/settings")}
      style={styles.headerBtn}
      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
    >
      <Ionicons name="person-circle-outline" size={26} color="#FFF" />
    </TouchableOpacity>
  );
}

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "#1DB954", // Spotify Green Accent
        tabBarInactiveTintColor: "#888",
        tabBarStyle: { backgroundColor: "#121212", borderTopColor: "#222" },
        headerStyle: { backgroundColor: "#121212" },
        headerTitleStyle: { color: "#FFF" },
        headerRight: () => <HeaderProfileButton />,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Downloads",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="cloud-download-outline" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="player"
        options={{
          title: "Player",
          // Reverted from the earlier elevated/floating center-button
          // treatment — it visually collided with the global mini-player
          // bar that now floats above the tab bar on every screen. Back to
          // a plain tab icon, same as Downloads/Playlists.
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="play-circle-outline" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="playlists"
        options={{
          title: "Playlists",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="albums-outline" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  headerBtn: { marginRight: 16 },
});