import React, { useCallback, useMemo } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Slider from '../Slider'
import { Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
import {
  MAX_SYNC_OFFSET_MS,
  clampSyncOffsetMs,
  formatSyncOffsetMs,
  snapSyncOffsetMs,
} from '../../utils/playbackSync'

const clamp01 = (value) => Math.min(1, Math.max(0, Number(value) || 0))

const SyncOffsetSlider = ({
  valueMs = 0,
  onChange,
  disabled = false,
  title = 'Ajuster la synchro',
}) => {
  const safeValueMs = useMemo(() => snapSyncOffsetMs(valueMs), [valueMs])

  const progress = useMemo(() => {
    return clamp01((safeValueMs + MAX_SYNC_OFFSET_MS) / (MAX_SYNC_OFFSET_MS * 2))
  }, [safeValueMs])

  const handleChange = useCallback(
    (ratio) => {
      if (disabled || typeof onChange !== 'function') return
      const clampedRatio = clamp01(ratio)
      const rawValueMs = clampedRatio * (MAX_SYNC_OFFSET_MS * 2) - MAX_SYNC_OFFSET_MS
      onChange(snapSyncOffsetMs(rawValueMs))
    },
    [disabled, onChange]
  )

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.value}>{formatSyncOffsetMs(clampSyncOffsetMs(safeValueMs))}</Text>
      </View>
      <Text style={styles.caption}>Gauche = audio en avance. Droite = audio en retard.</Text>
      <Slider
        value="Audio en avance"
        maxValue="Audio en retard"
        progress={progress}
        seekEnabled={!disabled}
        onValueChange={handleChange}
        onSeek={handleChange}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    gap: 8,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 12,
  },
  title: {
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterSemiBold,
    fontSize: 15,
  },
  value: {
    color: '#F94697',
    fontFamily: FONT_FAMILY.InterSemiBold,
    fontSize: 15,
  },
  caption: {
    color: Palette.white,
    opacity: 0.8,
    fontFamily: FONT_FAMILY.InterRegular,
    fontSize: 12,
  },
})

export default SyncOffsetSlider