import { TypographyVariantsOptions } from '@mui/material';

/** Space Grotesk CSS variable, wired via next/font/google in
 *  src/app/[locale]/layout.tsx, attached to <html> only on `en` routes
 *  (mirrors the Mikhak/`fa` pattern — never loaded in a component). */
export const BRAND_FONT_VARIABLE_EN = '--font-space-grotesk';

/** CSS variable injected by next/font/local (Mikhak), attached to <html> only
 *  on `fa` routes in src/app/[locale]/layout.tsx. */
export const BRAND_FONT_VARIABLE_FA = '--font-mikhak';

const SYSTEM_FONT_STACK = [
  '-apple-system',
  'BlinkMacSystemFont',
  '"Segoe UI"',
  'Roboto',
  '"Helvetica Neue"',
  'Arial',
  'sans-serif',
].join(', ');

/** Brand display font with graceful fallbacks. */
const DISPLAY_FONT_LTR = `var(${BRAND_FONT_VARIABLE_EN}), "Space Grotesk", ${SYSTEM_FONT_STACK}`;

/** Persian display + body font with graceful fallbacks. */
const DISPLAY_FONT_RTL = `var(${BRAND_FONT_VARIABLE_FA}), "Mikhak", "Tahoma", "Arial Unicode MS", sans-serif`;

/*
 * Weight system: both Mikhak (fa) and Space Grotesk (en) load only 400/500/700
 * (see the font declarations in app/[locale]/layout.tsx) — there is no 600
 * face in either family, so a theme/sx `fontWeight: 600` silently renders 700
 * (CSS font-matching resolves upward to the nearest loaded weight). This theme
 * therefore never requests 600: headings + buttons use 700, in-text emphasis
 * (subtitles, chip labels, stat emphasis) uses 500. Follow this convention in
 * new component styles instead of reintroducing 600.
 */
const WEIGHT_HEADING = 700;
const WEIGHT_EMPHASIS = 500;
const WEIGHT_BODY = 400;

/*
 * Shared size/line-height scale (both directions). Replaces MUI's Latin-tuned
 * defaults (e.g. a 6rem h1, tight h4 line-height of 1.235) with sizes actually
 * used in the app and headroom for Persian ascenders/descenders. Multiplied
 * across breakpoints by responsiveFontSizes() in theme.ts — do not hand-roll
 * per-breakpoint sizes here.
 */
const SIZE_SCALE = {
  h1: { fontSize: '2.5rem', lineHeight: 1.45 },
  h2: { fontSize: '2.125rem', lineHeight: 1.45 },
  h3: { fontSize: '1.75rem', lineHeight: 1.45 },
  h4: { fontSize: '1.5rem', lineHeight: 1.45 },
  h5: { fontSize: '1.25rem', lineHeight: 1.45 },
  h6: { fontSize: '1.125rem', lineHeight: 1.4 },
  subtitle1: { fontSize: '1rem', lineHeight: 1.6 },
  subtitle2: { fontSize: '0.875rem', lineHeight: 1.6 },
  body1: { fontSize: '1rem', lineHeight: 1.7 },
  body2: { fontSize: '0.875rem', lineHeight: 1.7 },
  button: { fontSize: '0.9375rem', lineHeight: 1.5 },
  caption: { fontSize: '0.75rem', lineHeight: 1.6 },
  overline: { fontSize: '0.75rem', lineHeight: 1.6 },
} as const;

/**
 * @param headingFamily font for h1–h6 + button (the display/brand voice)
 * @param bodyFamily font for subtitle/body/caption/overline
 * @param extra shared overrides (e.g. letterSpacing) applied to every variant
 */
function buildScale(headingFamily: string, bodyFamily: string, extra?: { letterSpacing: number }) {
  const heading = extra ? { fontFamily: headingFamily, ...extra } : { fontFamily: headingFamily };
  const body = extra ? { fontFamily: bodyFamily, ...extra } : { fontFamily: bodyFamily };
  return {
    h1: { ...heading, ...SIZE_SCALE.h1, fontWeight: WEIGHT_HEADING },
    h2: { ...heading, ...SIZE_SCALE.h2, fontWeight: WEIGHT_HEADING },
    h3: { ...heading, ...SIZE_SCALE.h3, fontWeight: WEIGHT_HEADING },
    h4: { ...heading, ...SIZE_SCALE.h4, fontWeight: WEIGHT_HEADING },
    h5: { ...heading, ...SIZE_SCALE.h5, fontWeight: WEIGHT_HEADING },
    h6: { ...heading, ...SIZE_SCALE.h6, fontWeight: WEIGHT_HEADING },
    subtitle1: { ...body, ...SIZE_SCALE.subtitle1, fontWeight: WEIGHT_EMPHASIS },
    subtitle2: { ...body, ...SIZE_SCALE.subtitle2, fontWeight: WEIGHT_EMPHASIS },
    body1: { ...body, ...SIZE_SCALE.body1, fontWeight: WEIGHT_BODY },
    body2: { ...body, ...SIZE_SCALE.body2, fontWeight: WEIGHT_BODY },
    button: { ...heading, ...SIZE_SCALE.button, fontWeight: WEIGHT_HEADING, textTransform: 'none' as const },
    caption: { ...body, ...SIZE_SCALE.caption, fontWeight: WEIGHT_BODY },
    overline: { ...body, ...SIZE_SCALE.overline, fontWeight: WEIGHT_EMPHASIS },
  };
}

/** LTR typography — Space Grotesk headings, system font body (unchanged split;
 *  MUI's Latin letter-spacing defaults are fine as-is, so `extra` is omitted). */
export const TYPOGRAPHY_LTR: TypographyVariantsOptions = {
  fontFamily: SYSTEM_FONT_STACK,
  ...buildScale(DISPLAY_FONT_LTR, SYSTEM_FONT_STACK),
};

/**
 * RTL typography — Mikhak for all text (headings + body) to ensure full Persian
 * glyph coverage. `letterSpacing: 0` on every variant: Persian is a joined
 * (cursive) script and any tracking breaks Mikhak's glyph connections — MUI's
 * Latin defaults set non-zero spacing on body1/body2/button/caption/overline,
 * which is wrong here.
 */
export const TYPOGRAPHY_RTL: TypographyVariantsOptions = {
  fontFamily: DISPLAY_FONT_RTL,
  ...buildScale(DISPLAY_FONT_RTL, DISPLAY_FONT_RTL, { letterSpacing: 0 }),
};
