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

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

  // Dispara evento para o pedido específico voltar para andamento
  function voltarParaAndamento(pedido) {
    dispatch('voltarAndamento', pedido);
  }
</script>

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

    {#each pedidos as pedido (pedido.mesa)}
      <div class="mb-4 border-b border-gray-300 pb-2">
        <p><strong>Mesa:</strong> {pedido.mesa}</p>
        <p><strong>Status:</strong> {pedido.status}</p>
        <div class="mt-2">
          <strong>Itens:</strong>
          <ul class="list-disc list-inside">
            {#each pedido.itens as item}
              <li>{item}</li>
            {/each}
          </ul>
        </div>
        <!-- Botão voltar andamento individual -->
        {#if pedido.status !== 'andamento'}
          <button
            class="mt-2 bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded transition"
            on:click={() => voltarParaAndamento(pedido)}
          >
            Voltar para andamento
          </button>
        {/if}
      </div>
    {/each}

  </div>
</div>
