<script lang="ts">
	import { Mic, MicOff, Video, VideoOff, User, Shield } from 'lucide-svelte';
	import UserAvatar from '../chat/UserAvatar.svelte';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';

	interface ParticipanteHost {
		usuarioId: Id<'usuarios'>;
		nome: string;
		avatar?: string;
		audioHabilitado: boolean;
		videoHabilitado: boolean;
		forcadoPeloAnfitriao?: boolean;
	}

	interface Props {
		participantes: ParticipanteHost[];
		onToggleParticipanteAudio: (usuarioId: Id<'usuarios'>) => void;
		onToggleParticipanteVideo: (usuarioId: Id<'usuarios'>) => void;
	}

	let { participantes, onToggleParticipanteAudio, onToggleParticipanteVideo }: Props = $props();
</script>

<div class="bg-base-200 border-base-300 flex flex-col border-t">
	<div class="bg-base-300 border-base-300 flex items-center gap-2 border-b px-4 py-2">
		<Shield class="text-primary h-4 w-4" />
		<span class="text-base-content text-sm font-semibold">Controles do Anfitrião</span>
	</div>

	<div class="max-h-64 space-y-2 overflow-y-auto p-4">
		{#if participantes.length === 0}
			<div class="text-base-content/70 flex items-center justify-center py-8 text-sm">
				Nenhum participante na chamada
			</div>
		{:else}
			{#each participantes as participante}
				<div
					class="bg-base-100 flex items-center justify-between rounded-lg p-3 shadow-sm"
				>
					<!-- Informações do participante -->
					<div class="flex items-center gap-3">
						<UserAvatar usuarioId={participante.usuarioId} avatar={participante.avatar} />
						<div class="flex flex-col">
							<span class="text-base-content text-sm font-medium">
								{participante.nome}
							</span>
							{#if participante.forcadoPeloAnfitriao}
								<span class="text-base-content/60 text-xs">
									Controlado pelo anfitrião
								</span>
							{/if}
						</div>
					</div>

					<!-- Controles do participante -->
					<div class="flex items-center gap-2">
						<!-- Toggle Áudio -->
						<button
							type="button"
							class="btn btn-circle btn-xs"
							class:btn-primary={participante.audioHabilitado}
							class:btn-error={!participante.audioHabilitado}
							onclick={() => onToggleParticipanteAudio(participante.usuarioId)}
							title={
								participante.audioHabilitado
									? `Desabilitar áudio de ${participante.nome}`
									: `Habilitar áudio de ${participante.nome}`
							}
							aria-label={
								participante.audioHabilitado
									? `Desabilitar áudio de ${participante.nome}`
									: `Habilitar áudio de ${participante.nome}`
							}
						>
							{#if participante.audioHabilitado}
								<Mic class="h-3 w-3" />
							{:else}
								<MicOff class="h-3 w-3" />
							{/if}
						</button>

						<!-- Toggle Vídeo -->
						<button
							type="button"
							class="btn btn-circle btn-xs"
							class:btn-primary={participante.videoHabilitado}
							class:btn-error={!participante.videoHabilitado}
							onclick={() => onToggleParticipanteVideo(participante.usuarioId)}
							title={
								participante.videoHabilitado
									? `Desabilitar vídeo de ${participante.nome}`
									: `Habilitar vídeo de ${participante.nome}`
							}
							aria-label={
								participante.videoHabilitado
									? `Desabilitar vídeo de ${participante.nome}`
									: `Habilitar vídeo de ${participante.nome}`
							}
						>
							{#if participante.videoHabilitado}
								<Video class="h-3 w-3" />
							{:else}
								<VideoOff class="h-3 w-3" />
							{/if}
						</button>
					</div>
				</div>
			{/each}
		{/if}
	</div>
</div>


