import {
  type LearningCertificateAlignment,
  type LearningCertificateColor,
} from 'src/pages/dashboard/Learning/Settings/Certificates/types';

import { type ClassicTokenSpec, type ModernTokenSpec } from './types';

export const ALIGN_TO_JUSTIFY: Record<LearningCertificateAlignment, string> = {
  LEFT: 'flex-start',
  CENTER: 'center',
  RIGHT: 'flex-end',
};

export const COLOR_TYPE = {
  light: 'light',
  dark: 'dark',
} as const;

/** Fixed design size of the certificate canvas (scaled with a transform). */
export const CERTIFICATE_DESIGN_WIDTH = 500;
export const CERTIFICATE_DESIGN_HEIGHT = Math.round(
  CERTIFICATE_DESIGN_WIDTH * (210 / 297),
);

/** Header logo image height */
export const CERTIFICATE_LOGO_HEIGHT = '3.2em';

/** Classic token spec per accent color, matching the backend classic scheme. */
// biome-ignore format: keep the token table aligned one row per color
export const CLASSIC_TOKEN_MAP: Record<Exclude<LearningCertificateColor, 'COMMUNITY'>, ClassicTokenSpec> = {
  LIGHT_BLUE:     { hue: 'brand',    bg: 50,      border1: 500, border2: 200, border3: 300, text: 800, isDark: false },
  DARK_BLUE:      { hue: 'brand',    bg: 950,     border1: 500, border2: 100, border3: 200, text: 200, isDark: true  },
  LIGHT_SKY_BLUE: { hue: 'skyBlue',  bg: 50,      border1: 500, border2: 200, border3: 300, text: 800, isDark: false },
  DARK_SKY_BLUE:  { hue: 'skyBlue',  bg: 950,     border1: 500, border2: 200, border3: 300, text: 200, isDark: true  },
  LIGHT_VIOLET:   { hue: 'purple',   bg: 50,      border1: 500, border2: 300, border3: 300, text: 800, isDark: false },
  DARK_VIOLET:    { hue: 'purple',   bg: 950,     border1: 500, border2: 100, border3: 200, text: 200, isDark: true  },
  LIGHT_PURPLE:   { hue: 'mulberry', bg: 50,      border1: 500, border2: 200, border3: 300, text: 500, isDark: false },
  DARK_PURPLE:    { hue: 'mulberry', bg: 950,     border1: 500, border2: 200, border3: 300, text: 200, isDark: true  },
  LIGHT_BROWN:    { hue: 'tan',      bg: 50,      border1: 500, border2: 200, border3: 300, text: 500, isDark: false },
  DARK_BROWN:     { hue: 'tan',      bg: 950,     border1: 500, border2: 200, border3: 300, text: 200, isDark: true  },
  LIGHT_GREEN:    { hue: 'lime',     bg: 50,      border1: 500, border2: 200, border3: 300, text: 800, isDark: false },
  DARK_GREEN:     { hue: 'lime',     bg: 950,     border1: 500, border2: 200, border3: 300, text: 300, isDark: true  },
  LIGHT_GRAY:     { hue: 'blackInk', bg: 50,      border1: 300, border2: 100, border3: 300, text: 500, isDark: false },
  DARK_GRAY:      { hue: 'blackInk', bg: 950,     border1: 500, border2: 100, border3: 200, text: 200, isDark: true  },
  WHITE:          { hue: 'grey',     bg: 'white', border1: 800, border2: 100, border3: 200, text: 950, isDark: false },
};

/** Modern token spec per accent color, matching the backend modern scheme. */
// biome-ignore format: keep the token table aligned one row per color
export const MODERN_TOKEN_MAP: Record<Exclude<LearningCertificateColor, 'COMMUNITY'>, ModernTokenSpec> = {
  LIGHT_BLUE:     { hue: 'brand',    titleColor: 500, gradientTop: 800,     gradientBottom: 300,     accentColor: 500 },
  DARK_BLUE:      { hue: 'brand',    titleColor: 800, gradientTop: 800,     gradientBottom: 500,     accentColor: 500 },
  LIGHT_SKY_BLUE: { hue: 'skyBlue',  titleColor: 800, gradientTop: 800,     gradientBottom: 500,     accentColor: 500 },
  DARK_SKY_BLUE:  { hue: 'skyBlue',  titleColor: 900, gradientTop: 900,     gradientBottom: 700,     accentColor: 500 },
  LIGHT_VIOLET:   { hue: 'purple',   titleColor: 500, gradientTop: 500,     gradientBottom: 300,     accentColor: 500 },
  DARK_VIOLET:    { hue: 'purple',   titleColor: 800, gradientTop: 800,     gradientBottom: 500,     accentColor: 500 },
  LIGHT_PURPLE:   { hue: 'mulberry', titleColor: 500, gradientTop: 500,     gradientBottom: 200,     accentColor: 500 },
  DARK_PURPLE:    { hue: 'mulberry', titleColor: 800, gradientTop: 800,     gradientBottom: 500,     accentColor: 500 },
  LIGHT_BROWN:    { hue: 'tan',      titleColor: 500, gradientTop: 500,     gradientBottom: 200,     accentColor: 500 },
  DARK_BROWN:     { hue: 'tan',      titleColor: 800, gradientTop: 800,     gradientBottom: 500,     accentColor: 500 },
  LIGHT_GREEN:    { hue: 'lime',     titleColor: 800, gradientTop: 800,     gradientBottom: 500,     accentColor: 500 },
  DARK_GREEN:     { hue: 'lime',     titleColor: 900, gradientTop: 900,     gradientBottom: 600,     accentColor: 500 },
  LIGHT_GRAY:     { hue: 'grey',     titleColor: 700, gradientTop: 700,     gradientBottom: 300,     accentColor: 700 },
  DARK_GRAY:      { hue: 'grey',     titleColor: 900, gradientTop: 900,     gradientBottom: 500,     accentColor: 700 },
  WHITE:          { hue: 'grey',     titleColor: 950, gradientTop: 'white', gradientBottom: 'white', accentColor: 950 },
};
