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

const MOODS = [
  { id: 'sad', name: 'Sad', color: '#1a2a4a' },
  { id: 'happy', name: 'Happy', color: '#f5c542' },
  { id: 'energetic', name: 'Energetic', color: '#e63946' },
  { id: 'focused', name: 'Focused', color: '#2d6a4f' },
  { id: 'chill', name: 'Chill', color: '#48957e' },
  { id: 'romantic', name: 'Romantic', color: '#bc6a7e' },
  { id: 'angry', name: 'Angry', color: '#9d0208' },
  { id: 'nostalgic', name: 'Nostalgic', color: '#a67c52' },
  { id: 'melancholy', name: 'Melancholy', color: '#5a189c' },
  { id: 'dreamy', name: 'Dreamy', color: '#9b5de5' },
]

export default function MoodScreen() {
  const [activeMood, setActiveMood] = useState(MOODS[0])
  const isPlaying = usePlayerStore(s => s.isPlaying)
  const togglePlay = usePlayerStore(s => s.togglePlay)

  return (
    <View className="flex-1 justify-between py-8 px-6" style={{ backgroundColor: activeMood.color + '20' }}>
      <View className="flex-row items-center justify-between">
        <View className="w-10" />
        <Text className="text-xl font-semibold text-music-text">Mood Radio</Text>
        <View className="w-10" />
      </View>

      <View className="items-center">
        <View className="w-48 h-48 rounded-full items-center justify-center" style={{ backgroundColor: activeMood.color + '40' }}>
          <Text className="text-6xl">🎵</Text>
        </View>
        <Text className="text-2xl font-semibold text-music-text mt-6">{activeMood.name}</Text>
      </View>

      <View className="items-center gap-3">
        <Text className="text-xs text-music-muted uppercase tracking-wider">Currently Playing</Text>
        <Text className="text-music-muted text-xl">⬆️</Text>
        <TouchableOpacity
          onPress={() => setActiveMood(MOODS[Math.floor(Math.random() * MOODS.length)])}
          className="px-8 py-3 rounded-full bg-music-card"
        >
          <Text className="text-sm font-medium text-music-text">Set the Mood</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}