import React from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { usePlaybackState, useProgress, State } from 'react-native-track-player';
import { Ionicons } from '@expo/vector-icons';
import { useStore } from '../store';
import { togglePlayPause, skipNext } from '../audio/player';

export default function PlayerBar() {
  const navigation    = useNavigation();
  const { currentTrack, isPlaying } = useStore();
  const playbackState = usePlaybackState();
  const { position, duration } = useProgress(500);

  if (!currentTrack) return null;

  const playing = playbackState.state === State.Playing;
  const progress = duration > 0 ? position / duration : 0;

  return (
    <TouchableOpacity
      style={styles.container}
      activeOpacity={0.9}
      onPress={() => navigation.navigate('NowPlaying')}
    >
      {/* Progress bar at top */}
      <View style={styles.progressTrack}>
        <View style={[styles.progressFill, { width: `${progress * 100}%` }]} />
      </View>

      <View style={styles.row}>
        {currentTrack.coverArt ? (
          <Image
            source={{ uri: currentTrack.artwork }}
            style={styles.art}
          />
        ) : (
          <View style={[styles.art, styles.artFallback]}>
            <Ionicons name="musical-note" size={18} color="#888" />
          </View>
        )}

        <View style={styles.info}>
          <Text style={styles.title} numberOfLines={1}>{currentTrack.title}</Text>
          <Text style={styles.artist} numberOfLines={1}>{currentTrack.artist}</Text>
        </View>

        <TouchableOpacity style={styles.btn} onPress={togglePlayPause}>
          <Ionicons
            name={playing ? 'pause' : 'play'}
            size={24}
            color="#fff"
          />
        </TouchableOpacity>
        <TouchableOpacity style={styles.btn} onPress={skipNext}>
          <Ionicons name="play-skip-forward" size={22} color="#fff" />
        </TouchableOpacity>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#1e1e1e',
    borderTopWidth: 1,
    borderTopColor: '#2a2a2a',
  },
  progressTrack: {
    height: 2,
    backgroundColor: '#333',
  },
  progressFill: {
    height: 2,
    backgroundColor: '#1db954',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
    gap: 10,
  },
  art: {
    width: 44,
    height: 44,
    borderRadius: 4,
  },
  artFallback: {
    backgroundColor: '#2a2a2a',
    alignItems: 'center',
    justifyContent: 'center',
  },
  info: {
    flex: 1,
  },
  title: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
  artist: {
    color: '#aaa',
    fontSize: 12,
    marginTop: 2,
  },
  btn: {
    padding: 6,
  },
});