import { View, Text, ScrollView, TouchableOpacity, TextInput } from 'react-native'
import { useRouter } from 'expo-router'
import { BottomNavBar } from '../src/components/BottomNavBar'
import { usePlayerStore } from '../src/store/playerStore'

export default function SearchScreen() {
  const router = useRouter()
  const currentSong = usePlayerStore(s => s.currentSong)
  const isPlaying = usePlayerStore(s => s.isPlaying)
  const togglePlay = usePlayerStore(s => s.togglePlay)

  const features = [
    { id: 'music', name: 'Music', icon: '🎵', route: '/library' },
    { id: 'new', name: 'New Music', icon: '✨', route: '/releases' },
    { id: 'events', name: 'Live Events', icon: '🎪', route: '/' },
    { id: 'radio', name: 'Internet Radio', icon: '📻', route: '/radio' },
    { id: 'mood', name: 'Mood Radio', icon: '😊', route: '/mood' },
  ]

  return (
    <View className="flex-1 bg-music-black">
      <ScrollView className="flex-1 px-4 pt-4">
        <View className="flex-row items-center justify-between mb-6">
          <TouchableOpacity onPress={() => router.push('/account' as any)} className="w-10 h-10 rounded-full bg-music-card items-center justify-center">
            <Text className="text-music-muted">👤</Text>
          </TouchableOpacity>
          <View className="w-10" />
          <View className="w-10" />
        </View>

        <View className="flex-row items-center bg-music-card rounded-full px-4 py-3 mb-6">
          <Text className="text-music-muted">🔍</Text>
          <TextInput placeholder="What music is calling to you?" placeholderTextColor="#888" className="text-sm text-music-text ml-2 flex-1" />
        </View>

        <View className="flex-wrap flex-row gap-3 mb-6">
          {features.map((f) => (
            <TouchableOpacity key={f.id} onPress={() => router.push(f.route as any)} className="flex-1 min-w-[30%] p-4 rounded-xl bg-music-card items-center">
              <Text className="text-2xl mb-1">{f.icon}</Text>
              <Text className="text-xs text-music-text">{f.name}</Text>
            </TouchableOpacity>
          ))}
        </View>

        <Text className="text-lg font-semibold text-music-text mb-3">Music Suggestions</Text>
        <View className="flex-wrap flex-row gap-3 mb-6">
          {[...Array(10)].map((_, i) => (
            <View key={i} className="w-[18%] aspect-square rounded-lg bg-music-card" />
          ))}
        </View>

        <Text className="text-lg font-semibold text-music-text mb-3">Your Library</Text>
        <View className="flex-wrap flex-row gap-4">
          {[1, 2, 3, 4].map((i) => (
            <View key={i}>
              <View className="w-20 h-20 rounded-lg bg-music-card" />
              <Text className="text-sm text-music-text mt-2">Playlist {i}</Text>
            </View>
          ))}
        </View>
      </ScrollView>

      {currentSong && (
        <View className="bg-music-card border-t border-music-border px-4 py-2 flex-row items-center justify-between">
          <View className="flex-row items-center gap-3">
            <View className="w-10 h-10 rounded-full bg-music-vinyl" />
            <View>
              <Text className="text-sm font-medium text-music-text">{currentSong.title}</Text>
              <Text className="text-xs text-music-muted">{currentSong.artist}</Text>
            </View>
          </View>
          <TouchableOpacity onPress={togglePlay}>
            <Text className="text-music-accent text-2xl">{isPlaying ? '⏸' : '▶️'}</Text>
          </TouchableOpacity>
        </View>
      )}
      <BottomNavBar />
    </View>
  )
}