<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 { Plus, AlertTriangle } from 'lucide-svelte';
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { format } from 'date-fns';
	import { useConvexWithAuth } from '$lib/hooks/useConvexWithAuth';

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

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

	// Filtros
	let responsavelId = $state<Id<'funcionarios'> | undefined>(undefined);
	let dataInicio = $state<string | undefined>(undefined);
	let dataFim = $state<string | undefined>(undefined);

	// Queries
	const contratosQuery = useQuery(api.contratos.listar, () => ({
		responsavelId: responsavelId,
		dataInicio,
		dataFim
	}));

	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});

	// Derivados para facilitar acesso aos dados
	const contratos = $derived.by(() => {
		if (contratosQuery === undefined || contratosQuery === null) return [];
		if (Array.isArray(contratosQuery)) return contratosQuery;
		if ('data' in contratosQuery) return contratosQuery.data || [];
		return [];
	});

	const funcionarios = $derived.by(() => {
		if (funcionariosQuery === undefined || funcionariosQuery === null) return [];
		if (Array.isArray(funcionariosQuery)) return funcionariosQuery;
		if ('data' in funcionariosQuery) return funcionariosQuery.data || [];
		return [];
	});

	const isLoading = $derived(contratosQuery === undefined);
	const error = $derived(contratosQuery instanceof Error ? contratosQuery : null);

	// Helpers
	function formatarData(data: string) {
		if (!data) return '-';
		return format(new Date(data), 'dd/MM/yyyy');
	}

	function formatarMoeda(valor: string) {
		if (!valor) return '-';
		return new Intl.NumberFormat('pt-BR', {
			style: 'currency',
			currency: 'BRL'
		}).format(parseFloat(valor));
	}

	async function handleDelete(id: Id<'contratos'>) {
		if (confirm('Tem certeza que deseja excluir este contrato?')) {
			await client.mutation(api.contratos.excluir, { id });
		}
	}

	// Verificar vencimento (lógica visual simples baseada na data de fim)
	function isProximoVencimento(dataFim: string, diasAviso: number) {
		if (!dataFim) return false;
		const fim = new Date(dataFim).getTime();
		const hoje = Date.now();
		const aviso = fim - diasAviso * 24 * 60 * 60 * 1000;
		return hoje >= aviso && hoje <= fim;
	}
</script>

<div class="flex flex-col gap-6 p-6">
	<div class="flex items-center justify-between">
		<div>
			<h1 class="text-3xl font-bold tracking-tight">Contratos</h1>
			<p class="text-muted-foreground">Gerencie os contratos, vigências e situações.</p>
		</div>
		<button class="btn btn-primary" onclick={() => goto(resolve('/licitacoes/contratos/novo'))}>
			<Plus class="mr-2 h-4 w-4" />
			Novo Contrato
		</button>
	</div>

	<!-- Filtros -->
	<div class="bg-base-100 grid gap-4 rounded-lg border p-4 shadow-sm md:grid-cols-4">
		<div class="form-control w-full">
			<label class="label" for="filtroResponsavel">
				<span class="label-text">Responsável</span>
			</label>
			<select
				id="filtroResponsavel"
				class="select select-bordered w-full"
				bind:value={responsavelId}
			>
				<option value={undefined}>Todos</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="filtroDataInicio">
				<span class="label-text">Vigência Início (A partir de)</span>
			</label>
			<input
				id="filtroDataInicio"
				type="date"
				class="input input-bordered w-full"
				bind:value={dataInicio}
			/>
		</div>
		<div class="form-control w-full">
			<label class="label" for="filtroDataFim">
				<span class="label-text">Vigência Fim (Até)</span>
			</label>
			<input
				id="filtroDataFim"
				type="date"
				class="input input-bordered w-full"
				bind:value={dataFim}
			/>
		</div>
		<div class="flex items-end">
			<button
				class="btn btn-outline w-full"
				onclick={() => {
					responsavelId = undefined;
					dataInicio = undefined;
					dataFim = undefined;
				}}
			>
				Limpar Filtros
			</button>
		</div>
	</div>

	<!-- Tabela -->
	<div class="bg-base-100 overflow-x-auto rounded-md border">
		<table class="table w-full">
			<thead>
				<tr>
					<th>Nº Contrato</th>
					<th>Objeto</th>
					<th>Contratada</th>
					<th>Vigência</th>
					<th>Valor</th>
					<th>Situação</th>
					<th>Responsável</th>
					<th class="text-right">Ações</th>
				</tr>
			</thead>
			<tbody>
				{#if isLoading}
					<tr>
						<td colspan="8" class="h-24 text-center">
							<span class="loading loading-spinner loading-lg"></span>
						</td>
					</tr>
				{:else if error}
					<tr>
						<td colspan="8" class="text-error h-24 text-center">
							Erro ao carregar contratos: {error.message}
						</td>
					</tr>
				{:else if contratos.length === 0}
					<tr>
						<td colspan="8" class="text-base-content/70 h-24 text-center">
							Nenhum contrato encontrado.
						</td>
					</tr>
				{:else}
					{#each contratos as contrato (contrato._id)}
						<tr>
							<td class="font-medium">
								<div class="flex items-center gap-2">
									{contrato.numeroContrato}/{contrato.anoContrato}
									{#if isProximoVencimento(contrato.dataFimVigencia, contrato.diasAvisoVencimento)}
										<div class="tooltip" data-tip="Próximo do vencimento">
											<AlertTriangle class="text-warning h-4 w-4" />
										</div>
									{/if}
								</div>
							</td>
							<td class="max-w-[200px] truncate" title={contrato.objeto}>
								{contrato.objeto}
							</td>
							<td>
								{contrato.contratada?.razao_social || 'Empresa não encontrada'}
							</td>
							<td>
								<div class="text-xs">
									{formatarData(contrato.dataInicioVigencia)} até
									<br />
									{formatarData(contrato.dataFimVigencia)}
								</div>
							</td>
							<td>{formatarMoeda(contrato.valorTotal)}</td>
							<td>
								<div
									class="badge gap-2
                  {contrato.situacao === 'em_execucao'
										? 'badge-success'
										: contrato.situacao === 'rescendido'
											? 'badge-error'
											: contrato.situacao === 'aguardando_assinatura'
												? 'badge-warning'
												: 'badge-ghost'}"
								>
									{contrato.situacao.replace('_', ' ').toUpperCase()}
								</div>
							</td>
							<td>
								{contrato.responsavel?.nome || '-'}
							</td>
							<td class="text-right">
								<button
									class="btn btn-ghost btn-xs"
									onclick={() => goto(resolve(`/licitacoes/contratos/${contrato._id}`))}
								>
									Editar
								</button>
								<button
									class="btn btn-ghost btn-xs text-error"
									onclick={() => handleDelete(contrato._id)}
								>
									Excluir
								</button>
							</td>
						</tr>
					{/each}
				{/if}
			</tbody>
		</table>
	</div>
</div>
