<script lang="ts">
	import { resolve } from '$app/paths';
	import {
		Settings,
		Headphones,
		ShieldCheck,
		Mail,
		Users,
		Bell,
		Monitor,
		FileText,
		UserPlus,
		Clock,
		Video,
		Building,
		Info,
		AlertCircle
	} from 'lucide-svelte';
	type HighlightVariant = 'solid' | 'outline';
	type FeatureIcon =
		| 'control'
		| 'support'
		| 'shieldCheck'
		| 'envelope'
		| 'users'
		| 'bell'
		| 'monitor'
		| 'document'
		| 'teams'
		| 'userPlus'
		| 'clock'
		| 'video'
		| 'building'
		| 'alertCircle';
	type PaletteKey = 'primary' | 'success' | 'secondary' | 'accent' | 'info' | 'error' | 'warning';

	type TiRouteId =
		| '/(dashboard)/ti/painel-administrativo'
		| '/(dashboard)/ti/cibersecurity'
		| '/(dashboard)/ti/central-chamados'
		| '/(dashboard)/ti/painel-permissoes'
		| '/(dashboard)/ti/configuracoes-email'
		| '/(dashboard)/ti/monitoramento-emails'
		| '/(dashboard)/ti/usuarios'
		| '/(dashboard)/ti/solicitacoes-acesso'
		| '/(dashboard)/ti/times'
		| '/(dashboard)/ti/notificacoes'
		| '/(dashboard)/ti/erros-servidor'
		| '/(dashboard)/ti/monitoramento'
		| '/(dashboard)/ti/configuracoes-ponto'
		| '/(dashboard)/ti/configuracoes-relogio'
		| '/(dashboard)/ti/configuracoes-jitsi'
		| '/(dashboard)/configuracoes/setores';

	type FeatureCard = {
		title: string;
		description: string;
		ctaLabel: string;
		href?: TiRouteId;
		disabled?: boolean;
		palette: PaletteKey;
		icon: FeatureIcon;
		highlightBadges?: Array<{ label: string; variant: HighlightVariant }>;
	};

	const paletteStyles: Record<
		PaletteKey,
		{
			cardBorder: string;
			iconBg: string;
			iconRing: string;
			iconColor: string;
			button: string;
			badgeSolid: string;
			badgeOutline: string;
		}
	> = {
		primary: {
			cardBorder: 'border-primary/25',
			iconBg: 'bg-primary/15',
			iconRing: 'ring-1 ring-primary/30',
			iconColor: 'text-primary',
			button: 'btn-primary',
			badgeSolid: 'badge-primary text-primary-content',
			badgeOutline: 'badge-outline border-primary/30'
		},
		success: {
			cardBorder: 'border-success/25',
			iconBg: 'bg-success/15',
			iconRing: 'ring-1 ring-success/25',
			iconColor: 'text-success',
			button: 'btn-success',
			badgeSolid: 'badge-success text-success-content',
			badgeOutline: 'badge-outline border-success/30'
		},
		secondary: {
			cardBorder: 'border-secondary/25',
			iconBg: 'bg-secondary/15',
			iconRing: 'ring-1 ring-secondary/25',
			iconColor: 'text-secondary',
			button: 'btn-secondary',
			badgeSolid: 'badge-secondary text-secondary-content',
			badgeOutline: 'badge-outline border-secondary/30'
		},
		accent: {
			cardBorder: 'border-accent/25',
			iconBg: 'bg-accent/15',
			iconRing: 'ring-1 ring-accent/20',
			iconColor: 'text-accent',
			button: 'btn-accent',
			badgeSolid: 'badge-accent text-accent-content',
			badgeOutline: 'badge-outline border-accent/30'
		},
		info: {
			cardBorder: 'border-info/25',
			iconBg: 'bg-info/15',
			iconRing: 'ring-1 ring-info/25',
			iconColor: 'text-info',
			button: 'btn-info',
			badgeSolid: 'badge-info text-info-content',
			badgeOutline: 'badge-outline border-info/30'
		},
		error: {
			cardBorder: 'border-error/20',
			iconBg: 'bg-error/15',
			iconRing: 'ring-1 ring-error/25',
			iconColor: 'text-error',
			button: 'btn-error',
			badgeSolid: 'badge-error text-error-content',
			badgeOutline: 'badge-outline border-error/30'
		},
		warning: {
			cardBorder: 'border-warning/25',
			iconBg: 'bg-warning/15',
			iconRing: 'ring-1 ring-warning/25',
			iconColor: 'text-warning',
			button: 'btn-warning',
			badgeSolid: 'badge-warning text-warning-content',
			badgeOutline: 'badge-outline border-warning/30'
		}
	};

	// Mapeamento de ícones para componentes Lucide
	const iconComponents: Record<FeatureIcon, typeof Settings> = {
		control: Settings,
		support: Headphones,
		shieldCheck: ShieldCheck,
		envelope: Mail,
		users: Users,
		bell: Bell,
		monitor: Monitor,
		document: FileText,
		teams: Users,
		userPlus: UserPlus,
		clock: Clock,
		video: Video,
		building: Building,
		alertCircle: AlertCircle
	};

	// Removido: iconPaths substituído por iconComponents com Lucide
	const iconPaths_OLD: Record<FeatureIcon, IconPath[]> = {
		control: [
			{
				d: 'M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		support: [
			{
				d: 'M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		shieldCheck: [
			{
				d: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		envelope: [
			{
				d: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		users: [
			{
				d: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		bell: [
			{
				d: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		monitor: [
			{
				d: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		document: [
			{
				d: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		teams: [
			{
				d: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		userPlus: [
			{
				d: 'M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		clock: [
			{
				d: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		video: [
			{
				d: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		],
		building: [
			{
				d: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
				strokeLinecap: 'round',
				strokeLinejoin: 'round'
			}
		]
	};

	const featureCards: Array<FeatureCard> = [
		{
			title: 'Painel Administrativo',
			description:
				'Acesso restrito para gerenciamento de solicitações de acesso ao sistema e outras configurações administrativas.',
			ctaLabel: 'Acessar Painel',
			href: '/(dashboard)/ti/painel-administrativo',
			palette: 'primary',
			icon: 'control'
		},
		{
			title: 'Cibersecurity SGSE - Central de Segurança Cibernética',
			description:
				'Central desegurança cibernética com detecção de DDoS, SQLi, APT, bloqueios automatizados, relatórios refinados e alertas sonoros/visuais.',
			ctaLabel: 'Abrir Central',
			href: '/(dashboard)/ti/cibersecurity',
			palette: 'error',
			icon: 'shieldCheck',
			highlightBadges: [
				{ label: 'Layerchart', variant: 'solid' },
				{ label: 'Alertas TI', variant: 'outline' }
			]
		},
		{
			title: 'Central de Chamados',
			description:
				'Monitore tickets, configure SLA, atribua responsáveis e acompanhe alertas de prazos.',
			ctaLabel: 'Abrir Central',
			href: '/(dashboard)/ti/central-chamados',
			palette: 'info',
			icon: 'support',
			highlightBadges: [
				{ label: 'SLA', variant: 'solid' },
				{ label: 'Alertas', variant: 'outline' }
			]
		},
		{
			title: 'Gerenciar Permissões',
			description:
				'Configure as permissões de acesso aos menus do sistema por função. Controle quem pode acessar, consultar e gravar dados.',
			ctaLabel: 'Configurar Permissões',
			href: '/(dashboard)/ti/painel-permissoes',
			palette: 'success',
			icon: 'shieldCheck'
		},
		{
			title: 'Erros do Servidor',
			description:
				'Monitoramento e análise de erros 404 e 500 do servidor. Visualize histórico, estatísticas e detalhes dos erros registrados.',
			ctaLabel: 'Ver Erros',
			href: '/(dashboard)/ti/erros-servidor',
			palette: 'error',
			icon: 'alertCircle',
			highlightBadges: [
				{ label: '404/500', variant: 'solid' },
				{ label: 'Monitoramento', variant: 'outline' }
			]
		},
		{
			title: 'LGPD - Proteção de Dados',
			description:
				'Gerenciar solicitações LGPD, consentimentos, registros de tratamento e conformidade com a Lei Geral de Proteção de Dados.',
			ctaLabel: 'Acessar LGPD',
			href: '/(dashboard)/ti/lgpd',
			palette: 'info',
			icon: 'shieldCheck',
			highlightBadges: [
				{ label: 'Conformidade', variant: 'solid' },
				{ label: 'Direitos', variant: 'outline' }
			]
		},
		{
			title: 'Configurações de Banco de Horas',
			description:
				'Configure limites, regras e alertas do sistema de banco de horas. Gerencie configurações gerais e alertas configuráveis.',
			ctaLabel: 'Configurar Banco de Horas',
			href: '/(dashboard)/ti/configuracoes-banco-horas',
			palette: 'primary',
			icon: 'clock',
			highlightBadges: [
				{ label: 'Alertas', variant: 'solid' },
				{ label: 'Configurações', variant: 'outline' }
			]
		},
		{
			title: 'Configuração de Email',
			description:
				'Configure o servidor SMTP para envio automático de notificações e emails do sistema.',
			ctaLabel: 'Configurar SMTP',
			href: '/(dashboard)/ti/configuracoes-email',
			palette: 'secondary',
			icon: 'envelope'
		},
		{
			title: 'Configurações do Jitsi',
			description:
				'Configure o servidor Jitsi Meet para chamadas de vídeo e áudio no chat. Ajuste domínio, App ID e prefixo de salas.',
			ctaLabel: 'Configurar Jitsi',
			href: '/(dashboard)/ti/configuracoes-jitsi',
			palette: 'primary',
			icon: 'video'
		},
		{
			title: 'Configurações de Ponto',
			description:
				'Configure os horários de trabalho, intervalos e tolerâncias para o sistema de controle de ponto.',
			ctaLabel: 'Configurar Ponto',
			href: '/(dashboard)/ti/configuracoes-ponto',
			palette: 'primary',
			icon: 'clock'
		},
		{
			title: 'Configurações de Relógio',
			description:
				'Configure a sincronização de tempo com servidor NTP ou use o relógio do PC como fallback.',
			ctaLabel: 'Configurar Relógio',
			href: '/(dashboard)/ti/configuracoes-relogio',
			palette: 'info',
			icon: 'clock'
		},
		{
			title: 'Monitoramento de Emails',
			description:
				'Acompanhe o status da fila de emails, identifique problemas de envio e processe manualmente quando necessário.',
			ctaLabel: 'Monitorar Emails',
			href: '/(dashboard)/ti/monitoramento-emails',
			palette: 'info',
			icon: 'envelope',
			highlightBadges: [
				{ label: 'Tempo Real', variant: 'solid' },
				{ label: 'Debug', variant: 'outline' }
			]
		},
		{
			title: 'Gerenciar Usuários',
			description:
				'Criar, editar, bloquear e gerenciar usuários do sistema. Controle total sobre contas de acesso.',
			ctaLabel: 'Gerenciar Usuários',
			href: '/(dashboard)/ti/usuarios',
			palette: 'accent',
			icon: 'users'
		},
		{
			title: 'Gestão de Times',
			description:
				'Organize funcionários em equipes e defina gestores. Gerencie membros e estrutura organizacional do sistema.',
			ctaLabel: 'Gerenciar Times',
			href: '/(dashboard)/ti/times',
			palette: 'success',
			icon: 'teams'
		},
		{
			title: 'Notificações e Mensagens',
			description:
				'Envie notificações para usuários do sistema via chat ou email. Configure templates de mensagens reutilizáveis.',
			ctaLabel: 'Acessar Painel',
			href: '/(dashboard)/ti/notificacoes',
			palette: 'info',
			icon: 'bell'
		},
		{
			title: 'Monitorar SGSE - Sistema de Gerenciamento de Secretaria',
			description:
				'Monitore em tempo real as métricas técnicas do sistema e configure alertas inteligentes para a equipe de TI.',
			ctaLabel: 'Monitorar Sistema',
			href: '/(dashboard)/ti/monitoramento',
			palette: 'error',
			icon: 'monitor',
			highlightBadges: [
				{ label: 'Tempo Real', variant: 'solid' },
				{ label: 'Alertas', variant: 'outline' },
				{ label: 'Relatórios', variant: 'outline' }
			]
		},
		{
			title: 'Gestão de Setores',
			description:
				'Gerencie os setores da organização. Setores são utilizados para organizar funcionários e definir responsabilidades em fluxos de trabalho.',
			ctaLabel: 'Gerenciar Setores',
			href: '/(dashboard)/configuracoes/setores',
			palette: 'accent',
			icon: 'building'
		},
		{
			title: 'Configurações Gerais',
			description:
				'Configure opções gerais do sistema, incluindo setor de compras e outras configurações administrativas.',
			ctaLabel: 'Configurar',
			href: '/(dashboard)/ti/configuracoes',
			palette: 'secondary',
			icon: 'control'
		}
	];
</script>

<main class="mx-auto w-full max-w-7xl space-y-12 px-4 py-10">
	<section
		class="border-primary/25 from-primary/10 via-base-100 to-secondary/20 relative overflow-hidden rounded-3xl border bg-linear-to-br p-8 shadow-2xl"
	>
		<div class="bg-primary/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
		<div class="bg-secondary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
		<div class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
			<div class="max-w-3xl space-y-4">
				<span
					class="border-primary/40 bg-primary/10 text-primary inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1 text-xs font-semibold tracking-[0.28em] uppercase"
				>
					Tecnologia da Informação
				</span>
				<h1 class="text-base-content text-4xl leading-tight font-black sm:text-5xl">
					Sistemas de Informação
				</h1>
				<p class="text-base-content/70 text-base leading-relaxed sm:text-lg">
					Acesso restrito para gerenciamento de solicitações de acesso ao sistema, configuração de
					permissões e monitoramento técnico das operações do SGSE.
				</p>
			</div>
			<div
				class="border-base-200/60 bg-base-100/70 grid grid-cols-2 gap-4 rounded-2xl border p-6 shadow-lg backdrop-blur sm:max-w-sm"
			>
				<div>
					<p class="text-base-content/60 text-sm font-semibold">Status</p>
					<p class="text-base-content mt-2 text-2xl font-bold">Operacional</p>
				</div>
				<div class="text-right">
					<p class="text-base-content/60 text-sm font-semibold">Última atualização</p>
					<p class="text-base-content mt-2 text-xl font-bold">Agora mesmo</p>
				</div>
				<div
					class="via-base-300 col-span-2 h-px bg-linear-to-r from-transparent to-transparent"
				></div>
				<div class="text-base-content/70 col-span-2 flex items-center justify-between text-sm">
					<span>Monitoramento em tempo real.</span>
					<span class="badge badge-primary badge-sm">SGSE</span>
				</div>
			</div>
		</div>
	</section>

	<section class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
		{#each featureCards as card (card.title)}
			{#if card.href && !card.disabled}
				<a
					href={resolve(card.href)}
					class={`group relative flex cursor-pointer items-center gap-4 overflow-hidden rounded-2xl border ${paletteStyles[card.palette].cardBorder} bg-base-100/90 p-6 shadow-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-xl`}
				>
					<div
						class="from-base-200/40 absolute inset-x-6 top-0 h-24 rounded-b-full bg-linear-to-b to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
					></div>
					<div
						class={`relative flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl ${paletteStyles[card.palette].iconBg} ${paletteStyles[card.palette].iconRing}`}
					>
						<svelte:component
							this={iconComponents[card.icon]}
							class={`h-7 w-7 ${paletteStyles[card.palette].iconColor}`}
							strokeWidth={2}
						/>
					</div>
					<div class="relative flex-1">
						<h2 class="text-base-content text-xl font-semibold">
							{card.title}
						</h2>
					</div>
				</a>
			{:else}
				<article
					class={`group relative flex cursor-not-allowed items-center gap-4 overflow-hidden rounded-2xl border ${paletteStyles[card.palette].cardBorder} bg-base-100/50 p-6 opacity-60 shadow-lg`}
				>
					<div
						class={`relative flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl ${paletteStyles[card.palette].iconBg} ${paletteStyles[card.palette].iconRing}`}
					>
						<svelte:component
							this={iconComponents[card.icon]}
							class={`h-7 w-7 ${paletteStyles[card.palette].iconColor}`}
							strokeWidth={2}
						/>
					</div>
					<div class="relative flex-1">
						<h2 class="text-base-content text-xl font-semibold">
							{card.title}
						</h2>
					</div>
				</article>
			{/if}
		{/each}
	</section>

	<section
		class="border-warning/30 from-warning/15 via-warning/10 to-warning/5 relative overflow-hidden rounded-2xl border bg-linear-to-br p-6 shadow-lg"
	>
		<div class="bg-warning/30 absolute -top-10 right-0 h-32 w-32 rounded-full blur-3xl"></div>
		<div class="relative z-10 flex items-start gap-4">
			<div
				class="bg-warning/25 text-warning flex h-12 w-12 items-center justify-center rounded-full"
			>
				<Info class="h-6 w-6 stroke-current" strokeWidth={2} />
			</div>
			<div>
				<h3 class="text-base-content text-lg font-bold">Área Restrita</h3>
				<p class="text-base-content/70 mt-2 text-sm leading-relaxed">
					Esta área é exclusiva da equipe de Tecnologia da Informação. Garanta que apenas usuários
					autorizados acessem o Painel Administrativo e mantenha suas credenciais em segurança.
				</p>
			</div>
		</div>
	</section>
</main>
