import {
  DEFAULT_FONT_FAMILY_ID,
  DEFAULT_FONT_SIZE_ID,
  FONT_FAMILY_BY_ID,
  FONT_SIZE_BY_ID,
  THEME_BY_ID,
  type FontFamilyId,
  type FontSizeId,
  type ThemeId,
  type ThemeTokens,
  type ThemeUiTokens,
} from "@/lib/themes";

const STORE_KEY = "local-studio-state";
const DEFAULT_THEME_ID: ThemeId = "zai-dark";

function lightnessFromColor(value: string): number | null {
  const hsl = value.match(/hsla?\([^,]+,\s*[^,]+,\s*([\d.]+)%/i);
  if (hsl) return Number(hsl[1]);

  const hex = value.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
  if (!hex) return null;
  const raw = hex[1];
  const expanded =
    raw.length === 3
      ? raw
          .split("")
          .map((part) => part + part)
          .join("")
      : raw;
  const r = Number.parseInt(expanded.slice(0, 2), 16) / 255;
  const g = Number.parseInt(expanded.slice(2, 4), 16) / 255;
  const b = Number.parseInt(expanded.slice(4, 6), 16) / 255;
  return ((Math.max(r, g, b) + Math.min(r, g, b)) / 2) * 100;
}

function deriveThemeUiTokens(
  tokens: ThemeTokens,
  overrides: Partial<ThemeUiTokens> = {},
): ThemeUiTokens {
  const isLight = (lightnessFromColor(tokens.bg) ?? 0) > 50;
  const ink = isLight ? "26, 28, 31" : "255, 255, 255";
  return {
    // White/ink overlays over a unified canvas: 8% surfaces, 5% hover,
    // 8% active, hairline 8% borders — the same ratios tokens.css encodes.
    "surface-2": `rgba(${ink}, 0.08)`,
    "surface-3": `rgba(${ink}, 0.05)`,
    // The rail sits one tone step above the canvas so the body reads darker
    // than the left navbar (mirrors tokens.css --color-sidebar).
    rail: isLight ? "#f9f9f9" : `color-mix(in srgb, ${tokens.bg} 97%, #ffffff)`,
    border: `rgba(${ink}, 0.08)`,
    separator: `rgba(${ink}, 0.05)`,
    hover: `rgba(${ink}, 0.05)`,
    active: `rgba(${ink}, 0.08)`,
    composer: "var(--sidebar-bg)",
    "composer-footer": "var(--sidebar-bg)",
    bubble: tokens.surface,
    ...overrides,
  };
}

export function resolveThemeCssTokens(
  tokens: ThemeTokens,
  overrides: Partial<ThemeUiTokens> = {},
): Record<string, string> {
  const ui = deriveThemeUiTokens(tokens, overrides);
  return {
    ...tokens,
    ...ui,
    "agent-bg": tokens.bg,
    "sidebar-bg": ui.rail,
    "color-background": tokens.bg,
    "color-background-win-alt": tokens.bg,
    "color-background-alt": tokens.bg,
    "color-brand": tokens.accent,
    "color-border": ui.border,
    "color-border-light": ui.separator,
    "color-border-heavy": ui.border,
    "color-border-hover": ui.border,
    "color-hover": ui.hover,
    "color-selected": ui.active,
    "color-header": tokens.bg,
    "color-panel": tokens.bg,
    "color-sidebar": ui.rail,
    "color-surface": tokens.surface,
    "color-surface-hover": ui.hover,
    "color-card": tokens.surface,
    "color-card-selected": ui.active,
    "color-card-border": ui.border,
    "color-popover": ui.composer,
    "color-popover-header": tokens.surface,
    "color-popover-border": ui.border,
    "color-input": ui["surface-3"],
    "color-input-focused": ui["surface-3"],
    "color-input-border": ui.border,
    "color-input-border-hover": ui.border,
    "color-input-border-focused": ui.border,
    "color-tab": ui.rail,
    "color-tab-active": tokens.bg,
    "color-tab-border": ui.border,
    "color-menu": ui.composer,
    "color-menu-hover": ui.hover,
    "color-primary": tokens.accent,
    "color-primary-foreground": tokens.bg,
    "color-secondary": ui["surface-2"],
    "color-foreground": tokens.fg,
    "color-foreground-subtle": tokens.dim,
    "color-foreground-subtlest": tokens.hl2,
    "color-tag": ui["surface-2"],
    "ui-bg": tokens.bg,
    "ui-fg": tokens.fg,
    "ui-muted": tokens.dim,
    "ui-surface": tokens.surface,
    "ui-surface-2": ui["surface-2"],
    "ui-surface-3": ui["surface-3"],
    "ui-border": ui.border,
    "ui-separator": ui.separator,
    "ui-accent": tokens.accent,
  };
}

const THEME_TOKENS_BY_ID = Object.fromEntries(
  Array.from(THEME_BY_ID.entries()).map(([id, theme]) => [
    id,
    resolveThemeCssTokens(theme.tokens, theme.ui),
  ]),
) as Record<string, Record<string, string>>;

const FONT_FAMILY_CSS_BY_ID = Object.fromEntries(
  Array.from(FONT_FAMILY_BY_ID.entries()).map(([id, option]) => [id, option.cssValue]),
) as Record<string, string>;

const FONT_SIZE_CSS_BY_ID = Object.fromEntries(
  Array.from(FONT_SIZE_BY_ID.entries()).map(([id, option]) => [id, option.cssValue]),
) as Record<string, string>;

function setThemeTokens(tokens: ThemeTokens, ui: Partial<ThemeUiTokens> = {}): void {
  if (typeof document === "undefined") return;
  for (const [key, value] of Object.entries(resolveThemeCssTokens(tokens, ui))) {
    document.documentElement.style.setProperty(`--${key}`, value);
  }
}

export function applyThemeToDocument(themeId: ThemeId): ThemeId {
  if (typeof document === "undefined") return themeId;

  const nextTheme = THEME_BY_ID.get(themeId) ?? THEME_BY_ID.get(DEFAULT_THEME_ID);
  if (!nextTheme) return themeId;

  document.documentElement.setAttribute("data-theme", nextTheme.id);
  setThemeTokens(nextTheme.tokens, nextTheme.ui);
  return nextTheme.id;
}

export function applyFontFamilyToDocument(fontFamilyId: FontFamilyId): FontFamilyId {
  if (typeof document === "undefined") return fontFamilyId;

  const nextFont =
    FONT_FAMILY_BY_ID.get(fontFamilyId) ?? FONT_FAMILY_BY_ID.get(DEFAULT_FONT_FAMILY_ID);
  if (!nextFont) return fontFamilyId;

  document.documentElement.style.setProperty("--font-sans", nextFont.cssValue);
  return nextFont.id;
}

export function applyFontSizeToDocument(fontSizeId: FontSizeId): FontSizeId {
  if (typeof document === "undefined") return fontSizeId;

  const nextSize = FONT_SIZE_BY_ID.get(fontSizeId) ?? FONT_SIZE_BY_ID.get(DEFAULT_FONT_SIZE_ID);
  if (!nextSize) return fontSizeId;

  document.documentElement.style.setProperty("--app-font-size", nextSize.cssValue);
  return nextSize.id;
}

export function applyTokensToDocument(tokens: ThemeTokens): void {
  if (typeof document === "undefined") return;
  setThemeTokens(tokens);
}

/* ── Master scale/shape knobs (beyond colors) the Appearance editor controls ──
   These set the canonical CSS variables that the whole UI derives from, so a
   handful of values re-theme everything uniformly. Persisted to localStorage and
   re-applied on load. */
const UI_CONTROLS_KEY = "local-studio.uiControls";

export function applyUiControl(name: string, value: string): void {
  if (typeof document === "undefined") return;
  document.documentElement.style.setProperty(name, value);
  try {
    const raw = window.localStorage.getItem(UI_CONTROLS_KEY);
    const next = (raw ? JSON.parse(raw) : {}) as Record<string, string>;
    next[name] = value;
    window.localStorage.setItem(UI_CONTROLS_KEY, JSON.stringify(next));
  } catch {
    /* ignore */
  }
}

export function applyStoredUiControls(): void {
  if (typeof document === "undefined") return;
  try {
    const raw = window.localStorage.getItem(UI_CONTROLS_KEY);
    if (!raw) return;
    const stored = JSON.parse(raw) as Record<string, string>;
    for (const [name, value] of Object.entries(stored)) {
      if (name === "--composer" || name === "--composer-footer") continue;
      if (typeof value === "string") document.documentElement.style.setProperty(name, value);
    }
  } catch {
    /* ignore */
  }
}

export function getThemeBootstrapScript(): string {
  const bootstrapData = {
    storeKey: STORE_KEY,
    defaultThemeId: DEFAULT_THEME_ID,
    defaultFontFamilyId: DEFAULT_FONT_FAMILY_ID,
    defaultFontSizeId: DEFAULT_FONT_SIZE_ID,
    themeTokensById: THEME_TOKENS_BY_ID,
    fontFamilyCssById: FONT_FAMILY_CSS_BY_ID,
    fontSizeCssById: FONT_SIZE_CSS_BY_ID,
  };

  return `
    (function () {
      try {
        var data = ${JSON.stringify(bootstrapData)};
        var raw = localStorage.getItem(data.storeKey) || "{}";
        var parsed = JSON.parse(raw);
        var state = (parsed && typeof parsed === "object" && parsed.state && typeof parsed.state === "object")
          ? parsed.state
          : parsed;

        if (!state || typeof state !== "object") {
          state = {};
        }

        var themeId = typeof state.themeId === "string" ? state.themeId : data.defaultThemeId;
        var themeTokens = data.themeTokensById[themeId] || data.themeTokensById[data.defaultThemeId];
        var resolvedThemeId = data.themeTokensById[themeId] ? themeId : data.defaultThemeId;

        document.documentElement.setAttribute("data-theme", resolvedThemeId);

        if (themeTokens && typeof themeTokens === "object") {
          for (var tokenKey in themeTokens) {
            if (Object.prototype.hasOwnProperty.call(themeTokens, tokenKey)) {
              document.documentElement.style.setProperty("--" + tokenKey, themeTokens[tokenKey]);
            }
          }
        }

        var fontFamilyId = typeof state.fontFamilyId === "string" ? state.fontFamilyId : data.defaultFontFamilyId;
        var fontFamilyCss = data.fontFamilyCssById[fontFamilyId] || data.fontFamilyCssById[data.defaultFontFamilyId];
        if (fontFamilyCss) {
          document.documentElement.style.setProperty("--font-sans", fontFamilyCss);
        }

        var fontSizeId = typeof state.fontSizeId === "string" ? state.fontSizeId : data.defaultFontSizeId;
        var fontSizeCss = data.fontSizeCssById[fontSizeId] || data.fontSizeCssById[data.defaultFontSizeId];
        if (fontSizeCss) {
          document.documentElement.style.setProperty("--app-font-size", fontSizeCss);
        }
      } catch (e) {
        // no-op
      }
    })();
  `;
}