import {
	Microphone,
	MicrophoneSlash,
	SpeakerHigh,
	SpeakerSlash,
	VideoCamera,
	VideoCameraSlash,
	Monitor,
	MonitorPlay,
	PhoneDisconnect,
} from '@phosphor-icons/react';
import { useVoice } from '../../contexts/VoiceContext';
import styles from './VoiceControlBar.module.css';

export function VoiceControlBar() {
	const voice = useVoice() as any;

	const isMuted = !!voice?.isMuted;
	const isDeafened = !!voice?.isDeafened;
	const isScreenSharing = !!voice?.isScreenSharing;
	const cameraOn = !!voice?.isCameraOn;

	const handleMute = () => {
		void voice?.toggleMute?.();
	};
	const handleDeafen = () => {
		void voice?.toggleDeafen?.();
	};
	const handleCamera = () => {
		void voice?.toggleCamera?.();
	};
	const handleScreenShare = () => {
		void voice?.setScreenSharing?.(!isScreenSharing);
	};
	const handleDisconnect = () => {
		void voice?.disconnectVoice?.();
	};

	return (
		<div className={styles.container}>
			{/* Microphone */}
			<button
				type="button"
				className={`${styles.button} ${isMuted ? styles.buttonMuted : styles.buttonUnmuted}`}
				onClick={handleMute}
				aria-label={isMuted ? 'Unmute' : 'Mute'}
			>
				{isMuted ? (
					<MicrophoneSlash className={styles.icon} weight="fill" />
				) : (
					<Microphone className={styles.icon} weight="fill" />
				)}
			</button>

			{/* Deafen */}
			<button
				type="button"
				className={`${styles.button} ${isDeafened ? styles.buttonMuted : styles.buttonUnmuted}`}
				onClick={handleDeafen}
				aria-label={isDeafened ? 'Undeafen' : 'Deafen'}
			>
				{isDeafened ? (
					<SpeakerSlash className={styles.icon} weight="fill" />
				) : (
					<SpeakerHigh className={styles.icon} weight="fill" />
				)}
			</button>

			{/* Camera (stub) */}
			<button
				type="button"
				className={`${styles.button} ${cameraOn ? styles.buttonCameraOn : styles.buttonUnmuted}`}
				onClick={handleCamera}
				aria-label={cameraOn ? 'Disable camera' : 'Enable camera'}
			>
				{cameraOn ? (
					<VideoCamera className={styles.icon} weight="fill" />
				) : (
					<VideoCameraSlash className={styles.icon} weight="fill" />
				)}
			</button>

			{/* Screen share */}
			<button
				type="button"
				className={`${styles.button} ${isScreenSharing ? styles.buttonScreenShareOn : styles.buttonUnmuted}`}
				onClick={handleScreenShare}
				aria-label={isScreenSharing ? 'Stop sharing screen' : 'Share screen'}
			>
				{isScreenSharing ? (
					<Monitor className={styles.icon} weight="fill" />
				) : (
					<MonitorPlay className={styles.icon} weight="fill" />
				)}
			</button>

			{/* Disconnect */}
			<button
				type="button"
				className={`${styles.button} ${styles.buttonDisconnect}`}
				onClick={handleDisconnect}
				aria-label="Disconnect"
			>
				<PhoneDisconnect className={styles.icon} weight="fill" />
			</button>
		</div>
	);
}
