<script lang="ts">
	import {
		Mic,
		MicOff,
		Video,
		VideoOff,
		Radio,
		Square,
		Settings,
		PhoneOff,
		Circle
	} from 'lucide-svelte';

	interface Props {
		audioHabilitado: boolean;
		videoHabilitado: boolean;
		gravando: boolean;
		ehAnfitriao: boolean;
		duracaoSegundos: number;
		onToggleAudio: () => void;
		onToggleVideo: () => void;
		onIniciarGravacao: () => void;
		onPararGravacao: () => void;
		onAbrirConfiguracoes: () => void;
		onEncerrar: () => void;
	}

	let {
		audioHabilitado,
		videoHabilitado,
		gravando,
		ehAnfitriao,
		duracaoSegundos,
		onToggleAudio,
		onToggleVideo,
		onIniciarGravacao,
		onPararGravacao,
		onAbrirConfiguracoes,
		onEncerrar
	}: Props = $props();

	// Formatar duração para HH:MM:SS
	function formatarDuracao(segundos: number): string {
		const horas = Math.floor(segundos / 3600);
		const minutos = Math.floor((segundos % 3600) / 60);
		const segs = segundos % 60;

		if (horas > 0) {
			return `${horas.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')}:${segs.toString().padStart(2, '0')}`;
		}
		return `${minutos.toString().padStart(2, '0')}:${segs.toString().padStart(2, '0')}`;
	}

	const duracaoFormatada = $derived(formatarDuracao(duracaoSegundos));
</script>

<div class="bg-base-200 flex items-center justify-between gap-2 px-4 py-3">
	<!-- Contador de duração -->
	<div class="text-base-content flex items-center gap-2 font-mono text-sm">
		<Circle class="text-error h-2 w-2 fill-current" />
		<span>{duracaoFormatada}</span>
	</div>

	<!-- Controles principais -->
	<div class="flex items-center gap-2">
		<!-- Toggle Áudio -->
		<button
			type="button"
			class="btn btn-circle btn-sm"
			class:btn-primary={audioHabilitado}
			class:btn-error={!audioHabilitado}
			onclick={onToggleAudio}
			title={audioHabilitado ? 'Desabilitar áudio' : 'Habilitar áudio'}
			aria-label={audioHabilitado ? 'Desabilitar áudio' : 'Habilitar áudio'}
		>
			{#if audioHabilitado}
				<Mic class="h-4 w-4" />
			{:else}
				<MicOff class="h-4 w-4" />
			{/if}
		</button>

		<!-- Toggle Vídeo -->
		<button
			type="button"
			class="btn btn-circle btn-sm"
			class:btn-primary={videoHabilitado}
			class:btn-error={!videoHabilitado}
			onclick={onToggleVideo}
			title={videoHabilitado ? 'Desabilitar vídeo' : 'Habilitar vídeo'}
			aria-label={videoHabilitado ? 'Desabilitar vídeo' : 'Habilitar vídeo'}
		>
			{#if videoHabilitado}
				<Video class="h-4 w-4" />
			{:else}
				<VideoOff class="h-4 w-4" />
			{/if}
		</button>

		<!-- Gravação (apenas anfitrião) -->
		{#if ehAnfitriao}
			<button
				type="button"
				class="btn btn-circle btn-sm"
				class:btn-primary={!gravando}
				class:btn-error={gravando}
				onclick={gravando ? onPararGravacao : onIniciarGravacao}
				title={gravando ? 'Parar gravação' : 'Iniciar gravação'}
				aria-label={gravando ? 'Parar gravação' : 'Iniciar gravação'}
			>
				{#if gravando}
					<Square class="h-4 w-4" />
				{:else}
					<Radio class="h-4 w-4 fill-current" />
				{/if}
			</button>
		{/if}

		<!-- Configurações -->
		<button
			type="button"
			class="btn btn-circle btn-sm btn-ghost"
			onclick={onAbrirConfiguracoes}
			title="Configurações"
			aria-label="Configurações"
		>
			<Settings class="h-4 w-4" />
		</button>

		<!-- Encerrar chamada -->
		<button
			type="button"
			class="btn btn-circle btn-sm btn-error"
			onclick={onEncerrar}
			title="Encerrar chamada"
			aria-label="Encerrar chamada"
		>
			<PhoneOff class="h-4 w-4" />
		</button>
	</div>
</div>
