/** omp web palette bundled into standalone exports and the share viewer. */
export type WebExportScheme = "dark" | "light";

const COMMON_EXPORT_PALETTE = {
	"--font-mono": 'ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace',
	"--body-bg": "var(--bg)",
	"--container-bg": "var(--bg-raised)",
	"--info-bg": "var(--bg-inset)",
	"--text": "var(--fg)",
	"--muted": "var(--fg-muted)",
	"--dim": "var(--fg-faint)",
	"--thinkingText": "var(--fg-muted)",
	"--assistantMessageText": "var(--text)",
	"--borderMuted": "color-mix(in srgb, var(--border) 67%, transparent)",
	"--borderAccent": "#945ff9",
	"--selectedBg": "var(--accent-muted)",
	"--success": "var(--ok)",
	"--error": "var(--err)",
	"--warning": "var(--warn)",
	"--userMessageBg": "var(--accent-muted)",
	"--userMessageText": "var(--fg)",
	"--customMessageBg": "var(--bg-overlay)",
	"--customMessageText": "var(--fg-muted)",
	"--customMessageLabel": "#945ff9",
	"--toolPendingBg": "var(--bg-raised)",
	"--toolSuccessBg": "var(--bg-inset)",
	"--toolErrorBg": "color-mix(in srgb, var(--err) 14%, transparent)",
	"--toolTitle": "var(--fg)",
	"--toolOutput": "var(--fg-muted)",
	"--mdHeading": "var(--accent)",
	"--mdLink": "var(--link)",
	"--mdLinkUrl": "var(--fg-faint)",
	"--mdCode": "var(--fg)",
	"--mdCodeBlock": "var(--fg)",
	"--mdCodeBlockBorder": "var(--border)",
	"--mdQuote": "var(--fg-muted)",
	"--mdQuoteBorder": "var(--border-strong)",
	"--mdHr": "var(--border)",
	"--mdListBullet": "var(--accent)",
	"--toolDiffAdded": "var(--ok)",
	"--toolDiffRemoved": "var(--err)",
	"--toolDiffContext": "var(--fg-faint)",
	"--syntaxOperator": "var(--fg)",
	"--syntaxPunctuation": "var(--fg-muted)",
	"--thinkingOff": "var(--fg-faint)",
	"--thinkingMinimal": "var(--fg-faint)",
	"--thinkingLow": "#945ff9",
	"--thinkingMedium": "#b281d6",
	"--thinkingHigh": "var(--accent)",
	"--thinkingXhigh": "var(--warn)",
	"--bashMode": "#168b9a",
	"--pythonMode": "var(--warn)",
	"--statusLineBg": "var(--bg)",
	"--statusLineSep": "var(--fg-faint)",
	"--statusLineModel": "var(--accent)",
	"--statusLinePath": "#168b9a",
	"--statusLineGitClean": "var(--ok)",
	"--statusLineGitDirty": "var(--warn)",
	"--statusLineContext": "var(--fg-muted)",
	"--statusLineSpend": "#168b9a",
	"--statusLineStaged": "var(--ok)",
	"--statusLineDirty": "var(--warn)",
	"--statusLineUntracked": "#945ff9",
	"--statusLineOutput": "#b281d6",
	"--statusLineCost": "#b281d6",
	"--statusLineSubagents": "var(--accent)",
} as const satisfies Record<string, string>;

export const WEB_EXPORT_PALETTES = {
	dark: {
		"--bg": "#000000",
		"--bg-raised": "#09090a",
		"--bg-inset": "#0e0e10",
		"--bg-overlay": "#17171a",
		"--fg": "#ededef",
		"--fg-muted": "#a0a0a8",
		"--fg-faint": "#6c6c74",
		"--accent": "#f068c8",
		"--accent-muted": "rgba(237, 74, 191, 0.14)",
		"--ok": "#3ecf8e",
		"--err": "#ff6166",
		"--warn": "#f5a524",
		"--border": "rgba(255, 255, 255, 0.09)",
		"--border-strong": "rgba(255, 255, 255, 0.14)",
		"--ring": "#5ad8e6",
		"--link": "#5ad8e6",
		"--syntaxComment": "#6e6974",
		"--syntaxKeyword": "#945ff9",
		"--syntaxFunction": "#e4b33f",
		"--syntaxVariable": "#5ad8e5",
		"--syntaxString": "#68ca80",
		"--syntaxNumber": "#ed4abf",
		"--syntaxType": "#b281d6",
	},
	light: {
		"--bg": "#e6e7ea",
		"--bg-raised": "#f1f2f4",
		"--bg-inset": "#e5e7eb",
		"--bg-overlay": "#e9ebee",
		"--fg": "#202126",
		"--fg-muted": "#41444e",
		"--fg-faint": "#555964",
		"--accent": "#a81d7e",
		"--accent-muted": "rgba(168, 29, 126, 0.1)",
		"--ok": "#08764d",
		"--err": "#bc2633",
		"--warn": "#8a5700",
		"--border": "rgba(32, 33, 38, 0.16)",
		"--border-strong": "rgba(32, 33, 38, 0.24)",
		"--ring": "#087080",
		"--link": "#087080",
		"--chart-primary": "#087080",
		"--chart-secondary": "#a81d7e",
		"--chart-axis": "#555964",
		"--syntaxComment": "#5e5965",
		"--syntaxKeyword": "#6d35c7",
		"--syntaxFunction": "#8a6000",
		"--syntaxVariable": "#087f8c",
		"--syntaxString": "#247a3d",
		"--syntaxNumber": "#b51f88",
		"--syntaxType": "#7b3fa2",
	},
} as const satisfies Record<WebExportScheme, Record<string, string>>;

/** Wrap export palette declarations with the shared dark, light, and auto selectors. */
export function exportThemeStyles(dark: string, light: string): string {
	return [
		`:root, :root[data-theme="dark"] { color-scheme: dark; ${dark} }`,
		`:root[data-theme="light"] { color-scheme: light; ${light} }`,
		`@media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; ${light} } }`,
	].join("\n");
}

/** Serialize one web color scheme as CSS custom-property declarations. */
export function webExportThemeVars(scheme: WebExportScheme): string {
	return Object.entries({ ...COMMON_EXPORT_PALETTE, ...WEB_EXPORT_PALETTES[scheme] })
		.map(([key, value]) => `${key}: ${value};`)
		.join(" ");
}