/**
 * Utilitário para gerenciamento de temas personalizados do SGSE
 */

export type TemaId =
	| 'purple'
	| 'blue'
	| 'green'
	| 'orange'
	| 'red'
	| 'pink'
	| 'teal'
	| 'dark'
	| 'light'
	| 'corporate';

export interface Tema {
	id: TemaId;
	nome: string;
	descricao: string;
	corPrimaria: string;
	corSecundaria: string;
	corGradiente: string;
}

/**
 * Lista de temas disponíveis
 */
export const temasDisponiveis: Tema[] = [
	{
		id: 'purple',
		nome: 'Roxo',
		descricao: 'Tema padrão com cores roxas e azuis',
		corPrimaria: '#764ba2',
		corSecundaria: '#667eea',
		corGradiente: 'from-purple-600 via-blue-600 to-indigo-700'
	},
	{
		id: 'blue',
		nome: 'Azul',
		descricao: 'Tema azul clássico e profissional',
		corPrimaria: '#2563eb',
		corSecundaria: '#3b82f6',
		corGradiente: 'from-blue-500 via-blue-600 to-blue-700'
	},
	{
		id: 'green',
		nome: 'Verde',
		descricao: 'Tema verde natural e harmonioso',
		corPrimaria: '#10b981',
		corSecundaria: '#059669',
		corGradiente: 'from-green-500 via-emerald-600 to-teal-700'
	},
	{
		id: 'orange',
		nome: 'Laranja',
		descricao: 'Tema laranja vibrante e energético',
		corPrimaria: '#f97316',
		corSecundaria: '#ea580c',
		corGradiente: 'from-orange-500 via-amber-600 to-orange-700'
	},
	{
		id: 'red',
		nome: 'Vermelho',
		descricao: 'Tema vermelho intenso e impactante',
		corPrimaria: '#ef4444',
		corSecundaria: '#dc2626',
		corGradiente: 'from-red-500 via-rose-600 to-red-700'
	},
	{
		id: 'pink',
		nome: 'Rosa',
		descricao: 'Tema rosa suave e elegante',
		corPrimaria: '#ec4899',
		corSecundaria: '#db2777',
		corGradiente: 'from-pink-500 via-rose-600 to-fuchsia-700'
	},
	{
		id: 'teal',
		nome: 'Verde-água',
		descricao: 'Tema verde-água refrescante',
		corPrimaria: '#14b8a6',
		corSecundaria: '#0d9488',
		corGradiente: 'from-teal-500 via-cyan-600 to-teal-700'
	},
	{
		id: 'dark',
		nome: 'Escuro',
		descricao: 'Tema escuro para uso noturno',
		corPrimaria: '#1e293b',
		corSecundaria: '#0f172a',
		corGradiente: 'from-slate-800 via-gray-900 to-slate-900'
	},
	{
		id: 'light',
		nome: 'Claro',
		descricao: 'Tema claro e minimalista',
		corPrimaria: '#f8fafc',
		corSecundaria: '#e2e8f0',
		corGradiente: 'from-gray-100 via-slate-200 to-gray-300'
	},
	{
		id: 'corporate',
		nome: 'Corporativo',
		descricao: 'Tema corporativo azul escuro',
		corPrimaria: '#1e40af',
		corSecundaria: '#1e3a8a',
		corGradiente: 'from-blue-800 via-indigo-900 to-blue-900'
	}
];

/**
 * Mapeamento de temas para nomes do DaisyUI
 * Usamos temas nativos do DaisyUI quando disponíveis, ou temas customizados SGSE
 */
export const temaParaDaisyUI: Record<TemaId, string> = {
	purple: 'aqua', // Tema padrão atual (roxo/azul) - nativo DaisyUI
	blue: 'sgse-blue', // Azul - customizado
	green: 'sgse-green', // Verde - customizado
	orange: 'sgse-orange', // Laranja - customizado
	red: 'sgse-red', // Vermelho - customizado
	pink: 'sgse-pink', // Rosa - customizado
	teal: 'sgse-teal', // Verde-água - customizado
	dark: 'dark', // Escuro - nativo DaisyUI
	light: 'light', // Claro - nativo DaisyUI
	corporate: 'sgse-corporate' // Corporativo - customizado
};

/**
 * Obter tema por ID
 */
export function obterTema(id: TemaId | string | null | undefined): Tema | null {
	if (!id) return null;
	return temasDisponiveis.find((t) => t.id === id) || null;
}

/**
 * Obter nome do tema DaisyUI correspondente
 */
export function obterNomeDaisyUI(id: TemaId | string | null | undefined): string {
	if (!id) return 'aqua'; // Tema padrão
	const tema = obterTema(id);
	if (!tema) return 'aqua';
	return temaParaDaisyUI[tema.id] || 'aqua';
}

/**
 * Aplicar tema ao documento HTML
 * NÃO salva no localStorage - apenas no banco de dados do usuário
 */
export function aplicarTema(temaId: TemaId | string | null | undefined): void {
	if (typeof document === 'undefined') return;

	const nomeDaisyUI = obterNomeDaisyUI(temaId || 'purple');
	const htmlElement = document.documentElement;
	const bodyElement = document.body;

	if (htmlElement) {
		// Remover todos os atributos data-theme existentes primeiro
		htmlElement.removeAttribute('data-theme');
		if (bodyElement) {
			bodyElement.removeAttribute('data-theme');
		}

		// Aplicar o novo tema
		htmlElement.setAttribute('data-theme', nomeDaisyUI);
		if (bodyElement) {
			bodyElement.setAttribute('data-theme', nomeDaisyUI);
		}

		// Forçar reflow para garantir que o CSS seja aplicado
		void htmlElement.offsetHeight;

		// Forçar atualização de todas as variáveis CSS
		// Isso garante que os temas customizados sejam aplicados corretamente
		if (typeof window !== 'undefined' && window.getComputedStyle) {
			const computedStyle = window.getComputedStyle(htmlElement);
			// Forçar recálculo das variáveis CSS
			computedStyle.getPropertyValue('--p');
		}

		// Disparar evento customizado para notificar mudança de tema
		if (typeof window !== 'undefined') {
			window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: nomeDaisyUI } }));
		}
	}
}

/**
 * Aplicar tema padrão (roxo)
 */
export function aplicarTemaPadrao(): void {
	aplicarTema('purple');
}

/**
 * Obter tema padrão
 */
export function obterTemaPadrao(): Tema {
	return temasDisponiveis[0]; // Purple
}

/**
 * Obter cores CSS do tema atual para usar em gráficos e componentes
 */
export function obterCoresDoTema(): {
	primary: string;
	success: string;
	error: string;
	warning: string;
	info: string;
	baseContent: string;
	base100: string;
	base200: string;
	base300: string;
} {
	if (typeof window === 'undefined' || typeof document === 'undefined') {
		// Valores padrão para SSR
		return {
			primary: '#667eea',
			success: '#10b981',
			error: '#ef4444',
			warning: '#f59e0b',
			info: '#3b82f6',
			baseContent: '#1f2937',
			base100: '#ffffff',
			base200: '#f3f4f6',
			base300: '#e5e7eb'
		};
	}

	const htmlElement = document.documentElement;
	const getComputedStyle = (varName: string): string => {
		return getComputedStyle(htmlElement).getPropertyValue(varName).trim() || '';
	};

	// Tentar obter variáveis CSS do DaisyUI
	const primary = getComputedStyle('--p') || '#667eea';
	const success = getComputedStyle('--suc') || '#10b981';
	const error = getComputedStyle('--er') || '#ef4444';
	const warning = getComputedStyle('--wa') || '#f59e0b';
	const info = getComputedStyle('--in') || '#3b82f6';
	const baseContent = getComputedStyle('--bc') || '#1f2937';
	const base100 = getComputedStyle('--b1') || '#ffffff';
	const base200 = getComputedStyle('--b2') || '#f3f4f6';
	const base300 = getComputedStyle('--b3') || '#e5e7eb';

	return {
		primary: primary || '#667eea',
		success: success || '#10b981',
		error: error || '#ef4444',
		warning: warning || '#f59e0b',
		info: info || '#3b82f6',
		baseContent: baseContent || '#1f2937',
		base100: base100 || '#ffffff',
		base200: base200 || '#f3f4f6',
		base300: base300 || '#e5e7eb'
	};
}

/**
 * Converter cor hex para rgba
 */
export function hexToRgba(hex: string, alpha: number = 1): string {
	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	if (!result) return `rgba(102, 126, 234, ${alpha})`;

	const r = parseInt(result[1], 16);
	const g = parseInt(result[2], 16);
	const b = parseInt(result[3], 16);

	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

/**
 * Converter cor hex para rgb
 */
export function hexToRgb(hex: string): string {
	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	if (!result) return 'rgb(102, 126, 234)';

	const r = parseInt(result[1], 16);
	const g = parseInt(result[2], 16);
	const b = parseInt(result[3], 16);

	return `rgb(${r}, ${g}, ${b})`;
}
