import React, { memo } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Feather } from '@expo/vector-icons';
import { G, R, cardShadow } from '../../constants/visits.theme';
import { formatElapsedTime } from '../../utils/visits.helpers';
import AudioPlayerBar from '../shared/AudioPlayerBar';

type VisitAudioRecorderProps = {
  audioUri: string | null;
  audioDuration: number;
  isRecording: boolean;
  isPaused: boolean;
  recordingSeconds: number;
  onStart: () => void;
  onPause: () => void;
  onResume: () => void;
  onStop: () => void;
  onRemove: () => void;
};

const VisitAudioRecorder = ({
  audioUri,
  audioDuration,
  isRecording,
  isPaused,
  recordingSeconds,
  onStart,
  onPause,
  onResume,
  onStop,
  onRemove,
}: VisitAudioRecorderProps) => {
  const active = isRecording || isPaused;

  return (
    <View style={styles.card}>
      <View style={styles.header}>
        <Feather name="mic" size={18} color={G.primary} />
        <Text style={styles.title}>Rapport audio</Text>
        <Text style={styles.optional}>facultatif</Text>
      </View>

      {active ? (
        <View style={styles.recordingBox}>
          <View style={[styles.dot, isPaused && { backgroundColor: G.warning }]} />
          <Text style={styles.recordingTime}>{formatElapsedTime(recordingSeconds)}</Text>
          <Text style={styles.recordingLabel}>{isPaused ? 'En pause' : 'Enregistrement…'}</Text>

          <View style={{ flex: 1 }} />

          <TouchableOpacity style={styles.roundBtn} onPress={isPaused ? onResume : onPause}>
            <Feather name={isPaused ? 'mic' : 'pause'} size={18} color={G.primary} />
          </TouchableOpacity>
          <TouchableOpacity style={[styles.roundBtn, styles.stopBtn]} onPress={onStop}>
            <Feather name="square" size={16} color="#FFF" />
          </TouchableOpacity>
        </View>
      ) : (
        <TouchableOpacity style={styles.outlinedBtn} onPress={onStart}>
          <Feather name="mic" size={18} color={G.primary} />
          <Text style={styles.outlinedText}>
            {audioUri ? 'Ré-enregistrer' : 'Enregistrer un message vocal'}
          </Text>
        </TouchableOpacity>
      )}

      {audioUri && !active && (
        <AudioPlayerBar uri={audioUri} fallbackDuration={audioDuration} onRemove={onRemove} />
      )}
    </View>
  );
};

export default memo(VisitAudioRecorder);

const styles = StyleSheet.create({
  card: {
    backgroundColor: G.surface,
    borderRadius: R.lg,
    padding: 16,
    marginTop: 16,
    ...cardShadow,
  },
  header: { flexDirection: 'row', alignItems: 'center' },
  title: { marginLeft: 8, fontSize: 16, fontWeight: '500', color: G.text },
  optional: { marginLeft: 8, fontSize: 12, color: G.textSecondary },
  outlinedBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: G.outline,
    borderRadius: R.pill,
    paddingVertical: 11,
    marginTop: 14,
  },
  outlinedText: { marginLeft: 8, color: G.primary, fontWeight: '500', fontSize: 14 },
  recordingBox: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: G.errorContainer,
    borderRadius: R.lg,
    padding: 10,
    marginTop: 14,
  },
  dot: { width: 10, height: 10, borderRadius: 5, backgroundColor: G.error, marginHorizontal: 6 },
  recordingTime: { fontSize: 16, fontWeight: '500', color: G.text, marginLeft: 4 },
  recordingLabel: { fontSize: 12, color: G.textSecondary, marginLeft: 8 },
  roundBtn: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#FFF',
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 8,
  },
  stopBtn: { backgroundColor: G.error },
});