/**
 * PlayerControls — Play/Pause/Stop/Skip/Mute control bar
 * F-072: Mute toggle accessible in 1 tap
 * F-074: Pause button (centred, accessible)
 * F-075: Quit button (DangerButton, confirmation required)
 */

import React, { useCallback } from 'react'
import { View, StyleSheet, Alert } from 'react-native'
import { useTranslation } from 'react-i18next'

import { ControlButton } from './ControlButton'
import { SPACING } from '@/src/shared/constants/spacing'

interface PlayerControlsProps {
  isRunning: boolean
  isPaused: boolean
  isMuted?: boolean
  onStart: () => void
  onPause: () => void
  onResume: () => void
  onStop: () => void
  onSkip: () => void
  onToggleMute?: () => void
}

export function PlayerControls({
  isRunning,
  isPaused,
  isMuted = false,
  onStart,
  onPause,
  onResume,
  onStop,
  onSkip,
  onToggleMute,
}: PlayerControlsProps) {
  const { t } = useTranslation()

  const handleQuit = useCallback(() => {
    Alert.alert(
      t('screens:player.quitTitle'),
      t('screens:player.quitMessage'),
      [
        { text: t('screens:player.quitCancel'), style: 'cancel' },
        { text: t('screens:player.quitConfirm'), style: 'destructive', onPress: onStop },
      ],
    )
  }, [onStop, t])

  if (!isRunning) {
    return (
      <View style={styles.container}>
        <ControlButton icon="play.fill" onPress={onStart} size={80} />
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <ControlButton
          icon="xmark"
          onPress={handleQuit}
          size={48}
          variant="danger"
        />
        {onToggleMute && (
          <ControlButton
            icon={isMuted ? 'speaker.slash.fill' : 'speaker.wave.2.fill'}
            onPress={onToggleMute}
            size={48}
            variant="secondary"
          />
        )}
        <ControlButton
          icon={isPaused ? 'play.fill' : 'pause.fill'}
          onPress={isPaused ? onResume : onPause}
          size={80}
        />
        <ControlButton
          icon="forward.end.fill"
          onPress={onSkip}
          size={48}
          variant="secondary"
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: SPACING[4],
  },
})
