/**
 * Shared theme logic for Synops workspace.
 *
 * Model: each UI surface has its own HSL color. A dropdown selects
 * which surface to edit, and three sliders (hue, saturation, lightness)
 * control it. Presets set all surfaces at once.
 */

/** The surfaces a user can theme */
export const THEME_SURFACES = {
	canvas:  'Canvas',
	header:  'Menylinje',
	panel:   'Bokser',
	border:  'Rammer',
	accent:  'Knapper/aksent',
	text:    'Tekst',
} as const;

export type ThemeSurface = keyof typeof THEME_SURFACES;

/** HSL color for one surface */
export interface SurfaceColor {
	hue: number;        // 0-360
	saturation: number; // 0-100
	lightness: number;  // 0-100
}

/** Full theme: one color per surface */
export type ThemeConfig = Record<ThemeSurface, SurfaceColor>;

/** Platform default */
export const DEFAULT_THEME: ThemeConfig = {
	canvas:  { hue: 0,   saturation: 0,  lightness: 4 },
	header:  { hue: 0,   saturation: 0,  lightness: 12 },
	panel:   { hue: 0,   saturation: 0,  lightness: 12 },
	border:  { hue: 0,   saturation: 0,  lightness: 18 },
	accent:  { hue: 239, saturation: 70, lightness: 60 },
	text:    { hue: 0,   saturation: 0,  lightness: 92 },
};

export interface ThemePreset {
	name: string;
	emoji: string;
	theme: ThemeConfig;
}

function preset(
	accent: [number, number, number],
	brightness: number,
): ThemeConfig {
	const isDark = brightness < 50;
	const [ah, as, al] = accent;
	const tint = Math.min(12, as * 0.15);
	return {
		canvas:  { hue: ah, saturation: tint,  lightness: brightness },
		header:  { hue: ah, saturation: tint,  lightness: isDark ? brightness + 8 : brightness - 5 },
		panel:   { hue: ah, saturation: tint,  lightness: isDark ? brightness + 8 : brightness - 5 },
		border:  { hue: ah, saturation: Math.max(0, tint - 3), lightness: isDark ? brightness + 14 : brightness - 10 },
		accent:  { hue: ah, saturation: as, lightness: al },
		text:    { hue: ah, saturation: Math.min(8, tint), lightness: isDark ? 92 : 10 },
	};
}

export const THEME_PRESETS: ThemePreset[] = [
	{
		name: 'Midnatt', emoji: '🌑',
		theme: DEFAULT_THEME,
	},
	{
		name: 'Dyphav', emoji: '🌊',
		theme: {
			canvas:  { hue: 215, saturation: 25, lightness: 5 },
			header:  { hue: 210, saturation: 20, lightness: 12 },
			panel:   { hue: 205, saturation: 18, lightness: 14 },
			border:  { hue: 210, saturation: 15, lightness: 20 },
			accent:  { hue: 190, saturation: 80, lightness: 55 },
			text:    { hue: 200, saturation: 10, lightness: 88 },
		},
	},
	{
		name: 'Skog', emoji: '🌲',
		theme: {
			canvas:  { hue: 160, saturation: 18, lightness: 4 },
			header:  { hue: 150, saturation: 14, lightness: 11 },
			panel:   { hue: 145, saturation: 12, lightness: 13 },
			border:  { hue: 155, saturation: 10, lightness: 19 },
			accent:  { hue: 135, saturation: 60, lightness: 50 },
			text:    { hue: 140, saturation: 8,  lightness: 85 },
		},
	},
	{
		name: 'Solnedgang', emoji: '🌅',
		theme: {
			canvas:  { hue: 20,  saturation: 20, lightness: 5 },
			header:  { hue: 15,  saturation: 16, lightness: 12 },
			panel:   { hue: 12,  saturation: 14, lightness: 14 },
			border:  { hue: 18,  saturation: 12, lightness: 20 },
			accent:  { hue: 30,  saturation: 85, lightness: 58 },
			text:    { hue: 25,  saturation: 10, lightness: 90 },
		},
	},
	{
		name: 'Lavendel', emoji: '💜',
		theme: {
			canvas:  { hue: 265, saturation: 15, lightness: 5 },
			header:  { hue: 270, saturation: 12, lightness: 13 },
			panel:   { hue: 275, saturation: 10, lightness: 15 },
			border:  { hue: 268, saturation: 8,  lightness: 22 },
			accent:  { hue: 280, saturation: 60, lightness: 62 },
			text:    { hue: 270, saturation: 8,  lightness: 88 },
		},
	},
	{
		name: 'Kirsebær', emoji: '🌸',
		theme: {
			canvas:  { hue: 340, saturation: 14, lightness: 5 },
			header:  { hue: 335, saturation: 12, lightness: 12 },
			panel:   { hue: 330, saturation: 10, lightness: 14 },
			border:  { hue: 338, saturation: 8,  lightness: 20 },
			accent:  { hue: 345, saturation: 65, lightness: 58 },
			text:    { hue: 340, saturation: 6,  lightness: 90 },
		},
	},
	{
		name: 'Dagslys', emoji: '☀️',
		theme: {
			canvas:  { hue: 220, saturation: 15, lightness: 96 },
			header:  { hue: 220, saturation: 12, lightness: 100 },
			panel:   { hue: 220, saturation: 10, lightness: 100 },
			border:  { hue: 220, saturation: 10, lightness: 85 },
			accent:  { hue: 230, saturation: 65, lightness: 50 },
			text:    { hue: 220, saturation: 10, lightness: 12 },
		},
	},
	{
		name: 'Kull', emoji: '⚫',
		theme: {
			canvas:  { hue: 0, saturation: 0,  lightness: 8 },
			header:  { hue: 0, saturation: 0,  lightness: 14 },
			panel:   { hue: 0, saturation: 0,  lightness: 16 },
			border:  { hue: 0, saturation: 0,  lightness: 22 },
			accent:  { hue: 0, saturation: 0,  lightness: 65 },
			text:    { hue: 0, saturation: 0,  lightness: 82 },
		},
	},
];

function hsl(c: SurfaceColor): string {
	return `hsl(${c.hue}, ${c.saturation}%, ${c.lightness}%)`;
}

function hsla(c: SurfaceColor, alpha: number): string {
	return `hsla(${c.hue}, ${c.saturation}%, ${c.lightness}%, ${alpha})`;
}

function clamp(v: number): number {
	return Math.min(100, Math.max(0, v));
}

/** Apply theme to CSS custom properties */
export function applyTheme(t: ThemeConfig): void {
	if (typeof document === 'undefined') return;
	const s = document.documentElement.style;

	s.setProperty('--color-bg', hsl(t.canvas));
	s.setProperty('--color-surface', hsl(t.header));
	s.setProperty('--color-surface-hover', hsl({
		...t.header,
		lightness: clamp(t.header.lightness + (t.canvas.lightness < 50 ? 3 : -3)),
	}));
	s.setProperty('--color-panel', hsl(t.panel));
	s.setProperty('--color-border', hsl(t.border));
	s.setProperty('--color-border-hover', hsl({
		...t.border,
		lightness: clamp(t.border.lightness + (t.canvas.lightness < 50 ? 6 : -6)),
	}));
	s.setProperty('--color-text', hsl(t.text));
	s.setProperty('--color-text-muted', hsl({
		...t.text,
		lightness: clamp(t.canvas.lightness < 50 ? 55 : 40),
		saturation: Math.min(8, t.text.saturation),
	}));
	s.setProperty('--color-text-dim', hsl({
		...t.text,
		lightness: clamp(t.canvas.lightness < 50 ? 38 : 55),
		saturation: Math.min(6, t.text.saturation),
	}));
	s.setProperty('--color-accent', hsl(t.accent));
	s.setProperty('--color-accent-hover', hsl({
		...t.accent,
		lightness: clamp(t.accent.lightness + (t.canvas.lightness < 50 ? 5 : -5)),
	}));
	s.setProperty('--color-accent-glow', hsla(t.accent, 0.15));
}

/** Reset theme */
export function resetTheme(): void {
	if (typeof document === 'undefined') return;
	const s = document.documentElement.style;
	for (const p of [
		'--color-bg', '--color-surface', '--color-surface-hover', '--color-panel',
		'--color-border', '--color-border-hover',
		'--color-text', '--color-text-muted', '--color-text-dim',
		'--color-accent', '--color-accent-hover', '--color-accent-glow',
	]) s.removeProperty(p);
}

/** Load from metadata (backward compatible) */
export function loadThemeFromMetadata(meta: Record<string, unknown>): ThemeConfig | null {
	const prefs = meta.preferences as Record<string, unknown> | undefined;
	const theme = prefs?.theme as Record<string, unknown> | undefined;
	if (!theme) return null;

	// Current format: has 'canvas' key
	if (theme.canvas && typeof theme.canvas === 'object') {
		const t = theme as unknown as ThemeConfig;
		// Fill missing surfaces with defaults
		return { ...DEFAULT_THEME, ...t };
	}

	// Previous format: { accentHue, accentSat, brightness }
	if (typeof theme.accentHue === 'number') {
		return preset(
			[theme.accentHue as number, (theme.accentSat as number) ?? 70, 60],
			(theme.brightness as number) ?? 5,
		);
	}

	// Older: { bg: { hue, ... }, accent: { hue, ... } }
	if (theme.bg && typeof theme.bg === 'object') {
		const accent = theme.accent as Record<string, number> | undefined;
		const bg = theme.bg as Record<string, number> | undefined;
		return preset(
			[accent?.hue ?? 239, accent?.saturation ?? 70, accent?.lightness ?? 60],
			bg?.lightness ?? 4,
		);
	}

	// Oldest: { hueBg, hueAccent }
	if (typeof theme.hueAccent === 'number') {
		return preset([(theme.hueAccent as number), 70, 60], 5);
	}

	return null;
}

/** Serialize */
export function themeToMetadata(config: ThemeConfig): Record<string, unknown> {
	return { ...config };
}

/** CSS string for preset swatch */
export function presetAccentCSS(theme: ThemeConfig): string {
	return hsl(theme.accent);
}
