<script lang="ts">
	import { useQuery } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import {
		Clock,
		TrendingUp,
		TrendingDown,
		Users,
		AlertTriangle,
		Download,
		FileText,
		Calendar,
		Search,
		Filter,
		Plus,
		CheckCircle2,
		XCircle,
		Eye,
		Edit,
		AlertCircle
	} from 'lucide-svelte';
	import { useConvexClient } from 'convex-svelte';
	import LineChart from '$lib/components/ti/charts/LineChart.svelte';
	import jsPDF from 'jspdf';
	import logoGovPE from '$lib/assets/logo_governo_PE.png';

	const client = useConvexClient();

	// Estados
	let mesSelecionado = $state(
		`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`
	);
	let funcionarioFiltro = $state<string>('');
	let apenasNegativos = $state(false);
	let tipoDiaFiltro = $state<string>('');
	let statusInconsistenciaFiltro = $state<string>('');
	let mostrarModalAjuste = $state(false);
	let funcionarioSelecionado = $state<Id<'funcionarios'> | null>(null);

	// Queries
	const funcionariosQuery = useQuery(api.funcionarios.listar, {});
	const funcionarios = $derived(funcionariosQuery?.data || []);

	// Query para estatísticas gerais do mês
	const estatisticasQuery = useQuery(api.pontos.obterEstatisticasBancoHorasGerencial, {
		mes: mesSelecionado,
		funcionarioId: funcionarioFiltro ? (funcionarioFiltro as Id<'funcionarios'>) : undefined
	});

	// Query para inconsistências gerais
	const inconsistenciasGeraisQuery = useQuery(api.pontos.listarInconsistenciasBancoHoras, {
		status: statusInconsistenciaFiltro
			? (statusInconsistenciaFiltro as 'pendente' | 'resolvida' | 'ignorada')
			: undefined
	});

	const estatisticas = $derived(estatisticasQuery?.data);
	const inconsistenciasGerais = $derived(inconsistenciasGeraisQuery?.data || []);

	// Função para formatar mês
	function formatarMes(mes: string): string {
		const [ano, mesNum] = mes.split('-');
		const data = new Date(parseInt(ano), parseInt(mesNum) - 1, 1);
		return data.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
	}

	// Função para mudar mês
	function mudarMes(direcao: 'anterior' | 'proximo') {
		const data = new Date(mesSelecionado + '-01');
		if (direcao === 'anterior') {
			data.setMonth(data.getMonth() - 1);
		} else {
			data.setMonth(data.getMonth() + 1);
		}
		mesSelecionado = `${data.getFullYear()}-${String(data.getMonth() + 1).padStart(2, '0')}`;
	}

	// Função para exportar relatório gerencial
	async function exportarRelatorioGerencial() {
		if (!estatisticas) return;

		const doc = new jsPDF('landscape', 'mm', 'a4');
		let yPosition = 20;

		// Logo
		try {
			const logoImg = await new Promise<HTMLImageElement>((resolve, reject) => {
				const img = new Image();
				img.crossOrigin = 'anonymous';
				img.onload = () => resolve(img);
				img.onerror = reject;
				img.src = logoGovPE;
			});

			const logoWidth = 30;
			const aspectRatio = logoImg.height / logoImg.width;
			const logoHeight = logoWidth * aspectRatio;

			doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
			yPosition = Math.max(25, 10 + logoHeight / 2);
		} catch (err) {
			console.warn('Não foi possível carregar a logo:', err);
		}

		// Título
		doc.setFontSize(18);
		doc.setTextColor(41, 128, 185);
		doc.text('RELATÓRIO GERENCIAL - BANCO DE HORAS', 148, yPosition, { align: 'center' });

		yPosition += 10;

		// Mês
		doc.setFontSize(11);
		doc.setTextColor(0, 0, 0);
		doc.text(`Mês: ${formatarMes(mesSelecionado)}`, 148, yPosition, { align: 'center' });

		yPosition += 15;

		// Estatísticas Gerais
		doc.setFontSize(14);
		doc.setTextColor(41, 128, 185);
		doc.text('Estatísticas Gerais', 15, yPosition);

		yPosition += 8;

		doc.setFontSize(10);
		doc.setTextColor(0, 0, 0);
		doc.text(`Total de Funcionários: ${estatisticas.totalFuncionarios}`, 20, yPosition);
		yPosition += 6;
		doc.text(`Funcionários com Saldo Positivo: ${estatisticas.funcionariosPositivos}`, 20, yPosition);
		yPosition += 6;
		doc.text(`Funcionários com Saldo Negativo: ${estatisticas.funcionariosNegativos}`, 20, yPosition);
		yPosition += 6;
		doc.text(`Total de Horas Extras: ${Math.floor(estatisticas.totalHorasExtras / 60)}h ${estatisticas.totalHorasExtras % 60}min`, 20, yPosition);
		yPosition += 6;
		doc.text(`Total de Déficit: ${Math.floor(estatisticas.totalDeficit / 60)}h ${estatisticas.totalDeficit % 60}min`, 20, yPosition);

		// Rodapé
		const pageCount = doc.getNumberOfPages();
		for (let i = 1; i <= pageCount; i++) {
			doc.setPage(i);
			doc.setFontSize(8);
			doc.setTextColor(100, 100, 100);
			doc.text(
				`Gerado em: ${new Date().toLocaleDateString('pt-BR', {
					day: '2-digit',
					month: '2-digit',
					year: 'numeric',
					hour: '2-digit',
					minute: '2-digit'
				})}`,
				148,
				200,
				{ align: 'center' }
			);
		}

		doc.save(`relatorio-banco-horas-${mesSelecionado}.pdf`);
	}
</script>

<div class="container mx-auto px-4 py-6">
	<!-- Header -->
	<div class="mb-6 flex items-center justify-between">
		<div class="flex items-center gap-4">
			<div class="bg-primary/10 rounded-xl p-3">
				<Clock class="text-primary h-8 w-8" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-base-content text-3xl font-bold">Dashboard - Banco de Horas</h1>
				<p class="text-base-content/60 mt-1">Visão gerencial do banco de horas dos funcionários</p>
			</div>
		</div>
		<button
			type="button"
			class="btn btn-primary"
			onclick={exportarRelatorioGerencial}
			disabled={!estatisticas}
		>
			<Download class="h-5 w-5" strokeWidth={2} />
			Exportar Relatório
		</button>
	</div>

	<!-- Filtros -->
	<div class="card bg-base-100 mb-6 shadow-lg">
		<div class="card-body">
			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
				<!-- Seleção de Mês -->
				<div class="form-control">
					<label class="label">
						<span class="label-text font-semibold">Mês de Referência</span>
					</label>
					<div class="flex items-center gap-2">
						<button
							type="button"
							class="btn btn-sm btn-circle"
							onclick={() => mudarMes('anterior')}
						>
							←
						</button>
						<span class="flex-1 text-center font-semibold">
							{formatarMes(mesSelecionado)}
						</span>
						<button
							type="button"
							class="btn btn-sm btn-circle"
							onclick={() => mudarMes('proximo')}
						>
							→
						</button>
					</div>
				</div>

				<!-- Filtro por Funcionário -->
				<div class="form-control">
					<label class="label">
						<span class="label-text font-semibold">Funcionário</span>
					</label>
					<select
						class="select select-bordered w-full"
						bind:value={funcionarioFiltro}
					>
						<option value="">Todos os funcionários</option>
						{#each funcionarios as func}
							<option value={func._id}>{func.nome} - {func.matricula}</option>
						{/each}
					</select>
				</div>

				<!-- Filtro Apenas Negativos -->
				<div class="form-control">
					<label class="label">
						<span class="label-text font-semibold">Filtros</span>
					</label>
					<label class="label cursor-pointer">
						<span class="label-text">Apenas saldos negativos</span>
						<input
							type="checkbox"
							class="checkbox checkbox-primary"
							bind:checked={apenasNegativos}
						/>
					</label>
				</div>
			</div>
		</div>
	</div>

	<!-- Filtros Avançados -->
	<div class="card bg-base-100 mb-6 shadow-lg">
		<div class="card-body">
			<h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
				<Filter class="h-5 w-5" strokeWidth={2} />
				Filtros Avançados
			</h3>
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
				<!-- Filtro por Tipo de Dia -->
				<div class="form-control">
					<label class="label">
						<span class="label-text font-semibold">Tipo de Dia</span>
					</label>
					<select class="select select-bordered w-full" bind:value={tipoDiaFiltro}>
						<option value="">Todos os tipos</option>
						<option value="normal">Normal</option>
						<option value="atestado">Atestado</option>
						<option value="licenca">Licença</option>
						<option value="ausencia">Ausência</option>
						<option value="abonado">Abonado</option>
						<option value="descontado">Descontado</option>
					</select>
				</div>

				<!-- Filtro por Status de Inconsistência -->
				<div class="form-control">
					<label class="label">
						<span class="label-text font-semibold">Status de Inconsistência</span>
					</label>
					<select class="select select-bordered w-full" bind:value={statusInconsistenciaFiltro}>
						<option value="">Todas</option>
						<option value="pendente">Pendente</option>
						<option value="resolvida">Resolvida</option>
						<option value="ignorada">Ignorada</option>
					</select>
				</div>
			</div>
		</div>
	</div>

	{#if estatisticasQuery?.isLoading}
		<div class="flex items-center justify-center py-12">
			<span class="loading loading-spinner loading-lg text-primary"></span>
		</div>
	{:else if estatisticasQuery?.error}
		<div class="alert alert-error mb-6">
			<AlertTriangle class="h-5 w-5" />
			<span>Erro ao carregar estatísticas: {estatisticasQuery.error.message || 'Erro desconhecido'}</span>
		</div>
	{:else if estatisticas}
		<!-- Cards de Estatísticas -->
		<div class="grid grid-cols-1 gap-6 md:grid-cols-4 mb-6">
			<!-- Total de Funcionários -->
			<div class="card bg-base-100 border-base-300 shadow-xl">
				<div class="card-body">
					<div class="flex items-center justify-between">
						<div>
							<p class="text-sm font-medium text-base-content/60">Total de Funcionários</p>
							<p class="text-3xl font-bold">{estatisticas.totalFuncionarios}</p>
						</div>
						<Users class="h-12 w-12 text-info opacity-50" strokeWidth={2} />
					</div>
				</div>
			</div>

			<!-- Funcionários com Saldo Positivo -->
			<div class="card bg-success/10 border-success/30 shadow-xl">
				<div class="card-body">
					<div class="flex items-center justify-between">
						<div>
							<p class="text-sm font-medium text-base-content/60">Saldo Positivo</p>
							<p class="text-3xl font-bold text-success">
								{estatisticas.funcionariosPositivos}
							</p>
						</div>
						<TrendingUp class="h-12 w-12 text-success opacity-50" strokeWidth={2} />
					</div>
				</div>
			</div>

			<!-- Funcionários com Saldo Negativo -->
			<div class="card bg-error/10 border-error/30 shadow-xl">
				<div class="card-body">
					<div class="flex items-center justify-between">
						<div>
							<p class="text-sm font-medium text-base-content/60">Saldo Negativo</p>
							<p class="text-3xl font-bold text-error">
								{estatisticas.funcionariosNegativos}
							</p>
						</div>
						<TrendingDown class="h-12 w-12 text-error opacity-50" strokeWidth={2} />
					</div>
				</div>
			</div>

			<!-- Total de Horas Extras -->
			<div class="card bg-warning/10 border-warning/30 shadow-xl">
				<div class="card-body">
					<div class="flex items-center justify-between">
						<div>
							<p class="text-sm font-medium text-base-content/60">Total Horas Extras</p>
							<p class="text-3xl font-bold text-warning">
								{Math.floor(estatisticas.totalHorasExtras / 60)}h{' '}
								{estatisticas.totalHorasExtras % 60}min
							</p>
						</div>
						<Clock class="h-12 w-12 text-warning opacity-50" strokeWidth={2} />
					</div>
				</div>
			</div>
		</div>

		<!-- Lista de Funcionários -->
		<div class="card bg-base-100 shadow-lg">
			<div class="card-body">
				<h2 class="card-title mb-4">Detalhamento por Funcionário</h2>
				<div class="overflow-x-auto">
					<table class="table">
						<thead>
							<tr>
								<th>Funcionário</th>
								<th class="text-right">Saldo Inicial</th>
								<th class="text-right">Saldo do Mês</th>
								<th class="text-right">Saldo Final</th>
								<th class="text-right">Dias Trabalhados</th>
								<th class="text-right">Horas Extras</th>
								<th class="text-right">Déficit</th>
								<th class="text-center">Inconsistências</th>
								<th class="text-center">Ações</th>
							</tr>
						</thead>
						<tbody>
							{#each estatisticas.funcionarios as item}
								{#if !apenasNegativos || item.saldoFinalMinutos < 0}
									{@const inconsistenciasFunc = inconsistenciasGerais.filter(
										(i) => i.funcionarioId === item.funcionario._id
									)}
									<tr
										class={item.saldoFinalMinutos < 0
											? 'bg-error/5 hover:bg-error/10'
											: ''}
									>
										<td>
											<div class="flex items-center gap-3">
												<div class="avatar placeholder">
													<div class="bg-neutral text-neutral-content rounded-full w-10">
														<span class="text-xs">
															{item.funcionario.nome.substring(0, 2).toUpperCase()}
														</span>
													</div>
												</div>
												<div>
													<div class="font-bold">{item.funcionario.nome}</div>
													<div class="text-sm opacity-50">{item.funcionario.matricula}</div>
												</div>
											</div>
										</td>
										<td class="text-right">
											<span
												class={item.saldoInicialMinutos >= 0 ? 'text-success' : 'text-error'}
											>
												{item.saldoInicialMinutos >= 0 ? '+' : ''}
												{Math.floor(Math.abs(item.saldoInicialMinutos) / 60)}h{' '}
												{Math.abs(item.saldoInicialMinutos) % 60}min
											</span>
										</td>
										<td class="text-right">
											<span
												class={item.saldoMesMinutos >= 0 ? 'text-success' : 'text-error'}
											>
												{item.saldoMesMinutos >= 0 ? '+' : ''}
												{Math.floor(Math.abs(item.saldoMesMinutos) / 60)}h{' '}
												{Math.abs(item.saldoMesMinutos) % 60}min
											</span>
										</td>
										<td class="text-right">
											<span
												class={item.saldoFinalMinutos >= 0 ? 'text-success' : 'text-error'}
											>
												{item.saldoFinalMinutos >= 0 ? '+' : ''}
												{Math.floor(Math.abs(item.saldoFinalMinutos) / 60)}h{' '}
												{Math.abs(item.saldoFinalMinutos) % 60}min
											</span>
										</td>
										<td class="text-right">{item.diasTrabalhados}</td>
										<td class="text-right text-success">
											{Math.floor(item.horasExtras / 60)}h {item.horasExtras % 60}min
										</td>
										<td class="text-right text-error">
											{Math.floor(item.horasDeficit / 60)}h {item.horasDeficit % 60}min
										</td>
										<td class="text-center">
											{#if inconsistenciasFunc.length > 0}
												<span class="badge badge-warning badge-sm">
													<AlertTriangle class="h-3 w-3" />
													{inconsistenciasFunc.length}
												</span>
											{:else}
												<span class="badge badge-success badge-sm">
													<CheckCircle2 class="h-3 w-3" />
													OK
												</span>
											{/if}
										</td>
										<td class="text-center">
											<div class="flex items-center justify-center gap-2">
												<button
													type="button"
													class="btn btn-sm btn-primary"
													onclick={() => {
														funcionarioSelecionado = item.funcionario._id;
														mostrarModalAjuste = true;
													}}
													title="Criar ajuste"
												>
													<Plus class="h-4 w-4" />
												</button>
												<a
													href={`/recursos-humanos/funcionarios/${item.funcionario._id}`}
													class="btn btn-sm btn-ghost"
													title="Ver detalhes"
												>
													<Eye class="h-4 w-4" />
												</a>
											</div>
										</td>
									</tr>
								{/if}
							{/each}
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<!-- Inconsistências Gerais -->
		{#if inconsistenciasGerais && inconsistenciasGerais.length > 0}
			<div class="card bg-warning/10 border-warning/30 shadow-lg mt-6">
				<div class="card-body">
					<h2 class="card-title mb-4 text-warning">
						<AlertTriangle class="h-5 w-5" strokeWidth={2} />
						Inconsistências Detectadas
					</h2>
					<div class="overflow-x-auto">
						<table class="table">
							<thead>
								<tr>
									<th>Funcionário</th>
									<th>Tipo</th>
									<th>Descrição</th>
									<th>Data Detectada</th>
									<th>Status</th>
									<th class="text-center">Ações</th>
								</tr>
							</thead>
							<tbody>
								{#each inconsistenciasGerais as inconsistencia}
									<tr
										class={inconsistencia.status === 'pendente'
											? 'bg-warning/10'
											: inconsistencia.status === 'resolvida'
												? 'bg-success/10'
												: ''}
									>
										<td>
											<div class="flex items-center gap-2">
												<div class="font-medium">
													{inconsistencia.funcionario?.nome || 'N/A'}
												</div>
												{#if inconsistencia.funcionario?.matricula}
													<span class="text-xs text-base-content/60">
														({inconsistencia.funcionario.matricula})
													</span>
												{/if}
											</div>
										</td>
										<td>
											<span class="badge badge-warning badge-sm">
												{inconsistencia.tipo === 'ponto_com_atestado'
													? 'Ponto + Atestado'
													: inconsistencia.tipo === 'ponto_com_licenca'
														? 'Ponto + Licença'
														: inconsistencia.tipo === 'ponto_com_ausencia'
															? 'Ponto + Ausência'
															: inconsistencia.tipo === 'registro_duplicado'
																? 'Duplicado'
																: inconsistencia.tipo === 'sequencia_invalida'
																	? 'Sequência Inválida'
																	: 'Saldo Inconsistente'}
											</span>
										</td>
										<td class="max-w-xs truncate">{inconsistencia.descricao}</td>
										<td>
											{new Date(inconsistencia.dataDetectada).toLocaleDateString('pt-BR', {
												day: '2-digit',
												month: '2-digit',
												year: 'numeric'
											})}
										</td>
										<td>
											<span
												class={`badge ${
													inconsistencia.status === 'resolvida'
														? 'badge-success'
														: inconsistencia.status === 'ignorada'
															? 'badge-base-300'
															: 'badge-warning'
												}`}
											>
												{inconsistencia.status === 'resolvida'
													? 'Resolvida'
													: inconsistencia.status === 'ignorada'
														? 'Ignorada'
														: 'Pendente'}
											</span>
										</td>
										<td class="text-center">
											<a
												href={`/recursos-humanos/funcionarios/${inconsistencia.funcionarioId}`}
												class="btn btn-sm btn-ghost"
												title="Ver detalhes"
											>
												<Eye class="h-4 w-4" />
											</a>
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		{/if}
	{:else}
		<div class="card bg-base-100 shadow-lg">
			<div class="card-body text-center">
				<FileText class="mx-auto mb-4 h-12 w-12 text-base-content/40" strokeWidth={2} />
				<p class="text-lg font-semibold">Nenhum dado disponível</p>
				<p class="text-sm text-base-content/60">
					Não há dados de banco de horas para {formatarMes(mesSelecionado)}.
				</p>
			</div>
		</div>
	{/if}
</div>

<!-- Modal para Criar Ajuste -->
{#if mostrarModalAjuste && funcionarioSelecionado}
	<div class="modal modal-open">
		<div class="modal-box">
			<h3 class="font-bold text-lg mb-4">Criar Ajuste de Banco de Horas</h3>
			<p class="text-sm text-base-content/60 mb-4">
				Funcionário: {funcionarios.find((f) => f._id === funcionarioSelecionado)?.nome || 'N/A'}
			</p>
			<p class="text-sm text-warning mb-4">
				⚠️ Esta funcionalidade requer integração com o formulário de ajuste. Use a página de
				Homologação para criar ajustes.
			</p>
			<div class="modal-action">
				<button
					type="button"
					class="btn"
					onclick={() => {
						mostrarModalAjuste = false;
						funcionarioSelecionado = null;
					}}
				>
					Fechar
				</button>
				<a
					href={`/recursos-humanos/controle-ponto/homologacao?funcionarioId=${funcionarioSelecionado}`}
					class="btn btn-primary"
				>
					Ir para Homologação
				</a>
			</div>
		</div>
	</div>
{/if}





