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

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

  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>
          <Text className="text-xl font-semibold text-music-text">SharePlay</Text>
          <View className="w-10" />
        </View>
      </ScrollView>

      <View className="bg-music-card rounded-t-2xl p-4 mx-4">
        <View className="w-12 h-1 bg-music-border rounded-full mx-auto mb-4" />
        <View className="flex-row items-center justify-between mb-3">
          <Text className="text-music-accent">📢</Text>
          <View className="flex-row items-center gap-1">
            <Text className="text-music-muted">👤</Text>
            <Text className="text-sm text-music-muted">1</Text>
          </View>
        </View>
        <Text className="text-xs text-music-muted mb-1">Currently Playing</Text>
        <View className="flex-row items-center gap-3 mb-3">
          <View className="w-12 h-12 rounded-full bg-music-vinyl" />
          <View>
            <Text className="font-medium text-sm text-music-text">{currentSong?.title || 'No song'}</Text>
            <Text className="text-xs text-music-muted">{currentSong?.artist}</Text>
          </View>
        </View>
        <View className="flex-row items-center justify-center gap-4">
          <Text className="text-music-muted">⏮️</Text>
          <Text className="text-music-muted">⏪</Text>
          <TouchableOpacity onPress={togglePlay}>
            <Text className="text-music-accent text-2xl">{isPlaying ? '⏸' : '▶️'}</Text>
          </TouchableOpacity>
          <Text className="text-music-muted">⏩</Text>
          <Text className="text-music-muted">⏭️</Text>
        </View>
        <View className="mt-3 pt-3 border-t border-music-border">
          <Text className="text-xs text-music-muted">Up Next</Text>
        </View>
        <TouchableOpacity className="mt-3 py-2 rounded-full bg-music-dark items-center">
          <Text className="text-music-text text-sm flex-row">➕ Add Song to Cue</Text>
        </TouchableOpacity>
      </View>
      <BottomNavBar />
    </View>
  )
}