<script lang="ts">
	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';

	const client = useConvexClient();

	// Reactive queries
	const setoresQuery = useQuery(api.setores.list, {});
	const configQuery = useQuery(api.config.getComprasSetor, {});

	const setores = $derived(setoresQuery.data || []);
	const config = $derived(configQuery.data);
	const loading = $derived(setoresQuery.isLoading || configQuery.isLoading);

	// Initialize selected setor from config - using boxed $state to avoid reactivity warning
	let selectedSetorId = $state('');

	// Update selectedSetorId when config changes
	$effect(() => {
		if (config?.comprasSetorId && !selectedSetorId) {
			selectedSetorId = config.comprasSetorId;
		}
	});

	let saving = $state(false);
	let error: string | null = $state(null);
	let success: string | null = $state(null);

	async function saveConfig() {
		saving = true;
		error = null;
		success = null;
		try {
			await client.mutation(api.config.updateComprasSetor, {
				setorId: selectedSetorId as Id<'setores'>
			});
			success = 'Configuração salva com sucesso!';
		} catch (e) {
			error = (e as Error).message;
		} finally {
			saving = false;
		}
	}
</script>

<div class="container mx-auto p-6">
	<h1 class="mb-6 text-2xl font-bold">Configurações Gerais</h1>

	{#if loading}
		<p>Carregando...</p>
	{:else}
		<div class="max-w-md rounded-lg bg-white p-6 shadow-md">
			<h2 class="mb-4 text-xl font-semibold">Setor de Compras</h2>
			<p class="mb-4 text-sm text-gray-600">
				Selecione o setor responsável por receber e aprovar pedidos de compra.
			</p>

			{#if error}
				<div class="mb-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700">
					{error}
				</div>
			{/if}

			{#if success}
				<div class="mb-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700">
					{success}
				</div>
			{/if}

			<div class="mb-4">
				<label for="setor" class="mb-1 block text-sm font-medium text-gray-700"> Setor </label>
				<select
					id="setor"
					bind:value={selectedSetorId}
					class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
				>
					<option value="">Selecione um setor...</option>
					{#each setores as setor (setor._id)}
						<option value={setor._id}>{setor.nome} ({setor.sigla})</option>
					{/each}
				</select>
			</div>

			<button
				onclick={saveConfig}
				disabled={saving || !selectedSetorId}
				class="w-full rounded-md bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
			>
				{saving ? 'Salvando...' : 'Salvar Configuração'}
			</button>
		</div>
	{/if}
</div>
