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

const SONGS = [
  { id: '1', title: 'Song One', duration: 234 },
  { id: '2', title: 'Song Two', duration: 198 },
  { id: '3', title: 'Song Three', duration: 267 },
  { id: '4', title: 'Song Four', duration: 312 },
  { id: '5', title: 'Song Five', duration: 189 },
]

const PLAYLISTS = [
  { id: '1', name: 'Chill Vibes' },
  { id: '2', name: 'Workout' },
  { id: '3', name: 'Road Trip' },
  { id: '4', name: 'Late Night' },
  { id: '5', name: 'Focus' },
]

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

  return (
    <View className="flex-1 bg-music-black flex-row">
      <View className="w-20 bg-music-dark border-r border-music-border items-center py-4 gap-3">
        <TouchableOpacity onPress={() => router.push('/library' as any)}>
          <Text className="text-music-muted text-xl">←</Text>
        </TouchableOpacity>
        {PLAYLISTS.map((pl, i) => (
          <TouchableOpacity key={pl.id} className={`w-14 h-14 rounded-lg bg-music-card ${i === 0 ? 'border-2 border-music-accent' : ''}`} />
        ))}
        <View className="flex-1 w-1 bg-music-border rounded-full relative">
          <View className="absolute bottom-0 w-full bg-music-accent rounded-full" style={{ height: '35%' }} />
        </View>
        <Text className="text-music-muted text-sm">⭐</Text>
        <TouchableOpacity onPress={togglePlay}>
          <Text className="text-music-accent text-xl">{isPlaying ? '⏸' : '▶️'}</Text>
        </TouchableOpacity>
      </View>

      <ScrollView className="flex-1 px-6 py-4">
        <View className="flex-row items-center justify-between mb-4">
          <Text className="text-2xl font-semibold text-music-text">Chill Vibes</Text>
          <Text className="text-music-muted">📢</Text>
        </View>
        <View className="w-48 h-48 rounded-xl bg-music-card mb-6" />
        {SONGS.map((song) => (
          <View key={song.id} className="flex-row items-center gap-3 py-2">
            <View className="w-8 h-8 rounded-full bg-music-vinyl" />
            <Text className="flex-1 text-sm text-music-text">{song.title}</Text>
            <Text className="text-xs text-music-muted">{Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  )
}