<script>
	import { onMount } from 'svelte';
	import OrderCard from '$lib/component/OrderCard.svelte';
	import HistoricModal from '$lib/component/HistoricModal.svelte';

	let pedidos = [];

	let mostrarHistorico = false;

	const abrirHistorico = () => {
		mostrarHistorico = true;
	};

	const fecharHistorico = () => {
		mostrarHistorico = false;
	};

	// Marca pedido como concluído (vai para o histórico)
	function handlePedidoPronto(event) {
		const pedidoAtualizado = event.detail;
		pedidos = pedidos.map((pedido) =>
			pedido.mesa === pedidoAtualizado.mesa ? { ...pedido, status: 'concluido' } : pedido
		);
	}

	// Volta pedido do histórico para andamento (volta pra lista)
	function handleVoltarAndamento(event) {
		const pedidoAlvo = event.detail;
		pedidos = pedidos.map((pedido) =>
			pedido.mesa === pedidoAlvo.mesa ? { ...pedido, status: 'andamento' } : pedido
		);
	}

	// ⚡ Carrega pedidos do "backend"
	onMount(async () => {
		try {
			const response = await fetch('https://counter.mixtech.dev.br/dashboard/kitchen');
			const data = await response.json();
			pedidos = data;
		} catch (error) {
			console.error('Erro ao carregar pedidos:', error);

			// Fallback local caso falhe
			pedidos = [
				{ mesa: '01', itens: ['Coca', 'X-Burguer'], status: 'pendente' },
				{ mesa: '02', itens: ['Água', 'Batata'], status: 'andamento' },
				{ mesa: '03', itens: ['Cerveja', 'Sopa'], status: 'pendente' },
				{ mesa: '04', itens: ['Suco', 'Lasanha'], status: 'concluido' }
			];
		}
	});

	// Lista apenas pedidos não concluídos
	$: pedidosAtivos = pedidos.filter((p) => p.status !== 'concluido');

	// Lista de pedidos concluídos para o histórico
	$: pedidosConcluidos = pedidos.filter((p) => p.status === 'concluido');
</script>

<main class="relative rounded-md bg-gray-800 p-4 text-white">
	<!-- Botão para abrir histórico -->
	<div class="absolute right-4 top-4">
		<button class="text-md rounded-md bg-yellow-600 p-1 text-black" on:click={abrirHistorico}>
			Ver histórico
		</button>
	</div>

	<!-- Lista de pedidos ativos -->
	<div class="mt-10 space-y-4">
		{#each pedidosAtivos as pedido (pedido.mesa)}
			<OrderCard {pedido} on:pedidoPronto={handlePedidoPronto} />
		{/each}
	</div>

	<!-- Modal de histórico -->
	{#if mostrarHistorico}
		<HistoricModal
			pedidos={pedidosConcluidos}
			on:close={fecharHistorico}
			on:voltarAndamento={handleVoltarAndamento}
		/>
	{/if}
</main>
