import CertificateClassic from 'src/assets/svg/certificate-classic.svg?react';
import CertificateModern from 'src/assets/svg/certificate-modern.svg?react';
import CertificatePersonalized from 'src/assets/svg/certificate-personalized.svg?react';

import { CertificateType } from '../constants';
import { type LearningCertificateColor } from '../types';

import {
  type CertificateCreateFormValues,
  type CertificateFunnel,
  type CertificateStepId,
  type CertificateTemplateOption,
} from './types';

export const CERTIFICATE_PREVIEW_ASPECT_RATIO = '297 / 210';

export const CERTIFICATE_MULTILINE_PAD_X = 14;
export const CERTIFICATE_MULTILINE_PAD_Y = 16.5;
export const CERTIFICATE_MULTILINE_END_ICON_RESERVE_PX = 48;
export const CERTIFICATE_MULTILINE_FONT_SIZE = '1rem';
export const CERTIFICATE_MULTILINE_LINE_HEIGHT = 1.4375;

export const CERTIFICATE_BASIC_INFO_INPUT_IDS = {
  certificateName: 'certificate-create-name',
  headingTitle: 'certificate-create-heading-title',
  subtitle: 'certificate-create-subtitle',
  description: 'certificate-create-description',
} as const;

export const CERTIFICATE_NAME_MAX_LENGTH = 120;
export const CERTIFICATE_HEADING_TITLE_MAX_LENGTH = 30;
export const CERTIFICATE_SUBTITLE_MAX_LENGTH = 100;
export const CERTIFICATE_DESCRIPTION_MAX_LENGTH = 150;
export const CERTIFICATE_SIGNER_NAME_MAX_LENGTH = 50;
export const CERTIFICATE_SIGNER_TITLE_MAX_LENGTH = 50;

export const CERTIFICATE_DESIGN_IMAGE_MAX_BYTES = 50 * 1024 * 1024;

export const CERTIFICATE_FIELD_I18N_BASE =
  'settings.certificates.create_flow.fields' as const;

export const certificateAdditionalFieldTypes = [
  'title',
  'startDate',
  'endDate',
  'duration',
] as const;

export type CertificateAdditionalFieldType =
  (typeof certificateAdditionalFieldTypes)[number];

/**
 * Maps each camelCase field type (used as the backend placeholder token) to its
 * i18n key fragment. Backend tokens are camelCase while translation keys are
 * snake_case, so the two are kept decoupled here.
 */
export const CERTIFICATE_FIELD_I18N_KEY = {
  title: 'title',
  startDate: 'start_date',
  endDate: 'end_date',
  duration: 'duration',
} as const satisfies Record<CertificateAdditionalFieldType, string>;

export const CERTIFICATES_FEATURE_MODAL_STORAGE_KEY =
  'learning-certificates-feature';

export const FOOTER_Z_INDEX = 1000;

export const CERTIFICATE_STEP_IDS: CertificateStepId[] = [
  'template',
  'basic_information',
  'design',
  'revision',
];

export const CERTIFICATE_STEP_ID = {
  template: 'template',
  basicInformation: 'basic_information',
  design: 'design',
  revision: 'revision',
} as const satisfies Record<string, CertificateStepId>;

export const certificateTemplateOptions: CertificateTemplateOption[] = [
  {
    type: CertificateType.CLASSIC,
    slug: 'classic',
    Image: CertificateClassic,
  },
  { type: CertificateType.MODERN, slug: 'modern', Image: CertificateModern },
  {
    type: CertificateType.CUSTOM_BACKGROUND,
    slug: 'custom',
    Image: CertificatePersonalized,
  },
];

export const TEMPLATE_THUMB_WIDTH_PX = 174;
export const TEMPLATE_THUMB_HEIGHT_PX = 129;

export const CERTIFICATE_MAX_SIGNATURES = 3;

export const CERTIFICATE_MAX_LOGOS = 2;

export const CERTIFICATE_DESIGN_IMAGE_MAX_MB = 50;

/** Maps each color value to its i18n label key. */
export const CERTIFICATE_ACCENT_COLOR_I18N_KEYS: Record<
  LearningCertificateColor,
  string
> = {
  COMMUNITY: 'backoffice_only:color_input_select.community_color',
  LIGHT_BLUE: 'backoffice_only:color_input_select.light_blue',
  DARK_BLUE: 'backoffice_only:color_input_select.dark_blue',
  LIGHT_BROWN: 'backoffice_only:color_input_select.light_brown',
  DARK_BROWN: 'backoffice_only:color_input_select.dark_brown',
  LIGHT_GREEN: 'backoffice_only:color_input_select.light_green',
  DARK_GREEN: 'backoffice_only:color_input_select.dark_green',
  LIGHT_VIOLET: 'backoffice_only:color_input_select.light_violet',
  DARK_VIOLET: 'backoffice_only:color_input_select.dark_violet',
  LIGHT_PURPLE: 'backoffice_only:color_input_select.light_purple',
  DARK_PURPLE: 'backoffice_only:color_input_select.dark_purple',
  LIGHT_SKY_BLUE: 'backoffice_only:color_input_select.light_sky_blue',
  DARK_SKY_BLUE: 'backoffice_only:color_input_select.dark_sky_blue',
  LIGHT_GRAY: 'backoffice_only:color_input_select.light_grey',
  DARK_GRAY: 'backoffice_only:color_input_select.dark_grey',
  WHITE: 'backoffice_only:color_input_select.white',
};

export const CERTIFICATE_FUNNELS = {
  creation: 'creation',
} as const satisfies Record<string, CertificateFunnel>;

export const STEP_FIELDS_MAP: Record<
  CertificateStepId,
  (keyof CertificateCreateFormValues)[]
> = {
  template: ['type'],
  basic_information: ['name', 'title', 'subtitle', 'description'],
  design: [
    'certificateSignaturesEnabled',
    'signatureSlots',
    'certificateLogosEnabled',
    'logoSlots',
    'alignment',
  ],
  revision: [],
};
