<script lang="ts">
	import { useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { maskCPF, maskCEP, maskPhone } from '$lib/utils/masks';
	import { documentos, getDocumentoDefinicao } from '$lib/utils/documentos';
	import {
		SEXO_OPTIONS,
		ESTADO_CIVIL_OPTIONS,
		GRAU_INSTRUCAO_OPTIONS,
		GRUPO_SANGUINEO_OPTIONS,
		FATOR_RH_OPTIONS,
		APOSENTADO_OPTIONS
	} from '$lib/utils/constants';
	import PrintModal from '$lib/components/PrintModal.svelte';
	import {
		MapPin,
		User,
		Edit,
		FileText,
		Printer,
		DollarSign,
		Calendar,
		ArrowRight,
		Download,
		Mail,
		Phone,
		Home,
		Building,
		File,
		X,
		Check,
		Plus,
		ExternalLink,
		BookOpen
	} from 'lucide-svelte';

	const client = useConvexClient();

	let funcionarioId = $derived($page.params.funcionarioId as string);

	let funcionario = $state<any>(null);
	let simbolo = $state<any>(null);
	let cursos = $state<any[]>([]);
	let documentosUrls = $state<Record<string, string | null>>({});
	let loading = $state(true);
	let showPrintModal = $state(false);

	async function load() {
		try {
			loading = true;
			const data = await client.query(api.funcionarios.getFichaCompleta, {
				id: funcionarioId as any
			});

			if (!data) {
				goto(resolve('/recursos-humanos/funcionarios'));
				return;
			}

			funcionario = data;
			simbolo = data.simbolo;
			if (simbolo) {
				funcionario = { ...funcionario, simbolo };
			}
			cursos = data.cursos || [];

			// Carregar URLs dos documentos
			try {
				documentosUrls = await client.query(api.documentos.getDocumentosUrls, {
					funcionarioId: funcionarioId as any
				});
			} catch (err) {
				console.error('Erro ao carregar documentos:', err);
			}
		} catch (err) {
			console.error('Erro ao carregar funcionário:', err);
			goto(resolve('/recursos-humanos/funcionarios'));
		} finally {
			loading = false;
		}
	}

	function getLabelFromOptions(
		value: string | undefined,
		options: Array<{ value: string; label: string }>
	): string {
		if (!value) return '-';
		return options.find((opt) => opt.value === value)?.label || value;
	}

	function downloadDocumento(url: string, nomeDoc: string) {
		if (!url) return;
		const link = document.createElement('a');
		link.href = url;
		link.download = nomeDoc;
		link.target = '_blank';
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	}

	load();
</script>

{#if loading}
	<div class="flex min-h-screen items-center justify-center">
		<span class="loading loading-spinner loading-lg"></span>
	</div>
{:else if funcionario}
	<main class="container mx-auto max-w-7xl px-4 py-4">
		<!-- Breadcrumb -->
		<div class="breadcrumbs mb-4 text-sm">
			<ul>
				<li>
					<a href={resolve('/recursos-humanos')} class="text-primary hover:underline"
						>Recursos Humanos</a
					>
				</li>
				<li>
					<a href={resolve('/recursos-humanos/funcionarios')} class="text-primary hover:underline"
						>Funcionários</a
					>
				</li>
				<li>Detalhes</li>
			</ul>
		</div>

		<!-- Cabeçalho -->
		<div class="mb-6">
			<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
				<div class="flex items-center gap-4">
					<div class="rounded-xl bg-blue-500/20 p-3">
						<User class="h-8 w-8 text-blue-600" strokeWidth={2} />
					</div>
					<div>
						<h1 class="text-primary text-3xl font-bold">{funcionario.nome}</h1>
						<p class="text-base-content/70">
							Matrícula: {funcionario.matricula}
						</p>
					</div>
				</div>

				<div class="flex flex-wrap gap-2">
					<button
						class="btn btn-primary gap-2"
						onclick={() => goto(resolve(`/recursos-humanos/funcionarios/${funcionarioId}/editar`))}
					>
						<Edit class="h-5 w-5" strokeWidth={2} />
						Editar
					</button>
					<button
						class="btn btn-secondary gap-2"
						onclick={() =>
							goto(resolve(`/recursos-humanos/funcionarios/${funcionarioId}/documentos`))}
					>
						<FileText class="h-5 w-5" strokeWidth={2} />
						Ver Documentos
					</button>
					<button class="btn btn-accent gap-2" onclick={() => (showPrintModal = true)}>
						<Printer class="h-5 w-5" strokeWidth={2} />
						Imprimir Ficha
					</button>
					<button
						class="btn btn-info gap-2"
						onclick={() =>
							goto(resolve(`/recursos-humanos/funcionarios/${funcionarioId}/enderecos-marcacao`))}
					>
						<MapPin class="h-5 w-5" />
						Endereços de Marcação
					</button>
				</div>
			</div>
		</div>

		<!-- Dados Financeiros - Destaque -->
		{#if simbolo}
			<div
				class="card from-success/10 to-success/20 border-success/30 mb-6 border bg-linear-to-br shadow-xl"
			>
				<div class="card-body">
					<h3 class="card-title mb-4 border-b pb-3 text-xl">
						<DollarSign class="text-success h-6 w-6" strokeWidth={2} />
						Dados Financeiros
					</h3>
					<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
						<div class="stat bg-base-100/50 rounded-lg p-4">
							<div class="stat-title text-xs">Símbolo</div>
							<div class="stat-value text-2xl">{simbolo.nome}</div>
							<div class="stat-desc text-xs">
								{simbolo.tipo === 'cargo_comissionado'
									? 'Cargo Comissionado'
									: 'Função Gratificada'}
							</div>
						</div>
						{#if funcionario.simboloTipo === 'cargo_comissionado'}
							<div class="stat bg-base-100/50 rounded-lg p-4">
								<div class="stat-title text-xs">Vencimento</div>
								<div class="stat-value text-info text-2xl">
									R$ {simbolo.vencValor}
								</div>
								<div class="stat-desc text-xs">Valor base</div>
							</div>
							<div class="stat bg-base-100/50 rounded-lg p-4">
								<div class="stat-title text-xs">Representação</div>
								<div class="stat-value text-warning text-2xl">
									R$ {simbolo.repValor}
								</div>
								<div class="stat-desc text-xs">Adicional</div>
							</div>
						{/if}
						<div class="stat bg-success/20 border-success/40 rounded-lg border-2 p-4">
							<div class="stat-title text-xs font-bold">Total</div>
							<div class="stat-value text-success text-3xl">
								R$ {simbolo.valor}
							</div>
							<div class="stat-desc text-xs">Remuneração total</div>
						</div>
					</div>
				</div>
			</div>
		{/if}

		<!-- Status de Férias -->
		<div
			class="card mb-6 border border-purple-500/30 bg-linear-to-br from-purple-500/10 to-purple-600/20 shadow-xl"
		>
			<div class="card-body">
				<div class="flex items-center justify-between">
					<div class="flex items-center gap-3">
						<div class="rounded-xl bg-purple-500/20 p-3">
							<Calendar class="h-6 w-6 text-purple-600" strokeWidth={2} />
						</div>
						<div>
							<h3 class="text-lg font-bold">Status Atual</h3>
							<div class="mt-1 flex items-center gap-2">
								{#if funcionario.statusFerias === 'em_ferias'}
									<div class="badge badge-warning badge-lg">🏖️ Em Férias</div>
								{:else}
									<div class="badge badge-success badge-lg">✅ Ativo</div>
								{/if}
							</div>
						</div>
					</div>
					<a href={resolve('/recursos-humanos/ferias')} class="btn btn-primary btn-sm gap-2">
						<Plus class="h-4 w-4" strokeWidth={2} />
						Gerenciar Férias
					</a>
				</div>
			</div>
		</div>

		<!-- Grid de Cards -->
		<div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
			<!-- Coluna 1: Dados Pessoais -->
			<div class="space-y-6">
				<!-- Informações Pessoais -->
				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<h3 class="card-title mb-3 border-b pb-2 text-lg">Informações Pessoais</h3>
						<div class="space-y-2 text-sm">
							<div>
								<span class="font-semibold">CPF:</span>
								{maskCPF(funcionario.cpf)}
							</div>
							<div><span class="font-semibold">RG:</span> {funcionario.rg}</div>
							{#if funcionario.rgOrgaoExpedidor}
								<div>
									<span class="font-semibold">Órgão Expedidor:</span>
									{funcionario.rgOrgaoExpedidor}
								</div>
							{/if}
							{#if funcionario.rgDataEmissao}
								<div>
									<span class="font-semibold">Data Emissão RG:</span>
									{funcionario.rgDataEmissao}
								</div>
							{/if}
							<div>
								<span class="font-semibold">Data Nascimento:</span>
								{funcionario.nascimento}
							</div>
							{#if funcionario.sexo}
								<div>
									<span class="font-semibold">Sexo:</span>
									{getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)}
								</div>
							{/if}
							{#if funcionario.estadoCivil}
								<div>
									<span class="font-semibold">Estado Civil:</span>
									{getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)}
								</div>
							{/if}
							{#if funcionario.nacionalidade}
								<div>
									<span class="font-semibold">Nacionalidade:</span>
									{funcionario.nacionalidade}
								</div>
							{/if}
						</div>
					</div>
				</div>

				<!-- Filiação -->
				{#if funcionario.nomePai || funcionario.nomeMae}
					<div class="card bg-base-100 shadow-xl">
						<div class="card-body">
							<h3 class="card-title mb-3 border-b pb-2 text-lg">Filiação</h3>
							<div class="space-y-2 text-sm">
								{#if funcionario.nomePai}
									<div>
										<span class="font-semibold">Pai:</span>
										{funcionario.nomePai}
									</div>
								{/if}
								{#if funcionario.nomeMae}
									<div>
										<span class="font-semibold">Mãe:</span>
										{funcionario.nomeMae}
									</div>
								{/if}
							</div>
						</div>
					</div>
				{/if}

				<!-- Naturalidade -->
				{#if funcionario.naturalidade || funcionario.naturalidadeUF}
					<div class="card bg-base-100 shadow-xl">
						<div class="card-body">
							<h3 class="card-title mb-3 border-b pb-2 text-lg">Naturalidade</h3>
							<div class="space-y-2 text-sm">
								{#if funcionario.naturalidade}
									<div>
										<span class="font-semibold">Cidade:</span>
										{funcionario.naturalidade}
									</div>
								{/if}
								{#if funcionario.naturalidadeUF}
									<div>
										<span class="font-semibold">UF:</span>
										{funcionario.naturalidadeUF}
									</div>
								{/if}
							</div>
						</div>
					</div>
				{/if}
			</div>

			<!-- Coluna 2: Cargo, Formação e Cursos -->
			<div class="space-y-6">
				<!-- Cargo e Vínculo -->
				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<h3 class="card-title mb-3 border-b pb-2 text-lg">Cargo e Vínculo</h3>
						<div class="space-y-2 text-sm">
							<div>
								<span class="font-semibold">Tipo:</span>
								{funcionario.simboloTipo === 'cargo_comissionado'
									? 'Cargo Comissionado'
									: 'Função Gratificada'}
							</div>
							{#if simbolo}
								<div>
									<span class="font-semibold">Símbolo:</span>
									{simbolo.nome}
								</div>
								<div class="text-base-content/70 text-xs">
									{simbolo.descricao}
								</div>
							{/if}
							{#if funcionario.descricaoCargo}
								<div class="mt-2">
									<span class="font-semibold">Descrição:</span>
									{funcionario.descricaoCargo}
								</div>
							{/if}
							{#if funcionario.admissaoData}
								<div class="mt-2">
									<span class="font-semibold">Data Admissão:</span>
									{funcionario.admissaoData}
								</div>
							{/if}
							{#if funcionario.nomeacaoPortaria}
								<div>
									<span class="font-semibold">Portaria:</span>
									{funcionario.nomeacaoPortaria}
								</div>
							{/if}
							{#if funcionario.nomeacaoData}
								<div>
									<span class="font-semibold">Data Nomeação:</span>
									{funcionario.nomeacaoData}
								</div>
							{/if}
							{#if funcionario.nomeacaoDOE}
								<div>
									<span class="font-semibold">DOE:</span>
									{funcionario.nomeacaoDOE}
								</div>
							{/if}
							{#if funcionario.pertenceOrgaoPublico}
								<div class="mt-2">
									<span class="font-semibold">Pertence Órgão Público:</span> Sim
								</div>
								{#if funcionario.orgaoOrigem}
									<div>
										<span class="font-semibold">Órgão Origem:</span>
										{funcionario.orgaoOrigem}
									</div>
								{/if}
							{/if}
							{#if funcionario.aposentado && funcionario.aposentado !== 'nao'}
								<div>
									<span class="font-semibold">Aposentado:</span>
									{getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)}
								</div>
							{/if}
						</div>
					</div>
				</div>
				<!-- Documentos Pessoais -->
				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<h3 class="card-title mb-3 border-b pb-2 text-lg">Documentos Pessoais</h3>
						<div class="space-y-2 text-sm">
							{#if funcionario.carteiraProfissionalNumero}
								<div>
									<span class="font-semibold">Cart. Profissional:</span>
									{funcionario.carteiraProfissionalNumero}
									{#if funcionario.carteiraProfissionalSerie}
										- Série: {funcionario.carteiraProfissionalSerie}
									{/if}
								</div>
							{/if}
							{#if funcionario.reservistaNumero}
								<div>
									<span class="font-semibold">Reservista:</span>
									{funcionario.reservistaNumero}
									{#if funcionario.reservistaSerie}
										- Série: {funcionario.reservistaSerie}
									{/if}
								</div>
							{/if}
							{#if funcionario.tituloEleitorNumero}
								<div>
									<span class="font-semibold">Título Eleitor:</span>
									{funcionario.tituloEleitorNumero}
								</div>
								{#if funcionario.tituloEleitorZona || funcionario.tituloEleitorSecao}
									<div class="ml-4 text-xs">
										{#if funcionario.tituloEleitorZona}Zona: {funcionario.tituloEleitorZona}{/if}
										{#if funcionario.tituloEleitorSecao}
											- Seção: {funcionario.tituloEleitorSecao}{/if}
									</div>
								{/if}
							{/if}
							{#if funcionario.pisNumero}
								<div>
									<span class="font-semibold">PIS/PASEP:</span>
									{funcionario.pisNumero}
								</div>
							{/if}
						</div>
					</div>
				</div>

				<!-- Formação -->
				{#if funcionario.grauInstrucao || funcionario.formacao}
					<div class="card bg-base-100 shadow-xl">
						<div class="card-body">
							<h3 class="card-title mb-3 border-b pb-2 text-lg">Formação</h3>
							<div class="space-y-2 text-sm">
								{#if funcionario.grauInstrucao}
									<div>
										<span class="font-semibold">Grau Instrução:</span>
										{getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)}
									</div>
								{/if}
								{#if funcionario.formacao}
									<div>
										<span class="font-semibold">Formação:</span>
										{funcionario.formacao}
									</div>
								{/if}
								{#if funcionario.formacaoRegistro}
									<div>
										<span class="font-semibold">Registro Nº:</span>
										{funcionario.formacaoRegistro}
									</div>
								{/if}
							</div>
						</div>
					</div>
				{/if}

				<!-- Cursos e Treinamentos -->
				{#if cursos && cursos.length > 0}
					<div class="card bg-base-100 shadow-xl">
						<div class="card-body">
						<h3 class="card-title mb-3 border-b pb-2 text-lg">
							<BookOpen class="h-5 w-5" strokeWidth={2} />
							Cursos e Treinamentos
						</h3>
							<div class="space-y-3">
								{#each cursos as curso}
									<div class="bg-base-200 flex items-start gap-3 rounded-lg p-3">
										<div class="flex-1">
											<p class="text-sm font-semibold">{curso.descricao}</p>
											<p class="text-base-content/70 mt-1 text-xs">
												<Calendar class="mr-1 inline h-3 w-3" strokeWidth={2} />
												{curso.data}
											</p>
										</div>
										{#if curso.certificadoUrl}
											<a
												href={curso.certificadoUrl}
												target="_blank"
												rel="noopener noreferrer"
												class="btn btn-xs btn-primary gap-1"
											>
												<FileText class="h-3 w-3" strokeWidth={2} />
												Certificado
											</a>
										{/if}
									</div>
								{/each}
							</div>
						</div>
					</div>
				{/if}

				<!-- Saúde -->
				{#if funcionario.grupoSanguineo || funcionario.fatorRH}
					<div class="card bg-base-100 shadow-xl">
						<div class="card-body">
							<h3 class="card-title mb-3 border-b pb-2 text-lg">Saúde</h3>
							<div class="space-y-2 text-sm">
								{#if funcionario.grupoSanguineo}
									<div>
										<span class="font-semibold">Grupo Sanguíneo:</span>
										{funcionario.grupoSanguineo}
									</div>
								{/if}
								{#if funcionario.fatorRH}
									<div>
										<span class="font-semibold">Fator RH:</span>
										{getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)}
									</div>
								{/if}
							</div>
						</div>
					</div>
				{/if}

				<!-- Contato -->
				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<h3 class="card-title mb-3 border-b pb-2 text-lg">Contato</h3>
						<div class="space-y-2 text-sm">
							<div>
								<span class="font-semibold">E-mail:</span>
								{funcionario.email}
							</div>
							<div>
								<span class="font-semibold">Telefone:</span>
								{maskPhone(funcionario.telefone)}
							</div>
						</div>
					</div>
				</div>

				<!-- Endereço -->
				<div class="card bg-base-100 shadow-xl">
					<div class="card-body">
						<h3 class="card-title mb-3 border-b pb-2 text-lg">Endereço</h3>
						<div class="space-y-2 text-sm">
							<div>{funcionario.endereco}</div>
							<div>{funcionario.cidade} - {funcionario.uf}</div>
							<div>
								<span class="font-semibold">CEP:</span>
								{maskCEP(funcionario.cep)}
							</div>
						</div>
					</div>
				</div>

				<!-- Dados Bancários -->
				{#if funcionario.contaBradescoNumero}
					<div class="card bg-base-100 shadow-xl">
						<div class="card-body">
							<h3 class="card-title mb-3 border-b pb-2 text-lg">Dados Bancários - Bradesco</h3>
							<div class="space-y-2 text-sm">
								<div>
									<span class="font-semibold">Conta:</span>
									{funcionario.contaBradescoNumero}
									{#if funcionario.contaBradescoDV}-{funcionario.contaBradescoDV}{/if}
								</div>
								{#if funcionario.contaBradescoAgencia}
									<div>
										<span class="font-semibold">Agência:</span>
										{funcionario.contaBradescoAgencia}
									</div>
								{/if}
							</div>
						</div>
					</div>
				{/if}
			</div>
		</div>

		<!-- Documentos Anexados -->
		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<h3 class="card-title mb-4 border-b pb-3 text-xl">
					<FileText class="h-5 w-5" strokeWidth={2} />
					Documentos Anexados
				</h3>

				<div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4">
					{#each documentos as doc}
						{@const temDocumento = documentosUrls[doc.campo]}
						<div
							class="card bg-base-200 border-2 shadow-sm"
							class:border-success={temDocumento}
							class:border-base-300={!temDocumento}
						>
							<div class="card-body p-3">
								<div class="flex items-start gap-2">
									<div
										class={`flex h-8 w-8 shrink-0 items-center justify-center rounded ${temDocumento ? 'bg-success/20' : 'bg-base-300'}`}
									>
										{#if temDocumento}
											<Check class="text-success h-4 w-4" strokeWidth={2} />
										{:else}
											<Plus class="text-base-content/40 h-4 w-4" strokeWidth={2} />
										{/if}
									</div>
									<div class="min-w-0 flex-1">
										<p class="line-clamp-2 text-xs font-medium">{doc.nome}</p>
										<p class="text-base-content/60 mt-1 text-xs">
											{temDocumento ? 'Enviado' : 'Pendente'}
										</p>
										{#if temDocumento}
											<button
												class="btn btn-xs btn-ghost mt-2 gap-1"
												onclick={() => downloadDocumento(documentosUrls[doc.campo] || '', doc.nome)}
											>
												<Download class="h-3 w-3" strokeWidth={2} />
												Baixar
											</button>
										{/if}
									</div>
								</div>
							</div>
						</div>
					{/each}
				</div>

				<div class="mt-4 text-center">
					<button
						class="btn btn-primary btn-sm gap-2"
						onclick={() =>
							goto(resolve(`/recursos-humanos/funcionarios/${funcionarioId}/documentos`))}
					>
						<ExternalLink class="h-4 w-4" strokeWidth={2} />
						Gerenciar Documentos
					</button>
				</div>
			</div>
		</div>
	</main>

	<!-- Modal de Impressão -->
	{#if showPrintModal}
		<PrintModal {funcionario} onClose={() => (showPrintModal = false)} />
	{/if}

	<!-- Modal de Impressão Dados Financeiros removido -->
{/if}
