<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';
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { page } from '$app/stores';
	import { ArrowLeft } from 'lucide-svelte';
	import { toast } from 'svelte-sonner';
	import { useConvexWithAuth } from '$lib/hooks/useConvexWithAuth';

	// Client para mutations
	const client = useConvexClient();

	// Autenticação
	$effect(() => {
		useConvexWithAuth();
	});

	const contratoId = $page.params.id as Id<'contratos'>;

	// Queries
	const contratoQuery = useQuery(api.contratos.obter, { id: contratoId });
	const empresasQuery = useQuery(api.empresas.list, {});
	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});

	// Derivados
	const contrato = $derived(contratoQuery.data);
	const empresas = $derived(empresasQuery.data || []);
	const funcionarios = $derived(funcionariosQuery.data || []);
	const isLoading = $derived(contratoQuery.isLoading);
	const error = $derived(contratoQuery.error);

	type SituacaoContrato = 'em_execucao' | 'rescendido' | 'aguardando_assinatura' | 'finalizado';

	type ContratoForm = {
		contratadaId: string | null;
		objeto: string;
		numeroNotaEmpenho: string;
		responsavelId: string | null;
		departamento: string;
		situacao: SituacaoContrato;
		numeroProcessoLicitatorio: string;
		modalidade: string;
		numeroContrato: string;
		anoContrato: number;
		dataInicioVigencia: string;
		dataFimVigencia: string;
		nomeFiscal: string;
		valorTotal: string;
		dataAditivoPrazo: string;
		diasAvisoVencimento: number;
	};

	// Estado do formulário
	let loading = $state(false);
	let formData = $state<ContratoForm>({
		contratadaId: null,
		objeto: '',
		numeroNotaEmpenho: '',
		responsavelId: null,
		departamento: '',
		situacao: 'aguardando_assinatura',
		numeroProcessoLicitatorio: '',
		modalidade: '',
		numeroContrato: '',
		anoContrato: new Date().getFullYear(),
		dataInicioVigencia: '',
		dataFimVigencia: '',
		nomeFiscal: '',
		valorTotal: '',
		dataAditivoPrazo: '',
		diasAvisoVencimento: 30
	});

	// Carregar dados quando a query retornar
	$effect(() => {
		if (contrato) {
			formData = {
				contratadaId: contrato.contratadaId,
				objeto: contrato.objeto,
				numeroNotaEmpenho: contrato.numeroNotaEmpenho,
				responsavelId: contrato.responsavelId,
				departamento: contrato.departamento,
				situacao: contrato.situacao,
				numeroProcessoLicitatorio: contrato.numeroProcessoLicitatorio,
				modalidade: contrato.modalidade,
				numeroContrato: contrato.numeroContrato,
				anoContrato: contrato.anoContrato,
				dataInicioVigencia: contrato.dataInicioVigencia,
				dataFimVigencia: contrato.dataFimVigencia,
				nomeFiscal: contrato.nomeFiscal,
				valorTotal: contrato.valorTotal,
				dataAditivoPrazo: contrato.dataAditivoPrazo || '',
				diasAvisoVencimento: contrato.diasAvisoVencimento
			};
		}
	});

	async function handleSubmit() {
		if (!formData.contratadaId || !formData.responsavelId) {
			toast.error('Selecione a empresa e o responsável.');
			return;
		}

		try {
			loading = true;
			await client.mutation(api.contratos.editar, {
				id: contratoId,
				contratadaId: formData.contratadaId as Id<'empresas'>,
				objeto: formData.objeto,
				numeroNotaEmpenho: formData.numeroNotaEmpenho,
				responsavelId: formData.responsavelId as Id<'funcionarios'>,
				departamento: formData.departamento,
				situacao: formData.situacao,
				numeroProcessoLicitatorio: formData.numeroProcessoLicitatorio,
				modalidade: formData.modalidade,
				numeroContrato: formData.numeroContrato,
				anoContrato: Number(formData.anoContrato),
				dataInicioVigencia: formData.dataInicioVigencia,
				dataFimVigencia: formData.dataFimVigencia,
				nomeFiscal: formData.nomeFiscal,
				valorTotal: formData.valorTotal,
				dataAditivoPrazo: formData.dataAditivoPrazo || undefined,
				diasAvisoVencimento: Number(formData.diasAvisoVencimento)
			});
			toast.success('Contrato atualizado com sucesso!');
			goto(resolve('/licitacoes/contratos'));
		} catch (error) {
			console.error(error);
			if (error instanceof Error) {
				toast.error('Erro ao atualizar contrato: ' + error.message);
			} else {
				toast.error('Erro ao atualizar contrato: ' + String(error));
			}
		} finally {
			loading = false;
		}
	}
</script>

<div class="mx-auto flex max-w-4xl flex-col gap-6 p-6">
	<div class="flex items-center gap-4">
		<button
			class="btn btn-ghost btn-square"
			onclick={() => goto(resolve('/licitacoes/contratos'))}
		>
			<ArrowLeft class="h-4 w-4" />
		</button>
		<div>
			<h1 class="text-3xl font-bold tracking-tight">Editar Contrato</h1>
			<p class="text-muted-foreground">Atualize os dados do contrato.</p>
		</div>
	</div>

	{#if isLoading}
		<div class="flex justify-center p-8">
			<span class="loading loading-spinner loading-lg text-base-content/50"></span>
		</div>
	{:else if error}
		<div class="alert alert-error">
			<span>Erro ao carregar contrato: {error.message}</span>
		</div>
	{:else if contrato}
		<div class="bg-base-100 grid gap-6 rounded-lg border p-6 shadow-sm">
			<!-- Dados Básicos -->
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
				<div class="form-control w-full">
					<label class="label" for="numeroContrato">
						<span class="label-text">Número do Contrato</span>
					</label>
					<input
						id="numeroContrato"
						class="input input-bordered w-full"
						bind:value={formData.numeroContrato}
						placeholder="Ex: 001"
						required
					/>
				</div>
				<div class="form-control w-full">
					<label class="label" for="anoContrato">
						<span class="label-text">Ano do Contrato</span>
					</label>
					<input
						id="anoContrato"
						type="number"
						class="input input-bordered w-full"
						bind:value={formData.anoContrato}
						required
					/>
				</div>
				<div class="form-control w-full md:col-span-2">
					<label class="label" for="objeto">
						<span class="label-text">Objeto</span>
					</label>
					<textarea
						id="objeto"
						class="textarea textarea-bordered w-full"
						bind:value={formData.objeto}
						placeholder="Descrição do objeto do contrato"
						required
					></textarea>
				</div>
			</div>

			<!-- Partes -->
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
				<div class="form-control w-full">
					<label class="label" for="contratadaId">
						<span class="label-text">Empresa Contratada</span>
					</label>
					<select
						id="contratadaId"
						class="select select-bordered w-full"
						bind:value={formData.contratadaId}
					>
						<option value={null} disabled>Selecione a empresa...</option>
						{#each empresas as emp (emp._id)}
							<option value={emp._id}>{emp.razao_social}</option>
						{/each}
					</select>
				</div>
				<div class="form-control w-full">
					<label class="label" for="responsavelId">
						<span class="label-text">Responsável (Fiscal)</span>
					</label>
					<select
						id="responsavelId"
						class="select select-bordered w-full"
						bind:value={formData.responsavelId}
					>
						<option value={null} disabled>Selecione o responsável...</option>
						{#each funcionarios as func (func._id)}
							<option value={func._id}>{func.nome}</option>
						{/each}
					</select>
				</div>
				<div class="form-control w-full">
					<label class="label" for="nomeFiscal">
						<span class="label-text">Nome do Fiscal (Texto)</span>
					</label>
					<input
						id="nomeFiscal"
						class="input input-bordered w-full"
						bind:value={formData.nomeFiscal}
						placeholder="Nome completo do fiscal"
					/>
				</div>
				<div class="form-control w-full">
					<label class="label" for="departamento">
						<span class="label-text">Departamento</span>
					</label>
					<input
						id="departamento"
						class="input input-bordered w-full"
						bind:value={formData.departamento}
						placeholder="Ex: TI, Administrativo"
					/>
				</div>
			</div>

			<!-- Detalhes Administrativos -->
			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
				<div class="form-control w-full">
					<label class="label" for="numeroProcessoLicitatorio">
						<span class="label-text">Processo Licitatório</span>
					</label>
					<input
						id="numeroProcessoLicitatorio"
						class="input input-bordered w-full"
						bind:value={formData.numeroProcessoLicitatorio}
						placeholder="Nº do processo"
					/>
				</div>
				<div class="form-control w-full">
					<label class="label" for="modalidade">
						<span class="label-text">Modalidade</span>
					</label>
					<input
						id="modalidade"
						class="input input-bordered w-full"
						bind:value={formData.modalidade}
						placeholder="Ex: Pregão Eletrônico"
					/>
				</div>
				<div class="form-control w-full">
					<label class="label" for="numeroNotaEmpenho">
						<span class="label-text">Nota de Empenho</span>
					</label>
					<input
						id="numeroNotaEmpenho"
						class="input input-bordered w-full"
						bind:value={formData.numeroNotaEmpenho}
						placeholder="Nº da nota"
					/>
				</div>
			</div>

			<!-- Valores e Prazos -->
			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
				<div class="form-control w-full">
					<label class="label" for="valorTotal">
						<span class="label-text">Valor Total (R$)</span>
					</label>
					<input
						id="valorTotal"
						class="input input-bordered w-full"
						bind:value={formData.valorTotal}
						placeholder="0,00"
					/>
				</div>
				<div class="form-control w-full">
					<label class="label" for="dataInicioVigencia">
						<span class="label-text">Início Vigência</span>
					</label>
					<input
						id="dataInicioVigencia"
						type="date"
						class="input input-bordered w-full"
						bind:value={formData.dataInicioVigencia}
						required
					/>
				</div>
				<div class="form-control w-full">
					<label class="label" for="dataFimVigencia">
						<span class="label-text">Fim Vigência</span>
					</label>
					<input
						id="dataFimVigencia"
						type="date"
						class="input input-bordered w-full"
						bind:value={formData.dataFimVigencia}
						required
					/>
				</div>
			</div>

			<!-- Situação e Alertas -->
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
				<div class="form-control w-full">
					<label class="label" for="situacao">
						<span class="label-text">Situação</span>
					</label>
					<select
						id="situacao"
						class="select select-bordered w-full"
						bind:value={formData.situacao}
					>
						<option value="aguardando_assinatura">Aguardando Assinatura</option>
						<option value="em_execucao">Em Execução</option>
						<option value="rescendido">Rescindido</option>
						<option value="finalizado">Finalizado</option>
					</select>
				</div>
				<div class="form-control w-full">
					<label class="label" for="diasAvisoVencimento">
						<span class="label-text">Aviso de Vencimento (dias antes)</span>
					</label>
					<input
						id="diasAvisoVencimento"
						type="number"
						class="input input-bordered w-full"
						bind:value={formData.diasAvisoVencimento}
						min="1"
					/>
				</div>
				<div class="form-control w-full">
					<label class="label" for="dataAditivoPrazo">
						<span class="label-text">Data Aditivo Prazo (Opcional)</span>
					</label>
					<input
						id="dataAditivoPrazo"
						type="date"
						class="input input-bordered w-full"
						bind:value={formData.dataAditivoPrazo}
					/>
				</div>
			</div>

			<div class="flex justify-end gap-4 pt-4">
				<button
					class="btn btn-outline"
					onclick={() => goto(resolve('/licitacoes/contratos'))}>Cancelar</button
				>
				<button class="btn btn-primary" onclick={handleSubmit} disabled={loading}>
					{#if loading}
						<span class="loading loading-spinner loading-sm mr-2"></span>
					{/if}
					Salvar Alterações
				</button>
			</div>
		</div>
	{/if}
</div>
