import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import { getEnvString } from '@/utils/env'
import { apiFetch } from '@/services/http'

// Inject CSS variables from environment
const root = document.documentElement
const envAppTitle = getEnvString('VITE_APP_TITLE', 'Demo App')
const envFavicon = getEnvString('VITE_APP_FAVICON', '/vite.svg')
const envPrimaryColor = getEnvString('VITE_PRIMARY_COLOR', '#AD954F')
const envSecondaryColor = getEnvString('VITE_SECONDARY_COLOR', '#FF9800')
const envTextColorOnPrimary = getEnvString('VITE_TEXT_ON_PRIMARY_COLOR', '#212121')
const envTextColorOnSecondary = getEnvString('VITE_TEXT_ON_SECONDARY_COLOR', '#FFFFFF')
const envHeaderColor = getEnvString('VITE_HEADER_COLOR', '#1a1a1a')
const envTextColorOnHeader = getEnvString('VITE_TEXT_ON_HEADER_COLOR', '#FFFFFF')
const envFooterColor = getEnvString('VITE_FOOTER_COLOR', '#1a1a1a')
const envTextColorOnFooter = getEnvString('VITE_TEXT_ON_FOOTER_COLOR', '#FFFFFF')

const normalizeHexColor = (value: unknown, fallback: string) => {
	if (typeof value !== 'string') return fallback
	const trimmed = value.trim()
	const withHash = trimmed.startsWith('#') ? trimmed : `#${trimmed}`
	const upper = withHash.toUpperCase()
	return /^#[0-9A-F]{6}$/.test(upper) ? upper : fallback
}

type CompanySettingsEnvelope = {
	success?: boolean
	data?: {
		value?: Record<string, unknown> | string | null
	} | null
}

const normalizeApiBaseUrl = (value: string) => {
	if (!value) return ''
	const host = value.split('/')[0] ?? ''
	const isLocalHost = /^(localhost|127\.0\.0\.1|0\.0\.0\.0)(:\d+)?$/i.test(host)
	const withProtocol = /^https?:\/\//i.test(value) ? value : `${isLocalHost ? 'http' : 'https'}://${value}`
	return withProtocol.replace(/\/?$/, '')
}

const apiBaseUrl = normalizeApiBaseUrl(getEnvString('VITE_API_BASE_URL', ''))
const apiOrigin = apiBaseUrl
	? (() => {
		try {
			return new URL(apiBaseUrl).origin
		} catch {
			return ''
		}
	})()
	: ''

const parseCompanySettingsValue = (rawValue: Record<string, unknown> | string | null | undefined) => {
	if (typeof rawValue === 'string') {
		try {
			const parsed = JSON.parse(rawValue)
			return parsed && typeof parsed === 'object' ? parsed as Record<string, unknown> : {}
		} catch {
			return {}
		}
	}

	if (rawValue && typeof rawValue === 'object') {
		return rawValue as Record<string, unknown>
	}

	return {}
}

const getCompanySettings = async () => {
	try {
		const response = await apiFetch<CompanySettingsEnvelope>('/settings/key/company', {
			method: 'GET',
			auth: false,
		})

		return parseCompanySettingsValue(response?.data?.value)
	} catch (error) {
		if (import.meta.env.DEV) {
			console.warn('Failed to load company settings from API. Falling back to env.', error)
		}
		return {}
	}
}

const resolveLogoUrl = (value: unknown) => {
	if (typeof value !== 'string' || !value.trim()) {
		return envFavicon
	}

	const trimmed = value.trim()
	if (/^https?:\/\//i.test(trimmed)) {
		return trimmed
	}

	const normalizedStoragePath = trimmed.startsWith('/storage/')
		? trimmed
		: `/storage/${trimmed.replace(/^\/+/, '')}`

	if (apiOrigin) {
		return `${apiOrigin}${normalizedStoragePath}`
	}

	return normalizedStoragePath
}

const applyThemeColors = (companyValue: Record<string, unknown>) => {
	const colors = {
		primaryColor: normalizeHexColor(companyValue.PRIMARY_COLOR ?? companyValue.primary_color, normalizeHexColor(envPrimaryColor, '#AD954F')),
		secondaryColor: normalizeHexColor(companyValue.SECONDARY_COLOR ?? companyValue.secondary_color, normalizeHexColor(envSecondaryColor, '#FF9800')),
		textColorOnPrimary: normalizeHexColor(companyValue.TEXT_ON_PRIMARY_COLOR ?? companyValue.text_on_primary_color, normalizeHexColor(envTextColorOnPrimary, '#212121')),
		textColorOnSecondary: normalizeHexColor(companyValue.TEXT_ON_SECONDARY_COLOR ?? companyValue.text_on_secondary_color, normalizeHexColor(envTextColorOnSecondary, '#FFFFFF')),
		headerColor: normalizeHexColor(companyValue.HEADER_COLOR ?? companyValue.header_color, normalizeHexColor(envHeaderColor, '#1a1a1a')),
		textColorOnHeader: normalizeHexColor(companyValue.TEXT_ON_HEADER_COLOR ?? companyValue.text_on_header_color, normalizeHexColor(envTextColorOnHeader, '#FFFFFF')),
		footerColor: normalizeHexColor(companyValue.FOOTER_COLOR ?? companyValue.footer_color, normalizeHexColor(envFooterColor, '#1a1a1a')),
		textColorOnFooter: normalizeHexColor(companyValue.TEXT_ON_FOOTER_COLOR ?? companyValue.text_on_footer_color, normalizeHexColor(envTextColorOnFooter, '#FFFFFF')),
	}

	console.log('Injecting colors:', colors)
	root.style.setProperty('--color-primary', colors.primaryColor)
	root.style.setProperty('--color-secondary', colors.secondaryColor)
	root.style.setProperty('--color-text-on-primary', colors.textColorOnPrimary)
	root.style.setProperty('--color-text-on-secondary', colors.textColorOnSecondary)
	root.style.setProperty('--color-header', colors.headerColor)
	root.style.setProperty('--color-text-on-header', colors.textColorOnHeader)
	root.style.setProperty('--color-footer', colors.footerColor)
	root.style.setProperty('--color-text-on-footer', colors.textColorOnFooter)
}

const applyAppIdentity = (companyValue: Record<string, unknown>) => {
	const title = typeof companyValue.title_application === 'string' && companyValue.title_application.trim()
		? companyValue.title_application.trim()
		: envAppTitle

	document.title = title

	const faviconUrl = resolveLogoUrl(companyValue.favicon)
	let faviconLink = document.querySelector<HTMLLinkElement>('link[rel~="icon"]')

	if (!faviconLink) {
		faviconLink = document.createElement('link')
		faviconLink.rel = 'icon'
		document.head.appendChild(faviconLink)
	}

	faviconLink.type = faviconUrl.toLowerCase().endsWith('.png') ? 'image/png' : 'image/x-icon'
	faviconLink.href = faviconUrl
}

const bootstrap = async () => {
	const companyValue = await getCompanySettings()
	applyThemeColors(companyValue)
	applyAppIdentity(companyValue)

	createApp(App).use(router).mount('#app')
}

bootstrap()