<script>
	export let pedidos = [];
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();

	const fechar = () => dispatch('close');

	function voltarParaAndamento(id) {
		dispatch('voltarAndamento', id);
	}
</script>

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60">
	<div class="max-h-[80vh] w-96 overflow-auto rounded-md bg-gray-700 p-6 text-white">
		<div class="mb-4 flex items-center justify-between">
			<h2 class="text-lg font-bold">Histórico de Itens Prontos</h2>
			<button on:click={fechar} class="text-xl font-bold text-red-600" aria-label="Fechar modal"
				>X</button
			>
		</div>

		{#if pedidos.length === 0}
			<p class="text-gray-400">Nenhum item pronto ainda.</p>
		{:else}
			{#each pedidos as pedido (pedido.id)}
				<div class="mb-4 border-b border-gray-300 pb-2">
					<p><strong>Mesa:</strong> {pedido.mesa}</p>
					<p><strong>Comanda:</strong> {pedido.comanda_nome}</p>

					<div class="mt-2">
						<strong>Itens prontos:</strong>
						<ul class="list-inside list-disc">
							{#each pedido.items as item}
								<li class="flex items-center justify-between">
									<div>
										{item.nome}
										{#if item.observacao}
											<span class="italic text-yellow-300"> — {item.observacao}</span>
										{/if}
									</div>
									<button
										class="ml-4 rounded bg-blue-600 px-2 py-1 text-sm hover:bg-blue-500"
										on:click={() => voltarParaAndamento(item.id)}
									>
										Voltar
									</button>
								</li>
							{/each}
						</ul>
					</div>
				</div>
			{/each}
		{/if}
	</div>
</div>
