<script lang="ts">
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import { useQuery } from 'convex-svelte';

	interface Props {
		funcionarioId: Id<'funcionarios'>;
	}

	const { funcionarioId }: Props = $props();

	// Queries
	const saldosQuery = useQuery(api.saldoFerias.listarSaldos, { funcionarioId });
	const solicitacoesQuery = useQuery(api.ferias.listarMinhasSolicitacoes, {
		funcionarioId
	});

	let saldos = $derived(saldosQuery.data || []);
	let solicitacoes = $derived(solicitacoesQuery.data || []);

	// Estatísticas derivadas
	let saldoAtual = $derived(saldos.find((s) => s.anoReferencia === new Date().getFullYear()));
	let totalSolicitacoes = $derived(solicitacoes.length);
	let aprovadas = $derived(
		solicitacoes.filter((s) => s.status === 'aprovado' || s.status === 'data_ajustada_aprovada')
			.length
	);
	let pendentes = $derived(solicitacoes.filter((s) => s.status === 'aguardando_aprovacao').length);
	let reprovadas = $derived(solicitacoes.filter((s) => s.status === 'reprovado').length);

	// Canvas para gráfico de pizza
	let canvasSaldo = $state<HTMLCanvasElement>();
	let canvasStatus = $state<HTMLCanvasElement>();

	// Função para desenhar gráfico de pizza moderno
	function desenharGraficoPizza(
		canvas: HTMLCanvasElement,
		dados: { label: string; valor: number; cor: string }[]
	) {
		const ctx = canvas.getContext('2d');
		if (!ctx) return;

		const width = canvas.width;
		const height = canvas.height;
		const centerX = width / 2;
		const centerY = height / 2;
		const radius = Math.min(width, height) / 2 - 20;

		ctx.clearRect(0, 0, width, height);

		const total = dados.reduce((acc, d) => acc + d.valor, 0);
		if (total === 0) return;

		let startAngle = -Math.PI / 2;

		dados.forEach((item) => {
			const sliceAngle = (2 * Math.PI * item.valor) / total;

			// Desenhar fatia com sombra
			ctx.save();
			ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
			ctx.shadowBlur = 15;
			ctx.shadowOffsetX = 5;
			ctx.shadowOffsetY = 5;

			ctx.beginPath();
			ctx.moveTo(centerX, centerY);
			ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
			ctx.closePath();

			ctx.fillStyle = item.cor;
			ctx.fill();

			ctx.restore();

			// Desenhar borda branca
			ctx.strokeStyle = '#ffffff';
			ctx.lineWidth = 3;
			ctx.stroke();

			startAngle += sliceAngle;
		});

		// Desenhar círculo branco no centro (efeito donut)
		ctx.beginPath();
		ctx.arc(centerX, centerY, radius * 0.6, 0, 2 * Math.PI);
		ctx.fillStyle = '#ffffff';
		ctx.fill();
	}

	// Atualizar gráficos quando dados mudarem
	$effect(() => {
		if (canvasSaldo && saldoAtual) {
			desenharGraficoPizza(canvasSaldo, [
				{ label: 'Usado', valor: saldoAtual.diasUsados, cor: '#ff6b6b' },
				{ label: 'Pendente', valor: saldoAtual.diasPendentes, cor: '#ffa94d' },
				{
					label: 'Disponível',
					valor: saldoAtual.diasDisponiveis,
					cor: '#51cf66'
				}
			]);
		}

		if (canvasStatus && totalSolicitacoes > 0) {
			desenharGraficoPizza(canvasStatus, [
				{ label: 'Aprovadas', valor: aprovadas, cor: '#51cf66' },
				{ label: 'Pendentes', valor: pendentes, cor: '#ffa94d' },
				{ label: 'Reprovadas', valor: reprovadas, cor: '#ff6b6b' }
			]);
		}
	});
</script>

<div class="dashboard-ferias">
	<!-- Header -->
	<div class="mb-8">
		<h1
			class="from-primary to-secondary bg-linear-to-r bg-clip-text text-4xl font-bold text-transparent"
		>
			📊 Dashboard de Férias
		</h1>
		<p class="text-base-content/70 mt-2">Visualize seus saldos e histórico de solicitações</p>
	</div>

	{#if saldosQuery.isLoading || solicitacoesQuery.isLoading}
		<!-- Loading Skeletons -->
		<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
			{#each Array(4)}
				<div class="skeleton h-32 rounded-2xl"></div>
			{/each}
		</div>
	{:else}
		<!-- Cards de Estatísticas -->
		<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
			<!-- Card 1: Saldo Disponível -->
			<div
				class="stat from-success/20 to-success/5 border-success/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
			>
				<div class="stat-figure text-success">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						class="inline-block h-10 w-10 stroke-current"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
						></path>
					</svg>
				</div>
				<div class="stat-title text-success font-semibold">Disponível</div>
				<div class="stat-value text-success text-4xl">
					{saldoAtual?.diasDisponiveis || 0}
				</div>
				<div class="stat-desc text-success/70">dias para usar</div>
			</div>

			<!-- Card 2: Dias Usados -->
			<div
				class="stat from-error/20 to-error/5 border-error/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
			>
				<div class="stat-figure text-error">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						class="inline-block h-10 w-10 stroke-current"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M6 18L18 6M6 6l12 12"
						></path>
					</svg>
				</div>
				<div class="stat-title text-error font-semibold">Usado</div>
				<div class="stat-value text-error text-4xl">
					{saldoAtual?.diasUsados || 0}
				</div>
				<div class="stat-desc text-error/70">dias já gozados</div>
			</div>

			<!-- Card 3: Pendentes -->
			<div
				class="stat from-warning/20 to-warning/5 border-warning/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
			>
				<div class="stat-figure text-warning">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						class="inline-block h-10 w-10 stroke-current"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
						></path>
					</svg>
				</div>
				<div class="stat-title text-warning font-semibold">Pendentes</div>
				<div class="stat-value text-warning text-4xl">
					{saldoAtual?.diasPendentes || 0}
				</div>
				<div class="stat-desc text-warning/70">aguardando aprovação</div>
			</div>

			<!-- Card 4: Total de Direito -->
			<div
				class="stat from-primary/20 to-primary/5 border-primary/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
			>
				<div class="stat-figure text-primary">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						class="inline-block h-10 w-10 stroke-current"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M13 10V3L4 14h7v7l9-11h-7z"
						></path>
					</svg>
				</div>
				<div class="stat-title text-primary font-semibold">Total Direito</div>
				<div class="stat-value text-primary text-4xl">
					{saldoAtual?.diasDireito || 0}
				</div>
				<div class="stat-desc text-primary/70">dias no ano</div>
			</div>
		</div>

		<!-- Gráficos -->
		<div class="mb-8 grid grid-cols-1 gap-8 lg:grid-cols-2">
			<!-- Gráfico 1: Distribuição de Saldo -->
			<div class="card bg-base-100 border-base-300 border-2 shadow-2xl">
				<div class="card-body">
					<h2 class="card-title mb-4 text-2xl">
						🥧 Distribuição de Saldo
						<div class="badge badge-primary badge-lg">
							Ano {saldoAtual?.anoReferencia || new Date().getFullYear()}
						</div>
					</h2>

					{#if saldoAtual}
						<div class="flex items-center justify-center">
							<canvas bind:this={canvasSaldo} width="300" height="300" class="max-w-full"></canvas>
						</div>

						<!-- Legenda -->
						<div class="mt-4 flex flex-wrap justify-center gap-4">
							<div class="flex items-center gap-2">
								<div class="h-4 w-4 rounded-full bg-[#51cf66]"></div>
								<span class="text-sm font-semibold"
									>Disponível: {saldoAtual.diasDisponiveis} dias</span
								>
							</div>
							<div class="flex items-center gap-2">
								<div class="h-4 w-4 rounded-full bg-[#ffa94d]"></div>
								<span class="text-sm font-semibold">Pendente: {saldoAtual.diasPendentes} dias</span>
							</div>
							<div class="flex items-center gap-2">
								<div class="h-4 w-4 rounded-full bg-[#ff6b6b]"></div>
								<span class="text-sm font-semibold">Usado: {saldoAtual.diasUsados} dias</span>
							</div>
						</div>
					{:else}
						<div class="alert alert-info">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								class="h-6 w-6 shrink-0 stroke-current"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
								></path>
							</svg>
							<span>Nenhum saldo disponível para o ano atual</span>
						</div>
					{/if}
				</div>
			</div>

			<!-- Gráfico 2: Status de Solicitações -->
			<div class="card bg-base-100 border-base-300 border-2 shadow-2xl">
				<div class="card-body">
					<h2 class="card-title mb-4 text-2xl">
						📋 Status de Solicitações
						<div class="badge badge-secondary badge-lg">
							Total: {totalSolicitacoes}
						</div>
					</h2>

					{#if totalSolicitacoes > 0}
						<div class="flex items-center justify-center">
							<canvas bind:this={canvasStatus} width="300" height="300" class="max-w-full"></canvas>
						</div>

						<!-- Legenda -->
						<div class="mt-4 flex flex-wrap justify-center gap-4">
							<div class="flex items-center gap-2">
								<div class="h-4 w-4 rounded-full bg-[#51cf66]"></div>
								<span class="text-sm font-semibold">Aprovadas: {aprovadas}</span>
							</div>
							<div class="flex items-center gap-2">
								<div class="h-4 w-4 rounded-full bg-[#ffa94d]"></div>
								<span class="text-sm font-semibold">Pendentes: {pendentes}</span>
							</div>
							<div class="flex items-center gap-2">
								<div class="h-4 w-4 rounded-full bg-[#ff6b6b]"></div>
								<span class="text-sm font-semibold">Reprovadas: {reprovadas}</span>
							</div>
						</div>
					{:else}
						<div class="alert alert-info">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								class="h-6 w-6 shrink-0 stroke-current"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
								></path>
							</svg>
							<span>Nenhuma solicitação de férias ainda</span>
						</div>
					{/if}
				</div>
			</div>
		</div>

		<!-- Histórico de Saldos -->
		{#if saldos.length > 0}
			<div class="card bg-base-100 border-base-300 border-2 shadow-2xl">
				<div class="card-body">
					<h2 class="card-title mb-4 text-2xl">📅 Histórico de Saldos</h2>

					<div class="overflow-x-auto">
						<table class="table-zebra table">
							<thead>
								<tr>
									<th>Ano</th>
									<th>Direito</th>
									<th>Usado</th>
									<th>Pendente</th>
									<th>Disponível</th>
									<th>Status</th>
								</tr>
							</thead>
							<tbody>
								{#each saldos as saldo (saldo._id)}
									<tr>
										<td class="font-bold">{saldo.anoReferencia}</td>
										<td>{saldo.diasDireito} dias</td>
										<td><span class="badge badge-error">{saldo.diasUsados}</span></td>
										<td><span class="badge badge-warning">{saldo.diasPendentes}</span></td>
										<td><span class="badge badge-success">{saldo.diasDisponiveis}</span></td>
										<td>
											{#if saldo.status === 'ativo'}
												<span class="badge badge-success">Ativo</span>
											{:else if saldo.status === 'vencido'}
												<span class="badge badge-error">Vencido</span>
											{:else}
												<span class="badge badge-neutral">Concluído</span>
											{/if}
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		{/if}
	{/if}
</div>

<style>
	.bg-clip-text {
		-webkit-background-clip: text;
		background-clip: text;
	}

	canvas {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
</style>
