/**
 * Palette store: named colour schemes that override the `--shell-*` tokens.
 *
 * The selected palette is persisted as **base64 CSS**: `paletteCss()` renders a
 * stylesheet, `encodeCss()` puts it in localStorage, and on the next boot
 * `decodeCss()` reverses the path — decode, sanitise (only `--custom: value`
 * declarations survive), then inject. A corrupt or hand-edited payload
 * therefore degrades to "no palette injected" instead of becoming an XSS or a
 * broken page.
 *
 * A palette is orthogonal to light/dark: `Theme` decides the mode, and each
 * palette ships whichever variants it has. A dark-only scheme (Dracula) simply
 * pulls the mode with it, which `initPalette` keeps in sync.
 */

import { t } from '@app/i18n'
import { useSyncExternalStore } from 'react'
import { getTheme, onThemeChange, setTheme, type Theme } from './theme'

export type PaletteMode = Theme

export interface PaletteCore {
  /** Sidebar / app background. */
  base: string
  /** Inputs, chips, secondary surfaces. */
  panel: string
  /** Cards and content columns. */
  surface: string
  /** Body text. */
  text: string
  /** Secondary text; must stay legible on `base` and `surface`. */
  muted: string
  /** Hairlines. */
  line: string
  /** The single solid action colour; one button per screen. */
  accent: string
  /** Keyboard focus ring; defaults to `muted`. */
  focus?: string
}

export interface Palette {
  id: string
  name: string
  /** Origin of the scheme, shown under the name. */
  origin: string
  light?: PaletteCore
  dark?: PaletteCore
}

const PALETTE_ID_KEY = 'kernel-palette'
const PALETTE_CSS_KEY = 'kernel-palette-css'
const STYLE_ID = 'gitdata-palette'

export const DEFAULT_PALETTE_ID = 'graphite'

export const PALETTES: Palette[] = [
  // Names/origins resolve lazily so the picker follows the active language.

  {
    id: 'graphite',
    get name() {
      return t('palette.graphite.name')
    },
    get origin() {
      return t('palette.graphite.origin')
    },
    light: {
      base: '#fafafa',
      panel: '#f5f5f4',
      surface: '#ffffff',
      text: '#23272b',
      muted: '#687078',
      line: '#e1e3e3',
      accent: '#2f3438',
    },
    dark: {
      base: '#1a1c1e',
      panel: '#282a2d',
      surface: '#202224',
      text: '#eceeef',
      muted: '#b1b5ba',
      line: '#3a3d40',
      accent: '#565e67',
    },
  },
  {
    id: 'paper',
    get name() {
      return t('palette.paper.name')
    },
    get origin() {
      return t('palette.paper.origin')
    },
    light: {
      base: '#faf7f2',
      panel: '#f2ede4',
      surface: '#fffdf9',
      text: '#2f2a26',
      muted: '#7d7367',
      line: '#e6ded2',
      accent: '#847459',
    },
  },
  {
    id: 'mint',
    get name() {
      return t('palette.mint.name')
    },
    get origin() {
      return t('palette.mint.origin')
    },
    light: {
      base: '#f4f9f7',
      panel: '#e8f1ed',
      surface: '#ffffff',
      text: '#1f2d2a',
      muted: '#5f7a73',
      line: '#d9e7e2',
      accent: '#2f6f5f',
    },
  },
  {
    id: 'github',
    get name() {
      return t('palette.github.name')
    },
    origin: 'GitHub',
    light: {
      base: '#f6f8fa',
      panel: '#eaeef2',
      surface: '#ffffff',
      text: '#1f2328',
      muted: '#59636e',
      line: '#d1d9e0',
      accent: '#215a8e',
    },
    dark: {
      base: '#0d1117',
      panel: '#161b22',
      surface: '#11161d',
      text: '#e6edf3',
      muted: '#9198a1',
      line: '#30363d',
      accent: '#3d6a94',
    },
  },
  {
    id: 'solarized',
    get name() {
      return t('palette.solarized.name')
    },
    origin: 'Solarized',
    light: {
      base: '#fdf6e3',
      panel: '#eee8d5',
      surface: '#fffdf1',
      text: '#073642',
      muted: '#657b83',
      line: '#e3dcc5',
      accent: '#268bd2',
    },
    dark: {
      base: '#002b36',
      panel: '#0a3d4a',
      surface: '#06333f',
      text: '#e8e5d8',
      muted: '#93a1a1',
      line: '#1b4a56',
      accent: '#2aa198',
    },
  },
  {
    id: 'nord',
    get name() {
      return t('palette.nord.name')
    },
    origin: 'Nord',
    light: {
      base: '#eceff4',
      panel: '#e5e9f0',
      surface: '#f7f9fc',
      text: '#2e3440',
      muted: '#4c566a',
      line: '#d8dee9',
      accent: '#5e81ac',
    },
    dark: {
      base: '#2e3440',
      panel: '#3b4252',
      surface: '#353c4a',
      text: '#eceff4',
      muted: '#c8d1de',
      line: '#434c5e',
      accent: '#88c0d0',
    },
  },
  {
    id: 'catppuccin',
    get name() {
      return t('palette.catppuccin.name')
    },
    origin: 'Catppuccin',
    light: {
      base: '#eff1f5',
      panel: '#e6e9ef',
      surface: '#f7f8fc',
      text: '#4c4f69',
      muted: '#6c6f85',
      line: '#ccd0da',
      accent: '#7287fd',
    },
    dark: {
      base: '#1e1e2e',
      panel: '#313244',
      surface: '#24243a',
      text: '#cdd6f4',
      muted: '#a6adc8',
      line: '#45475a',
      accent: '#89b4fa',
    },
  },
  {
    id: 'everforest',
    get name() {
      return t('palette.everforest.name')
    },
    origin: 'Everforest',
    light: {
      base: '#f0f4ec',
      panel: '#e4ebdd',
      surface: '#f9fbf5',
      text: '#2d353b',
      muted: '#6c7a80',
      line: '#d5dfc9',
      accent: '#7f9e4c',
    },
    dark: {
      base: '#2b3339',
      panel: '#343f44',
      surface: '#303a40',
      text: '#d3c6aa',
      muted: '#9da9a0',
      line: '#404d53',
      accent: '#a7c080',
    },
  },
  {
    id: 'gruvbox',
    get name() {
      return t('palette.gruvbox.name')
    },
    origin: 'Gruvbox',
    light: {
      base: '#f2e5bc',
      panel: '#ebdbb2',
      surface: '#fbf1c7',
      text: '#3c3836',
      muted: '#7c6f64',
      line: '#d5c4a1',
      accent: '#076678',
    },
    dark: {
      base: '#282828',
      panel: '#3c3836',
      surface: '#32302f',
      text: '#ebdbb2',
      muted: '#a89984',
      line: '#504945',
      accent: '#83a598',
    },
  },
  {
    id: 'onedark',
    get name() {
      return t('palette.onedark.name')
    },
    origin: 'One Dark',
    dark: {
      base: '#282c34',
      panel: '#2c313a',
      surface: '#31363f',
      text: '#abb2bf',
      muted: '#8b95a7',
      line: '#3e4451',
      accent: '#61afef',
    },
  },
  {
    id: 'tokyonight',
    get name() {
      return t('palette.tokyonight.name')
    },
    origin: 'Tokyo Night',
    dark: {
      base: '#1a1b26',
      panel: '#24283b',
      surface: '#1f2335',
      text: '#c0caf5',
      muted: '#9aa5ce',
      line: '#3b4261',
      accent: '#7aa2f7',
    },
  },
  {
    id: 'dracula',
    get name() {
      return t('palette.dracula.name')
    },
    origin: 'Dracula',
    dark: {
      base: '#282a36',
      panel: '#343746',
      surface: '#2f3341',
      text: '#f8f8f2',
      muted: '#b8c0d0',
      line: '#44475a',
      accent: '#bd93f9',
    },
  },
]

/* ------------------------------------------------------------------ maths -- */

function toRgb(hex: string): [number, number, number] {
  const h = hex.replace('#', '')
  const full =
    h.length === 3
      ? h
          .split('')
          .map((c) => c + c)
          .join('')
      : h
  const n = Number.parseInt(full.slice(0, 6), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}

function toHex(rgb: [number, number, number]): string {
  return `#${rgb
    .map((c) =>
      Math.round(Math.min(255, Math.max(0, c)))
        .toString(16)
        .padStart(2, '0'),
    )
    .join('')}`
}

/** Linear blend, `t` weighted towards `b`. */
function mix(a: string, b: string, t: number): string {
  const [r1, g1, b1] = toRgb(a)
  const [r2, g2, b2] = toRgb(b)
  return toHex([r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t])
}

function rgbOf(hex: string): string {
  return toRgb(hex).join(' ')
}

/* ----------------------------------------------------------------- render -- */

/**
 * One palette variant rendered to token values. Derived tokens (rail, active,
 * tile, board) come from the core colours so a new scheme needs only seven
 * hand-picked values.
 */
function tokensFor(core: PaletteCore, mode: PaletteMode): Record<string, string> {
  const sink = mode === 'light' ? core.text : '#000000'
  return {
    // The rail recedes from the sidebar in both modes; in dark it goes darker,
    // not lighter, or pale icons lose their footing.
    '--shell-rail': mode === 'light' ? mix(core.base, core.text, 0.035) : mix(core.base, sink, 0.3),
    '--shell-sidebar': core.base,
    '--shell-surface': core.surface,
    '--shell-field': core.panel,
    '--shell-active': mix(core.panel, core.text, mode === 'light' ? 0.07 : 0.18),
    '--shell-tile': mix(core.panel, core.text, mode === 'light' ? 0.14 : 0.28),
    '--shell-board': mode === 'light' ? mix(core.base, core.text, 0.04) : mix(core.base, sink, 0.12),
    '--shell-ink': core.text,
    '--shell-ink-muted': core.muted,
    '--shell-hairline': core.line,
    '--shell-action': core.accent,
    '--shell-focus': core.focus ?? core.muted,
    '--shell-shadow': mode === 'light' ? `0 6px 24px rgb(${rgbOf(core.text)} / 6%)` : `0 6px 24px rgb(0 0 0 / 22%)`,
  }
}

export function paletteVariants(palette: Palette): PaletteMode[] {
  return [palette.light ? 'light' : null, palette.dark ? 'dark' : null].filter(Boolean) as PaletteMode[]
}

export function findPalette(id: string | null | undefined): Palette | undefined {
  return PALETTES.find((palette) => palette.id === id)
}

/** Which variant a palette renders in, given the requested mode. */
export function resolveVariant(palette: Palette, mode: PaletteMode): PaletteMode {
  if (mode === 'light' && palette.light) return 'light'
  if (mode === 'dark' && palette.dark) return 'dark'
  return palette.light ? 'light' : 'dark'
}

/** `html:root` outranks both `:root` and `.dark`, so one rule wins either mode. */
export function paletteCss(id: string, mode: PaletteMode): string {
  const palette = findPalette(id) ?? findPalette(DEFAULT_PALETTE_ID)!
  const core = palette[resolveVariant(palette, mode)]
  if (!core) return ''
  const tokens = tokensFor(core, resolveVariant(palette, mode))
  return `html:root{${Object.entries(tokens)
    .map(([k, v]) => `${k}:${v}`)
    .join(';')}}`
}

/** Swatches for the picker: card, app, hairline, action, text. */
export function previewColors(id: string, mode: PaletteMode): string[] {
  const palette = findPalette(id) ?? findPalette(DEFAULT_PALETTE_ID)!
  const core = palette[resolveVariant(palette, mode)]
  return core ? [core.surface, core.base, core.line, core.accent, core.text] : []
}

/* ------------------------------------------------------- base64 + safety -- */

export function encodeCss(css: string): string {
  const bytes = new TextEncoder().encode(css)
  let binary = ''
  for (const byte of bytes) binary += String.fromCharCode(byte)
  return btoa(binary)
}

const FORBIDDEN = /(?:\{|\}|<|>|;|url\(|expression|@|javascript:|behavior)/i

/**
 * Keep only `--custom-property: value` declarations. Anything else — a nested
 * rule, a selector, an `@import`, a `url()` — rejects the whole payload, which
 * the caller treats as "no palette".
 */
export function sanitizeCss(css: string): string | null {
  const body = css.replace(/\/\*[\s\S]*?\*\//g, '').trim()
  const wrapped = /^html:root\s*\{([\s\S]*)\}$/.exec(body)
  const declarations = (wrapped ? wrapped[1] : body).split(';')
  const clean: string[] = []
  for (const entry of declarations) {
    const item = entry.trim()
    if (!item) continue
    const colon = item.indexOf(':')
    if (colon < 0) return null
    const prop = item.slice(0, colon).trim()
    const value = item.slice(colon + 1).trim()
    if (!/^--[a-z][a-z0-9-]*$/.test(prop)) return null
    if (!value || value.length > 200 || FORBIDDEN.test(value)) return null
    clean.push(`${prop}:${value}`)
  }
  return clean.length ? `html:root{${clean.join(';')}}` : null
}

export function decodeCss(payload: string | null): string | null {
  if (!payload) return null
  try {
    const binary = atob(payload.trim())
    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
    return sanitizeCss(new TextDecoder().decode(bytes))
  } catch {
    return null
  }
}

/* ------------------------------------------------------------------ store -- */

let paletteId = DEFAULT_PALETTE_ID
let snapshot: PaletteSnapshot | null = null
const listeners = new Set<() => void>()

export interface PaletteSnapshot {
  id: string
  palette: Palette
  /** Variant actually rendered. */
  variant: PaletteMode
  /** Base64 CSS as persisted. */
  encoded: string
}

function inject(css: string | null): void {
  const existing = document.getElementById(STYLE_ID)
  if (!css) {
    existing?.remove()
    return
  }
  const tag = existing ?? Object.assign(document.createElement('style'), { id: STYLE_ID })
  tag.textContent = css
  if (!existing) document.head.appendChild(tag)
}

function emit(): void {
  snapshot = null
  for (const listener of listeners) listener()
}

function read(): PaletteSnapshot {
  if (snapshot) return snapshot
  const palette = findPalette(paletteId) ?? findPalette(DEFAULT_PALETTE_ID)!
  const variant = resolveVariant(palette, getTheme())
  snapshot = { id: palette.id, palette, variant, encoded: encodeCss(paletteCss(palette.id, getTheme())) }
  return snapshot
}

/** Re-render the injected stylesheet after the mode or palette changed. */
function apply(): void {
  snapshot = null // the cached variant/premium pair is stale once the mode moves
  const state = read()
  inject(paletteCss(state.id, getTheme()))
  emit()
}

export function getPaletteId(): string {
  return read().id
}

export function getPalette(): Palette {
  return read().palette
}

/** Persist as base64 CSS and paint it immediately. */
export function setPalette(id: string): void {
  const palette = findPalette(id)
  if (!palette) return
  paletteId = palette.id
  const css = paletteCss(palette.id, getTheme())
  localStorage.setItem(PALETTE_ID_KEY, palette.id)
  localStorage.setItem(PALETTE_CSS_KEY, encodeCss(css))
  // A scheme with only one variant also owns the light/dark class.
  const variants = paletteVariants(palette)
  if (variants.length === 1 && getTheme() !== variants[0]) setTheme(variants[0])
  else apply()
}

/** Back to the built-in tokens: drop the override and both stored values. */
export function resetPalette(): void {
  paletteId = DEFAULT_PALETTE_ID
  localStorage.removeItem(PALETTE_ID_KEY)
  localStorage.removeItem(PALETTE_CSS_KEY)
  inject(null)
  emit()
}

/**
 * Bootstrap: prefer the stored base64 payload, fall back to the stored palette
 * id, and ignore either if it does not decode to safe declarations. Call next
 * to `initTheme()`, before the first paint.
 */
export function initPalette(): void {
  const fromUrl = new URLSearchParams(window.location.search).get('palette')
  const stored = findPalette(fromUrl) ?? findPalette(localStorage.getItem(PALETTE_ID_KEY))
  if (stored) paletteId = stored.id
  const decoded = decodeCss(localStorage.getItem(PALETTE_CSS_KEY))
  if (decoded) inject(decoded)
  else if (paletteId !== DEFAULT_PALETTE_ID) {
    localStorage.removeItem(PALETTE_CSS_KEY)
    inject(paletteCss(paletteId, getTheme()))
  }
  onThemeChange(apply)
}

function subscribe(listener: () => void): () => void {
  listeners.add(listener)
  return () => listeners.delete(listener)
}

export function usePalette(): PaletteSnapshot {
  return useSyncExternalStore(subscribe, read)
}