import React, { memo, useState } from 'react';
import { LayoutChangeEvent, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Feather } from '@expo/vector-icons';
import { setAudioModeAsync, useAudioPlayer, useAudioPlayerStatus } from 'expo-audio';
import { G, R } from '../../constants/visits.theme';
import { formatElapsedTime } from '../../utils/visits.helpers';

type AudioPlayerBarProps = {
  uri: string | null;
  fallbackDuration?: number;
  onRemove?: () => void;
};

/** Lecteur audio Material : lecture/pause, barre de progression cliquable, réécoute illimitée. */
const AudioPlayerBar = ({ uri, fallbackDuration = 0, onRemove }: AudioPlayerBarProps) => {
  const player = useAudioPlayer(uri);
  const status = useAudioPlayerStatus(player);
  const [barWidth, setBarWidth] = useState(1);

  const duration = status.duration > 0 ? status.duration : fallbackDuration;
  const current = Math.min(status.currentTime ?? 0, duration || 0);
  const progress = duration > 0 ? current / duration : 0;

  const togglePlay = async () => {
    if (status.playing) {
      player.pause();
      return;
    }

    try {
      // lecture sur haut-parleur, même en mode silencieux iOS, micro désactivé
      await setAudioModeAsync({ allowsRecording: false, playsInSilentMode: true });
    } catch (error) {
      console.warn('audio mode error:', error);
    }

    // fin atteinte : on repart du début → réécoute possible autant de fois que voulu
    if (duration > 0 && current >= duration - 0.2) {
      player.seekTo(0);
    }
    player.play();
  };

  const onSeek = (x: number) => {
    if (!duration) return;
    player.seekTo(Math.max(0, Math.min(duration, (x / barWidth) * duration)));
  };

  const onLayout = (e: LayoutChangeEvent) => setBarWidth(e.nativeEvent.layout.width || 1);

  return (
    <View style={styles.card}>
      <TouchableOpacity style={styles.playBtn} onPress={togglePlay} accessibilityLabel="Lecture / pause">
        <Feather name={status.playing ? 'pause' : 'play'} size={20} color="#FFF" />
      </TouchableOpacity>

      <View style={styles.middle}>
        <TouchableOpacity
          activeOpacity={1}
          onLayout={onLayout}
          onPress={(e) => onSeek(e.nativeEvent.locationX)}
          style={styles.barHit}
        >
          <View style={styles.track}>
            <View style={[styles.fill, { width: `${progress * 100}%` }]} />
          </View>
          <View style={[styles.thumb, { left: `${progress * 100}%` }]} />
        </TouchableOpacity>

        <View style={styles.times}>
          <Text style={styles.time}>{formatElapsedTime(Math.floor(current))}</Text>
          <Text style={styles.time}>{formatElapsedTime(Math.floor(duration))}</Text>
        </View>
      </View>

      <TouchableOpacity onPress={() => player.seekTo(0)} style={styles.iconBtn} accessibilityLabel="Recommencer">
        <Feather name="rotate-ccw" size={18} color={G.textSecondary} />
      </TouchableOpacity>

      {onRemove && (
        <TouchableOpacity onPress={onRemove} style={styles.iconBtn} accessibilityLabel="Supprimer l'audio">
          <Feather name="trash-2" size={18} color={G.error} />
        </TouchableOpacity>
      )}
    </View>
  );
};

export default memo(AudioPlayerBar);

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: G.primaryContainer,
    borderRadius: R.lg,
    padding: 10,
    marginTop: 12,
  },
  playBtn: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: G.primary,
    alignItems: 'center',
    justifyContent: 'center',
  },
  middle: { flex: 1, marginHorizontal: 12 },
  barHit: { height: 24, justifyContent: 'center' },
  track: { height: 4, borderRadius: 2, backgroundColor: '#C2D7FA', overflow: 'hidden' },
  fill: { height: 4, backgroundColor: G.primary },
  thumb: {
    position: 'absolute',
    width: 12,
    height: 12,
    marginLeft: -6,
    borderRadius: 6,
    backgroundColor: G.primary,
  },
  times: { flexDirection: 'row', justifyContent: 'space-between' },
  time: { fontSize: 11, color: G.textSecondary },
  iconBtn: { padding: 8 },
});