<script lang="ts">
	import { page } from '$app/stores';
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import { maskCurrencyBRL } from '$lib/utils/masks';
	import {
		Plus,
		Trash2,
		Send,
		CheckCircle,
		AlertTriangle,
		XCircle,
		Clock,
		Edit,
		Save,
		X
	} from 'lucide-svelte';

	const pedidoId = $page.params.id as Id<'pedidos'>;
	const client = useConvexClient();

	// Reactive queries
	const pedidoQuery = useQuery(api.pedidos.get, { id: pedidoId });
	const itemsQuery = useQuery(api.pedidos.getItems, { pedidoId });
	const historyQuery = useQuery(api.pedidos.getHistory, { pedidoId });
	const produtosQuery = useQuery(api.produtos.list, {});
	const acoesQuery = useQuery(api.acoes.list, {});

	// Derived state
	const pedido = $derived(pedidoQuery.data);
	const items = $derived(itemsQuery.data || []);
	const history = $derived(historyQuery.data || []);
	const produtos = $derived(produtosQuery.data || []);

	const acao = $derived.by(() => {
		if (pedido && pedido.acaoId && acoesQuery.data) {
			return acoesQuery.data.find((a) => a._id === pedido.acaoId);
		}
		return null;
	});

	const loading = $derived(
		pedidoQuery.isLoading ||
			itemsQuery.isLoading ||
			historyQuery.isLoading ||
			produtosQuery.isLoading ||
			acoesQuery.isLoading
	);

	const error = $derived(
		pedidoQuery.error?.message ||
			itemsQuery.error?.message ||
			historyQuery.error?.message ||
			produtosQuery.error?.message ||
			acoesQuery.error?.message ||
			null
	);

	// Add Item State
	let showAddItem = $state(false);
	let newItem = $state({
		produtoId: '' as string,
		valorEstimado: '',
		quantidade: 1
	});
	let addingItem = $state(false);

	// Edit SEI State
	let editingSei = $state(false);
	let seiValue = $state('');
	let updatingSei = $state(false);

	async function handleAddItem() {
		if (!newItem.produtoId || !newItem.valorEstimado) return;
		addingItem = true;
		try {
			await client.mutation(api.pedidos.addItem, {
				pedidoId,
				produtoId: newItem.produtoId as Id<'produtos'>,
				valorEstimado: newItem.valorEstimado,
				quantidade: newItem.quantidade
			});
			newItem = { produtoId: '', valorEstimado: '', quantidade: 1 };
			showAddItem = false;
		} catch (e) {
			alert('Erro ao adicionar item: ' + (e as Error).message);
		} finally {
			addingItem = false;
		}
	}

	async function handleUpdateQuantity(itemId: Id<'pedidoItems'>, novaQuantidade: number) {
		if (novaQuantidade < 1) {
			alert('Quantidade deve ser pelo menos 1.');
			return;
		}
		try {
			await client.mutation(api.pedidos.updateItemQuantity, {
				itemId,
				novaQuantidade
			});
		} catch (e) {
			alert('Erro ao atualizar quantidade: ' + (e as Error).message);
		}
	}

	async function handleRemoveItem(itemId: Id<'pedidoItems'>) {
		if (!confirm('Remover este item?')) return;
		try {
			await client.mutation(api.pedidos.removeItem, { itemId });
		} catch (e) {
			alert('Erro ao remover item: ' + (e as Error).message);
		}
	}

	async function updateStatus(
		novoStatus:
			| 'cancelado'
			| 'concluido'
			| 'em_rascunho'
			| 'aguardando_aceite'
			| 'em_analise'
			| 'precisa_ajustes'
	) {
		if (!confirm(`Confirmar alteração de status para: ${novoStatus}?`)) return;
		try {
			await client.mutation(api.pedidos.updateStatus, {
				pedidoId,
				novoStatus
			});
		} catch (e) {
			alert('Erro ao atualizar status: ' + (e as Error).message);
		}
	}

	function getProductName(id: string) {
		return produtos.find((p) => p._id === id)?.nome || 'Produto desconhecido';
	}

	function handleProductChange(id: string) {
		newItem.produtoId = id;
		const produto = produtos.find((p) => p._id === id);
		if (produto) {
			newItem.valorEstimado = maskCurrencyBRL(produto.valorEstimado || '');
		} else {
			newItem.valorEstimado = '';
		}
	}

	function parseMoneyToNumber(value: string): number {
		const cleanValue = value.replace(/[^0-9,]/g, '').replace(',', '.');
		return parseFloat(cleanValue) || 0;
	}

	function calculateItemTotal(valorEstimado: string, quantidade: number): number {
		const unitValue = parseMoneyToNumber(valorEstimado);
		return unitValue * quantidade;
	}

	const totalGeral = $derived(
		items.reduce((sum, item) => sum + calculateItemTotal(item.valorEstimado, item.quantidade), 0)
	);

	function formatStatus(status: string) {
		switch (status) {
			case 'em_rascunho':
				return 'Rascunho';
			case 'aguardando_aceite':
				return 'Aguardando Aceite';
			case 'em_analise':
				return 'Em Análise';
			case 'precisa_ajustes':
				return 'Precisa de Ajustes';
			case 'concluido':
				return 'Concluído';
			case 'cancelado':
				return 'Cancelado';
			default:
				return status;
		}
	}

	async function handleUpdateSei() {
		if (!seiValue.trim()) {
			alert('O número SEI não pode estar vazio.');
			return;
		}
		updatingSei = true;
		try {
			await client.mutation(api.pedidos.updateSeiNumber, {
				pedidoId,
				numeroSei: seiValue.trim()
			});
			editingSei = false;
		} catch (e) {
			alert('Erro ao atualizar número SEI: ' + (e as Error).message);
		} finally {
			updatingSei = false;
		}
	}

	function startEditingSei() {
		seiValue = pedido?.numeroSei || '';
		editingSei = true;
	}

	function cancelEditingSei() {
		editingSei = false;
		seiValue = '';
	}

	function getStatusColor(status: string) {
		switch (status) {
			case 'em_rascunho':
				return 'bg-gray-100 text-gray-800';
			case 'aguardando_aceite':
				return 'bg-yellow-100 text-yellow-800';
			case 'em_analise':
				return 'bg-blue-100 text-blue-800';
			case 'precisa_ajustes':
				return 'bg-orange-100 text-orange-800';
			case 'concluido':
				return 'bg-green-100 text-green-800';
			case 'cancelado':
				return 'bg-red-100 text-red-800';
			default:
				return 'bg-gray-100 text-gray-800';
		}
	}

	function getHistoryIcon(acao: string) {
		switch (acao) {
			case 'criacao_pedido':
				return '📝';
			case 'adicao_item':
				return '➕';
			case 'remocao_item':
				return '🗑️';
			case 'alteracao_quantidade':
				return '🔢';
			case 'alteracao_status':
				return '🔄';
			case 'atualizacao_sei':
				return '📋';
			default:
				return '•';
		}
	}

	function formatHistoryEntry(entry: {
		acao: string;
		detalhes: string | undefined;
		usuarioNome: string;
	}): string {
		try {
			const detalhes = entry.detalhes ? JSON.parse(entry.detalhes) : {};

			switch (entry.acao) {
				case 'criacao_pedido':
					return `${entry.usuarioNome} criou o pedido ${detalhes.numeroSei || ''}`;

				case 'adicao_item': {
					const produto = produtos.find((p) => p._id === detalhes.produtoId);
					const nomeProduto = produto?.nome || 'Produto desconhecido';
					const quantidade = detalhes.quantidade || 1;
					return `${entry.usuarioNome} adicionou ${quantidade}x ${nomeProduto} (${detalhes.valor})`;
				}

				case 'remocao_item': {
					const produto = produtos.find((p) => p._id === detalhes.produtoId);
					const nomeProduto = produto?.nome || 'Produto desconhecido';
					return `${entry.usuarioNome} removeu ${nomeProduto}`;
				}

				case 'alteracao_quantidade': {
					const produto = produtos.find((p) => p._id === detalhes.produtoId);
					const nomeProduto = produto?.nome || 'Produto desconhecido';
					return `${entry.usuarioNome} alterou a quantidade de ${nomeProduto} de ${detalhes.quantidadeAnterior} para ${detalhes.novaQuantidade}`;
				}

				case 'alteracao_status':
					return `${entry.usuarioNome} alterou o status para "${formatStatus(detalhes.novoStatus)}"`;
					return `${entry.usuarioNome} atualizou o número SEI para "${detalhes.numeroSei}"`;

				default:
					return `${entry.usuarioNome} realizou: ${entry.acao}`;
			}
		} catch {
			return `${entry.usuarioNome} - ${entry.acao}`;
		}
	}
</script>

<div class="container mx-auto p-6">
	{#if loading}
		<p>Carregando...</p>
	{:else if error}
		<p class="text-red-600">{error}</p>
	{:else if pedido}
		<div class="mb-6 flex items-start justify-between">
			<div>
				<h1 class="flex items-center gap-3 text-2xl font-bold">
					{#if editingSei}
						<div class="flex items-center gap-2">
							<input
								type="text"
								bind:value={seiValue}
								class="rounded border px-2 py-1 text-sm"
								placeholder="Número SEI"
								disabled={updatingSei}
							/>
							<button
								onclick={handleUpdateSei}
								disabled={updatingSei}
								class="rounded bg-green-600 p-1 text-white hover:bg-green-700 disabled:opacity-50"
								title="Salvar"
							>
								<Save size={16} />
							</button>
							<button
								onclick={cancelEditingSei}
								disabled={updatingSei}
								class="rounded bg-gray-400 p-1 text-white hover:bg-gray-500 disabled:opacity-50"
								title="Cancelar"
							>
								<X size={16} />
							</button>
						</div>
					{:else}
						<div class="flex items-center gap-2">
							<span>Pedido {pedido.numeroSei || 'sem número SEI'}</span>
							{#if pedido.status === 'em_rascunho' || pedido.status === 'precisa_ajustes'}
								<button
									onclick={startEditingSei}
									class="rounded bg-blue-100 p-1 text-blue-600 hover:bg-blue-200"
									title="Editar número SEI"
								>
									<Edit size={16} />
								</button>
							{/if}
						</div>
					{/if}
					<span class="rounded-full px-3 py-1 text-sm font-medium {getStatusColor(pedido.status)}">
						{formatStatus(pedido.status)}
					</span>
				</h1>
				{#if acao}
					<p class="mt-1 text-gray-600">Ação: {acao.nome} ({acao.tipo})</p>
				{/if}
				{#if !pedido.numeroSei}
					<p class="mt-1 text-sm text-amber-600">
						⚠️ Este pedido não possui número SEI. Adicione um número SEI quando disponível.
					</p>
				{/if}
			</div>

			<div class="flex gap-2">
				{#if pedido.status === 'em_rascunho' || pedido.status === 'precisa_ajustes'}
					<button
						onclick={() => updateStatus('aguardando_aceite')}
						class="flex items-center gap-2 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
					>
						<Send size={18} /> Enviar para Aceite
					</button>
				{/if}

				{#if pedido.status === 'aguardando_aceite'}
					<!-- Actions for Purchasing Sector (Assuming current user has permission, logic handled in backend/UI visibility) -->
					<button
						onclick={() => updateStatus('em_analise')}
						class="flex items-center gap-2 rounded bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700"
					>
						<Clock size={18} /> Iniciar Análise
					</button>
				{/if}

				{#if pedido.status === 'em_analise'}
					<button
						onclick={() => updateStatus('concluido')}
						class="flex items-center gap-2 rounded bg-green-600 px-4 py-2 text-white hover:bg-green-700"
					>
						<CheckCircle size={18} /> Concluir
					</button>
					<button
						onclick={() => updateStatus('precisa_ajustes')}
						class="flex items-center gap-2 rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600"
					>
						<AlertTriangle size={18} /> Solicitar Ajustes
					</button>
				{/if}

				{#if pedido.status !== 'cancelado' && pedido.status !== 'concluido'}
					<button
						onclick={() => updateStatus('cancelado')}
						class="flex items-center gap-2 rounded bg-red-100 px-4 py-2 text-red-700 hover:bg-red-200"
					>
						<XCircle size={18} /> Cancelar
					</button>
				{/if}
			</div>
		</div>

		<!-- Items Section -->
		<div class="mb-6 overflow-hidden rounded-lg bg-white shadow-md">
			<div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
				<h2 class="text-lg font-semibold">Itens do Pedido</h2>
				{#if pedido.status === 'em_rascunho' || pedido.status === 'precisa_ajustes'}
					<button
						onclick={() => (showAddItem = true)}
						class="flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-800"
					>
						<Plus size={16} /> Adicionar Item
					</button>
				{/if}
			</div>

			{#if showAddItem}
				<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
					<div class="flex items-end gap-4">
						<div class="flex-1">
							<label for="produto-select" class="mb-1 block text-xs font-medium text-gray-500"
								>Produto</label
							>
							<select
								id="produto-select"
								bind:value={newItem.produtoId}
								onchange={(e) => handleProductChange(e.currentTarget.value)}
								class="w-full rounded-md border-gray-300 text-sm shadow-sm"
							>
								<option value="">Selecione...</option>
								{#each produtos as p (p._id)}
									<option value={p._id}>{p.nome} ({p.tipo})</option>
								{/each}
							</select>
						</div>
						<div class="w-32">
							<label for="quantidade-input" class="mb-1 block text-xs font-medium text-gray-500"
								>Quantidade</label
							>
							<input
								id="quantidade-input"
								type="number"
								min="1"
								bind:value={newItem.quantidade}
								class="w-full rounded-md border-gray-300 text-sm shadow-sm"
								placeholder="1"
							/>
						</div>
						<div class="w-40">
							<label for="valor-input" class="mb-1 block text-xs font-medium text-gray-500"
								>Valor Estimado</label
							>
							<input
								id="valor-input"
								type="text"
								bind:value={newItem.valorEstimado}
								oninput={(e) => (newItem.valorEstimado = maskCurrencyBRL(e.currentTarget.value))}
								class="w-full rounded-md border-gray-300 text-sm shadow-sm"
								placeholder="R$ 0,00"
							/>
						</div>
						<div class="flex gap-2">
							<button
								onclick={handleAddItem}
								disabled={addingItem}
								class="rounded bg-blue-600 px-3 py-2 text-sm text-white hover:bg-blue-700"
							>
								Adicionar
							</button>
							<button
								onclick={() => (showAddItem = false)}
								class="rounded bg-gray-200 px-3 py-2 text-sm text-gray-700 hover:bg-gray-300"
							>
								Cancelar
							</button>
						</div>
					</div>
				</div>
			{/if}

			<table class="min-w-full divide-y divide-gray-200">
				<thead class="bg-gray-50">
					<tr>
						<th
							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
							>Produto</th
						>
						<th
							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
							>Quantidade</th
						>
						<th
							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
							>Valor Estimado</th
						>
						<th
							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
							>Adicionado Por</th
						>
						<th
							class="px-6 py-3 text-right text-xs font-medium tracking-wider text-gray-500 uppercase"
							>Total</th
						>
						<th
							class="px-6 py-3 text-right text-xs font-medium tracking-wider text-gray-500 uppercase"
							>Ações</th
						>
					</tr>
				</thead>
				<tbody class="divide-y divide-gray-200 bg-white">
					{#each items as item (item._id)}
						<tr>
							<td class="px-6 py-4 whitespace-nowrap">{getProductName(item.produtoId)}</td>
							<td class="px-6 py-4 whitespace-nowrap">
								{#if pedido.status === 'em_rascunho' || pedido.status === 'precisa_ajustes'}
									<input
										type="number"
										min="1"
										value={item.quantidade}
										onchange={(e) =>
											handleUpdateQuantity(item._id, parseInt(e.currentTarget.value) || 1)}
										class="w-20 rounded border px-2 py-1 text-sm"
									/>
								{:else}
									{item.quantidade}
								{/if}
							</td>
							<td class="px-6 py-4 whitespace-nowrap">
								{maskCurrencyBRL(item.valorEstimado) || 'R$ 0,00'}
							</td>
							<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600">
								{item.adicionadoPorNome}
							</td>
							<td class="px-6 py-4 text-right font-medium whitespace-nowrap">
								R$ {calculateItemTotal(item.valorEstimado, item.quantidade)
									.toFixed(2)
									.replace('.', ',')}
							</td>
							<td class="px-6 py-4 text-right text-sm font-medium whitespace-nowrap">
								{#if pedido.status === 'em_rascunho' || pedido.status === 'precisa_ajustes'}
									<button
										onclick={() => handleRemoveItem(item._id)}
										class="text-red-600 hover:text-red-900"
									>
										<Trash2 size={16} />
									</button>
								{/if}
							</td>
						</tr>
					{/each}
					{#if items.length === 0}
						<tr>
							<td colspan="6" class="px-6 py-4 text-center text-gray-500"
								>Nenhum item adicionado.</td
							>
						</tr>
					{:else}
						<tr class="bg-gray-50 font-semibold">
							<td
								colspan="5"
								class="px-6 py-4 text-right text-sm tracking-wider text-gray-700 uppercase"
							>
								Total Geral:
							</td>
							<td class="px-6 py-4 text-right text-base font-bold text-gray-900">
								R$ {totalGeral.toFixed(2).replace('.', ',')}
							</td>
						</tr>
					{/if}
				</tbody>
			</table>
		</div>

		<!-- Histórico -->
		<div class="rounded-lg bg-white p-6 shadow">
			<h2 class="mb-4 text-lg font-semibold text-gray-900">Histórico</h2>
			<div class="space-y-3">
				{#if history.length === 0}
					<p class="text-sm text-gray-500">Nenhum histórico disponível.</p>
				{:else}
					{#each history as entry (entry._id)}
						<div
							class="flex items-start gap-3 rounded-lg border border-gray-200 p-3 hover:bg-gray-50"
						>
							<div class="flex-shrink-0 text-2xl">
								{getHistoryIcon(entry.acao)}
							</div>
							<div class="min-w-0 flex-1">
								<p class="text-sm text-gray-900">
									{formatHistoryEntry(entry)}
								</p>
								<p class="mt-1 text-xs text-gray-500">
									{new Date(entry.data).toLocaleString('pt-BR', {
										day: '2-digit',
										month: '2-digit',
										year: 'numeric',
										hour: '2-digit',
										minute: '2-digit'
									})}
								</p>
							</div>
						</div>
					{/each}
				{/if}
			</div>
		</div>
	{/if}
</div>
