/**
 * NowPlaying — Floating pill showing current music track
 * Solid navy background, animated entrance, skip button
 */

import React, { useRef, useEffect } from 'react'
import { View, Text, Pressable, StyleSheet, Animated } from 'react-native'

import { Icon } from '@/src/shared/components/Icon'
import { TYPOGRAPHY, FONT_FAMILY_SANS_SEMIBOLD } from '@/src/shared/constants/typography'
import { SPACING } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { SPRING } from '@/src/shared/constants/animations'
import { GREEN, NAVY, BORDER_COLORS, TEXT } from '@/src/shared/constants/colors'
import { darkColors } from '@/src/shared/theme'
import type { MusicTrack } from '@/src/shared/services/music'

interface NowPlayingProps {
  track: MusicTrack | null
  isReady: boolean
  onSkipTrack: () => void
}

export function NowPlaying({ track, isReady, onSkipTrack }: NowPlayingProps) {
  const colors = darkColors
  const slideAnim = useRef(new Animated.Value(40)).current
  const opacityAnim = useRef(new Animated.Value(0)).current

  useEffect(() => {
    if (track && isReady) {
      Animated.parallel([
        Animated.spring(slideAnim, {
          toValue: 0,
          ...SPRING.SNAPPY,
          useNativeDriver: true,
        }),
        Animated.timing(opacityAnim, {
          toValue: 1,
          duration: 300,
          useNativeDriver: true,
        }),
      ]).start()
    } else {
      Animated.parallel([
        Animated.timing(slideAnim, {
          toValue: 40,
          duration: 200,
          useNativeDriver: true,
        }),
        Animated.timing(opacityAnim, {
          toValue: 0,
          duration: 200,
          useNativeDriver: true,
        }),
      ]).start()
    }
  }, [track?.id, isReady])

  if (!track) return null

  return (
    <Animated.View
      style={[
        styles.container,
        {
          opacity: opacityAnim,
          transform: [{ translateY: slideAnim }],
        },
      ]}
    >
      <View style={styles.iconContainer}>
        <Icon name="music.note" size={16} tintColor={GREEN[500]} />
      </View>
      <View style={styles.info}>
        <Text numberOfLines={1} style={[styles.title, { color: colors.text.primary }]}>
          {track.title}
        </Text>
        <Text numberOfLines={1} style={[styles.artist, { color: colors.text.tertiary }]}>
          {track.artist}
        </Text>
      </View>
      <Pressable
        onPress={onSkipTrack}
        hitSlop={12}
        style={styles.skipButton}
      >
        <Icon name="forward.fill" size={14} tintColor={colors.text.secondary} />
      </Pressable>
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: RADIUS.FULL,
    borderCurve: 'continuous',
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: BORDER_COLORS.DIM,
    backgroundColor: NAVY[800],
    paddingVertical: SPACING[2],
    paddingHorizontal: SPACING[3],
    gap: SPACING[2],
  },
  iconContainer: {
    width: 28,
    height: 28,
    borderRadius: RADIUS.LG,
    backgroundColor: GREEN.DIM,
    alignItems: 'center',
    justifyContent: 'center',
  },
  info: {
    flex: 1,
  },
  title: {
    ...TYPOGRAPHY.CAPTION_1,
    fontFamily: FONT_FAMILY_SANS_SEMIBOLD,
  },
  artist: {
    ...TYPOGRAPHY.CAPTION_2,
  },
  skipButton: {
    width: 32,
    height: 32,
    alignItems: 'center',
    justifyContent: 'center',
  },
})
