<script lang="ts">
	import { resolve } from '$app/paths';
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
	import StatsCard from '$lib/components/ti/StatsCard.svelte';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import { format } from 'date-fns';
	import { ptBR } from 'date-fns/locale';
	import {
		Users,
		Shield,
		AlertTriangle,
		Info,
		Building2,
		Filter,
		X,
		Search,
		Smile,
		Tag,
		Eye,
		Calendar,
		Settings
	} from 'lucide-svelte';

	type Role = {
		_id: Id<'roles'>;
		_creationTime: number;
		nome: string;
		descricao: string;
		nivel: number;
		setor?: string;
	};

	const client = useConvexClient();
	const rolesQuery = useQuery(api.roles.listar, {});
	const roles = $derived(rolesQuery?.data ?? []);
	const carregando = $derived(rolesQuery === undefined);

	let busca = $state('');
	let filtroSetor = $state('');
	let filtroNivel = $state<number | ''>('');
	let roleSelecionada = $state<Role | null>(null);
	let modalDetalhesAberto = $state(false);

	const setoresDisponiveis = $derived.by(() => {
		const setores = new Set<string>();
		roles.forEach((r) => {
			if (r.setor) setores.add(r.setor);
		});
		return Array.from(setores).sort();
	});

	// Estatísticas
	const stats = $derived.by(() => {
		if (carregando) return null;

		const nivelMaximo = roles.filter((r) => r.nivel === 0).length;
		const nivelAdministrativo = roles.filter((r) => r.nivel === 1).length;
		const niveisLegado = roles.filter((r) => r.nivel > 1).length;

		return {
			total: roles.length,
			nivelMaximo,
			nivelAdministrativo,
			niveisLegado,
			comSetor: roles.filter((r) => r.setor).length
		};
	});

	const rolesFiltradas = $derived.by(() => {
		let resultado = roles;

		// Filtro por busca (nome ou descrição)
		if (busca.trim()) {
			const buscaLower = busca.toLowerCase();
			resultado = resultado.filter(
				(r) =>
					r.nome.toLowerCase().includes(buscaLower) ||
					r.descricao.toLowerCase().includes(buscaLower)
			);
		}

		// Filtro por setor
		if (filtroSetor) {
			resultado = resultado.filter((r) => r.setor === filtroSetor);
		}

		// Filtro por nível
		if (filtroNivel !== '') {
			if (filtroNivel === 0 || filtroNivel === 1) {
				resultado = resultado.filter((r) => r.nivel === filtroNivel);
			} else {
				// Qualquer outro valor é considerado legado
				resultado = resultado.filter((r) => r.nivel > 1);
			}
		}

		return resultado.sort((a, b) => {
			// Ordenar por nível primeiro (menor nível = maior privilégio)
			if (a.nivel !== b.nivel) return a.nivel - b.nivel;
			// Depois por nome
			return a.nome.localeCompare(b.nome);
		});
	});

	function obterCorNivel(nivel: number): string {
		if (nivel === 0) return 'badge-error';
		if (nivel === 1) return 'badge-warning';
		// Níveis > 1 são considerados legado
		return 'badge-ghost';
	}

	function obterTextoNivel(nivel: number): string {
		if (nivel === 0) return 'Máximo';
		if (nivel === 1) return 'Administrativo';
		return `Legado (${nivel})`;
	}

	function obterCorCardNivel(nivel: number): string {
		if (nivel === 0) return 'border-l-4 border-error';
		if (nivel === 1) return 'border-l-4 border-warning';
		return 'border-l-4 border-base-300';
	}

	function abrirDetalhes(role: Role) {
		roleSelecionada = role;
		modalDetalhesAberto = true;
	}

	function fecharDetalhes() {
		modalDetalhesAberto = false;
		roleSelecionada = null;
	}

	function formatarData(timestamp: number): string {
		try {
			return format(new Date(timestamp), 'dd/MM/yyyy HH:mm', { locale: ptBR });
		} catch {
			return 'Data inválida';
		}
	}

	function limparFiltros() {
		busca = '';
		filtroSetor = '';
		filtroNivel = '';
	}

	const temFiltrosAtivos = $derived(
		busca.trim() !== '' || filtroSetor !== '' || filtroNivel !== ''
	);
</script>

<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
	<div class="container mx-auto max-w-7xl px-4 py-6">
		<!-- Header -->
		<div class="mb-8 flex items-center justify-between">
			<div class="flex items-center gap-4">
				<div class="bg-primary/10 rounded-xl p-3">
					<Users class="text-primary h-8 w-8" strokeWidth={2} />
				</div>
				<div>
					<h1 class="text-base-content text-3xl font-bold">Gestão de Perfis</h1>
					<p class="text-base-content/60 mt-1">
						Visualize e gerencie os perfis de acesso do sistema
					</p>
				</div>
			</div>
		</div>

		<!-- Estatísticas -->
		{#if stats}
			<div class="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
				<StatsCard title="Total de Perfis" value={stats.total} Icon={Users} color="primary" />
				<StatsCard
					title="Nível Máximo (0)"
					value={stats.nivelMaximo}
					description="Acesso total ao sistema"
					Icon={Shield}
					color="error"
				/>
				<StatsCard
					title="Nível Administrativo (1)"
					value={stats.nivelAdministrativo}
					description="Perfis administrativos com acesso total"
					Icon={AlertTriangle}
					color="warning"
				/>
				<StatsCard
					title="Perfis com Setor"
					value={stats.comSetor}
					description={stats.total > 0
						? ((stats.comSetor / stats.total) * 100).toFixed(0) + '% do total'
						: '0%'}
					Icon={Building2}
					color="secondary"
				/>
			</div>
			{#if stats.niveisLegado > 0}
				<div class="alert alert-warning mb-6">
					<Info class="h-5 w-5" />
					<div>
						<h3 class="font-bold">Perfis com níveis legados</h3>
						<p class="text-sm">
							Existem {stats.niveisLegado} perfis com nível acima de 1. Esses perfis continuarão sendo
							tratados como nível 1 (administrativo) após a migração.
						</p>
					</div>
				</div>
			{/if}
		{/if}

		<!-- Filtros -->
		{#if !carregando && roles.length > 0}
			<div class="card bg-base-100 border-base-300 mb-6 border shadow-xl">
				<div class="card-body">
					<div class="mb-4 flex flex-wrap items-center justify-between gap-4">
						<div class="flex items-center gap-2">
							<Filter class="text-primary h-5 w-5" strokeWidth={2} />
							<h2 class="card-title text-lg">Filtros de Busca</h2>
						</div>
						{#if temFiltrosAtivos}
							<button
								type="button"
								class="btn btn-sm btn-outline btn-error"
								onclick={limparFiltros}
							>
								<X class="h-4 w-4" strokeWidth={2} />
								Limpar Filtros
							</button>
						{/if}
					</div>

					<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
						<!-- Busca -->
						<div class="form-control">
							<label class="label" for="busca">
								<span class="label-text font-medium">Buscar</span>
							</label>
							<div class="relative">
								<input
									id="busca"
									type="text"
									bind:value={busca}
									placeholder="Buscar por nome ou descrição..."
									class="input input-bordered w-full pl-10"
								/>
								<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform" strokeWidth={2} />
							</div>
						</div>

						<!-- Setor -->
						<div class="form-control">
							<label class="label" for="filtro-setor">
								<span class="label-text font-medium">Setor</span>
							</label>
							<select id="filtro-setor" bind:value={filtroSetor} class="select select-bordered">
								<option value="">Todos os setores</option>
								{#each setoresDisponiveis as setor}
									<option value={setor}>{setor}</option>
								{/each}
							</select>
						</div>

						<!-- Nível -->
						<div class="form-control">
							<label class="label" for="filtro-nivel">
								<span class="label-text font-medium">Nível de Acesso</span>
							</label>
							<select id="filtro-nivel" bind:value={filtroNivel} class="select select-bordered">
								<option value="">Todos os níveis</option>
								<option value={0}>Máximo (0)</option>
								<option value={1}>Alto (1)</option>
								<option value={2}>Médio (2)</option>
								<option value={3}>Baixo (3+)</option>
							</select>
						</div>
					</div>

					<div class="mt-4 flex items-center justify-between">
						<div class="text-base-content/60 text-sm">
							<span class="text-base-content font-medium">{rolesFiltradas.length}</span>
							de
							<span class="text-base-content font-medium">{roles.length}</span>
							perfil(is)
							{#if temFiltrosAtivos}
								<span class="badge badge-primary badge-sm ml-2">Filtrado</span>
							{/if}
						</div>
					</div>
				</div>
			</div>
		{/if}

		<!-- Lista de Perfis -->
		{#if carregando}
			<div class="flex items-center justify-center py-20">
				<span class="loading loading-spinner loading-lg text-primary"></span>
			</div>
		{:else if roles.length === 0}
			<div class="flex flex-col items-center justify-center py-16 text-center">
				<Users class="text-base-content/30 h-16 w-16" strokeWidth={2} />
				<h3 class="mt-4 text-xl font-semibold">Nenhum perfil encontrado</h3>
				<p class="text-base-content/60 mt-2">Não há perfis cadastrados no sistema.</p>
			</div>
		{:else if rolesFiltradas.length === 0}
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<div class="flex flex-col items-center justify-center py-16 text-center">
						<Smile class="text-base-content/30 mb-4 h-16 w-16" strokeWidth={2} />
						<h3 class="mt-4 text-xl font-semibold">Nenhum perfil encontrado</h3>
						<p class="text-base-content/60 mt-2">
							Nenhum perfil corresponde aos filtros aplicados.
						</p>
						{#if temFiltrosAtivos}
							<button class="btn btn-primary btn-sm mt-4" onclick={limparFiltros}>
								Limpar Filtros
							</button>
						{/if}
					</div>
				</div>
			</div>
		{:else}
			<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
				{#each rolesFiltradas as role}
					<div
						class="card bg-base-100 border-base-300 cursor-pointer border shadow-xl transition-all duration-300 hover:shadow-2xl {obterCorCardNivel(
							role.nivel
						)} hover:scale-[1.02]"
						onclick={() => abrirDetalhes(role)}
					>
						<div class="card-body">
							<div class="mb-4 flex items-start justify-between">
								<div class="flex-1">
									<h2 class="card-title mb-1 text-lg">{role.descricao}</h2>
									<div class="badge {obterCorNivel(role.nivel)} badge-sm">
										{obterTextoNivel(role.nivel)}
									</div>
								</div>
								<div class="bg-base-200 rounded-lg p-2">
									<User class="text-primary h-6 w-6" strokeWidth={2} />
								</div>
							</div>

							<div class="space-y-3 text-sm">
								<div class="bg-base-200 flex items-center gap-2 rounded-lg p-2">
									<Tag class="text-base-content/40 h-4 w-4" strokeWidth={2} />
									<span class="text-base-content/60 font-medium">Nome técnico:</span>
									<code class="bg-base-100 rounded px-2 py-1 font-mono text-xs">{role.nome}</code>
								</div>

								{#if role.setor}
									<div class="bg-base-200 flex items-center gap-2 rounded-lg p-2">
										<Building2 class="text-base-content/40 h-4 w-4" strokeWidth={2} />
										<span class="text-base-content/60 font-medium">Setor:</span>
										<span class="font-medium">{role.setor}</span>
									</div>
								{/if}

								<div class="bg-base-200 flex items-center gap-2 rounded-lg p-2">
									<Shield class="text-base-content/40 h-4 w-4" strokeWidth={2} />
									<span class="text-base-content/60 font-medium">Nível:</span>
									<span class="text-lg font-bold">{role.nivel}</span>
								</div>
							</div>

							<div class="card-actions border-base-300 mt-4 justify-end border-t pt-4">
								<button
									class="btn btn-sm btn-primary btn-outline"
									onclick={(e) => {
										e.stopPropagation();
										abrirDetalhes(role);
									}}
								>
									<Eye class="mr-1 h-4 w-4" strokeWidth={2} />
									Ver Detalhes
								</button>
							</div>
						</div>
					</div>
				{/each}
			</div>
		{/if}
	</div>

	<!-- Modal Detalhes -->
	{#if modalDetalhesAberto && roleSelecionada}
		<div class="modal modal-open">
			<div class="modal-box max-w-3xl">
				<div class="mb-6 flex items-center justify-between">
					<h3 class="text-2xl font-bold">Detalhes do Perfil</h3>
					<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={fecharDetalhes}>
						<X class="h-6 w-6" strokeWidth={2} />
					</button>
				</div>

				<div class="space-y-6">
					<!-- Header do Perfil -->
					<div class="card from-primary/10 to-secondary/10 border-primary/20 border bg-linear-to-r">
						<div class="card-body">
							<div class="flex items-start justify-between">
								<div class="flex-1">
									<h2 class="mb-2 text-2xl font-bold">
										{roleSelecionada.descricao}
									</h2>
									<div class="flex items-center gap-3">
										<div class="badge {obterCorNivel(roleSelecionada.nivel)} badge-lg">
											{obterTextoNivel(roleSelecionada.nivel)}
										</div>
										<span class="text-base-content/60 text-sm">Nível {roleSelecionada.nivel}</span>
									</div>
								</div>
								<div class="bg-base-100 rounded-lg p-3 shadow-sm">
									<User class="text-primary h-8 w-8" strokeWidth={2} />
								</div>
							</div>
						</div>
					</div>

					<!-- Informações Principais -->
					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
						<div class="card bg-base-100 border-base-300 border">
							<div class="card-body">
								<label class="label">
									<span class="label-text flex items-center gap-2 font-semibold">
										<Tag class="text-primary h-5 w-5" strokeWidth={2} />
										Nome Técnico
									</span>
								</label>
								<code class="bg-base-200 mt-2 block rounded-lg px-4 py-3 font-mono text-sm"
									>{roleSelecionada.nome}</code
								>
							</div>
						</div>

						<div class="card bg-base-100 border-base-300 border">
							<div class="card-body">
								<label class="label">
									<span class="label-text flex items-center gap-2 font-semibold">
										<Building2 class="text-primary h-5 w-5" strokeWidth={2} />
										Setor
									</span>
								</label>
								<p class="mt-2 text-lg font-medium">
									{#if roleSelecionada.setor}
										{roleSelecionada.setor}
									{:else}
										<span class="text-base-content/40 italic">Não especificado</span>
									{/if}
								</p>
							</div>
						</div>
					</div>

					<!-- Nível de Acesso -->
					<div class="card bg-base-100 border-base-300 border">
						<div class="card-body">
							<label class="label">
								<span class="label-text flex items-center gap-2 font-semibold">
									<Shield class="text-primary h-5 w-5" strokeWidth={2} />
									Nível de Acesso
								</span>
							</label>
							<div class="mt-4">
								<div class="mb-3 flex items-center gap-4">
									<span class="text-4xl font-bold">{roleSelecionada.nivel}</span>
									<div class="badge {obterCorNivel(roleSelecionada.nivel)} badge-lg">
										{obterTextoNivel(roleSelecionada.nivel)}
									</div>
								</div>
								<div class="alert alert-info">
									<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
									<span class="text-sm">
										{roleSelecionada.nivel === 0 &&
											'Acesso total irrestrito ao sistema. Pode realizar todas as operações sem restrições.'}
										{roleSelecionada.nivel === 1 &&
											'Acesso alto com algumas restrições. Pode realizar a maioria das operações administrativas.'}
										{roleSelecionada.nivel === 2 &&
											'Acesso médio com permissões configuráveis. Pode realizar operações padrão do sistema.'}
										{roleSelecionada.nivel >= 3 &&
											'Acesso limitado com permissões específicas. Operações restritas conforme configuração.'}
									</span>
								</div>
							</div>
						</div>
					</div>

					<!-- Data de Criação -->
					<div class="card bg-base-100 border-base-300 border">
						<div class="card-body">
							<label class="label">
								<span class="label-text flex items-center gap-2 font-semibold">
									<Calendar class="text-primary h-5 w-5" strokeWidth={2} />
									Data de Criação
								</span>
							</label>
							<p class="mt-2 text-lg font-medium">
								{formatarData(roleSelecionada._creationTime)}
							</p>
						</div>
					</div>

					<!-- Informação sobre Permissões -->
					<div class="alert alert-info">
						<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
						<div>
							<h4 class="mb-1 font-semibold">Configuração de Permissões</h4>
							<p class="text-sm">
								Para configurar permissões específicas deste perfil, acesse o <a
									href={resolve('/ti/painel-permissoes')}
									class="link link-primary font-semibold">Painel de Permissões</a
								>.
							</p>
						</div>
					</div>
				</div>

				<div class="modal-action mt-6">
					<button type="button" class="btn" onclick={fecharDetalhes}> Fechar </button>
					<a href={resolve('/ti/painel-permissoes')} class="btn btn-primary">
						<Settings class="mr-2 h-5 w-5" strokeWidth={2} />
						Configurar Permissões
					</a>
				</div>
			</div>
			<div class="modal-backdrop" onclick={fecharDetalhes}></div>
		</div>
	{/if}
</ProtectedRoute>
