import { tokens } from '@fluentui/react-components'

/**
 * AeroFetch design tokens — the app's own semantic scales, layered on Fluent's.
 *
 * Batch 6 of the audit (UI2–UI7, UI12, UI26, L100, L101, L121, L125, L160, L164)
 * found the same visual decisions expressed as ad-hoc literals scattered across
 * components: four section gaps, seven card paddings, two floating shadows, two
 * hardcoded `zIndex: 1000`s, a raw `rgba()` scrim, nine inline icon sizes, and
 * three metadata separators. This module is the single home for those values so
 * every screen reads as one product and a change happens in one place.
 *
 * Where Fluent already defines a scale (spacing, radius, shadow, motion, the
 * overlay scrim) these alias Fluent's tokens, so the app stays pixel-aligned with
 * Fluent's own controls. Where Fluent has no token (z-index, icon px, the
 * metadata separator) the value lives here.
 *
 * Griffel evaluates `makeStyles` at runtime in this project (no build plugin — see
 * `thumbSizes` already imported into `downloadBar/styles.ts`), so these imported
 * constants work directly inside `makeStyles` blocks and in inline `style={{}}`.
 */

/**
 * Spacing ramp (px). Gaps, padding, and margins all draw from this one scale; the
 * comments record the role each step plays so call sites stay self-documenting.
 * Values match Fluent's spacing ramp (XXS 2 · XS 4 · S 8 · MNudge 10 · M 12 · L 16
 * · XL 20 · XXL 24 · XXXL 32).
 */
export const SPACE = {
  /** 2px — optical hairline nudge (e.g. aligning an icon to a text baseline) (L160). */
  hairline: '2px',
  /** 4px — icon-button clusters (UI5); tight margins between stacked lines (L160). */
  xtight: '4px',
  /** 8px — labelled-control rows (UI5); the default inline gap. */
  tight: '8px',
  /** 10px — control inner padding; small tiles. */
  snug: '10px',
  /** 12px — list-row padding; the gap between rows inside a card. */
  cozy: '12px',
  /** 16px — the one gap between screen sections (UI2) and the card padding tier (UI3). */
  section: '16px',
  /** 20px — a larger block gap. */
  roomy: '20px',
  /** 24px — page content padding (UI4); the hero padding tier's floor. */
  page: '24px',
  /** 32px — the onboarding / welcome hero card padding (UI3 hero tier). */
  hero: '32px'
} as const

/**
 * Corner-radius tiers by surface (UI6/UI7). Aliases Fluent's radius tokens, which
 * `friendlyRadii` (theme.ts) tunes to Medium 10 · Large 12 · XLarge 16.
 *
 * - `control` (10) — inputs, thumbnails, small tiles, popover rows.
 * - `surface` (12) — list-item cards and inline panels.
 * - `card` (16) — page-level cards (the download bar, settings cards, onboarding).
 */
export const RADIUS = {
  control: tokens.borderRadiusMedium,
  surface: tokens.borderRadiusLarge,
  card: tokens.borderRadiusXLarge
} as const

/**
 * Elevation scale (L100). Cards are flat by default (border only — the app's
 * resting surface); only genuinely floating surfaces cast a shadow.
 *
 * - `flat` — the default card: no shadow, a 1px neutral-stroke border.
 * - `raised` (shadow4) — the download bar, which floats above the queue.
 * - `overlay` (shadow28) — the command palette and any future popover.
 */
export const ELEVATION = {
  flat: 'none',
  raised: tokens.shadow4,
  overlay: tokens.shadow28
} as const

/**
 * Z-index scale (L101). Replaces the two hardcoded `zIndex: 1000`s so stacking is
 * ordered on purpose: tooltips sit above full-screen overlays.
 */
export const Z = {
  /** full-screen scrims and the command palette. */
  overlay: 1000,
  /** hint bubbles — above overlays so a tooltip is never clipped by one. */
  tooltip: 1100
} as const

/**
 * Theme-aware scrim for full-screen overlays (L121). Fluent's overlay token
 * replaces the renderer's one raw `rgba(0,0,0,0.32)` — it's the semantic dialog
 * scrim and darkens a touch more, so the palette separates cleanly from a dark UI.
 */
export const SCRIM = tokens.colorBackgroundOverlay

/**
 * Icon-size scale in px (UI12/L125): one small set instead of the nine scattered
 * `fontSize` literals. Applied as a numeric `fontSize={ICON.x}` on standalone
 * glyphs, or `` `${ICON.x}px` `` on the rare makeStyles container.
 *
 * - `inline` (16) — glyphs sitting inline with text (row actions, small badges).
 * - `control` (20) — glyphs inside buttons, nav items, toggles, and small leading
 *   accent icons (e.g. the onboarding folder/tip rows).
 * - `section` (24) — section/card-header glyphs (e.g. each settings card's title).
 * - `hero` (40) — the focal icon in an empty state.
 *
 * Snapped to the nearest tier rather than a literal px even when centered in a
 * fixed tile (UI11 — no literal px font sizes): the brand/source tiles
 * (Sidebar/Onboarding `mark`, Library `srcIcon`, History `emptyBadge`) take
 * `control` or `section`. Genuinely off this scale: the tiny `watchBadge` glyph
 * (matched to its badge-caption text size) and the thumbnail placeholder icons
 * (which track `thumbSizes`).
 */
export const ICON = {
  inline: 16,
  control: 20,
  section: 24,
  hero: 40
} as const

/**
 * Button size-by-role convention (UI16) — there's no token to alias (Fluent's
 * `size` prop is per-instance), so the rule lives here with the other scales:
 *
 * - `large`  — the screen's one primary action (DownloadBar Download / Add-to-
 *   queue, Library Index).
 * - `small`  — row actions and toolbar buttons inside lists (History row
 *   actions, Library toolbar, queue-header actions).
 * - default (medium) — settings-card buttons and everything in between.
 */

/**
 * One motion policy (UI26). The app keeps a single, subtle transition timing
 * (matching the sidebar's former `0.15s ease`) and gates *all* transitions and
 * animations behind `prefers-reduced-motion` globally in base.css — so motion is
 * consistent where it exists and fully off for users who ask for less.
 */
export const MOTION = {
  duration: tokens.durationFast,
  curve: tokens.curveEasyEase
} as const

/**
 * The single metadata separator (L164). Joins independent fields on a meta line
 * (e.g. `Channel • 12:04`, `1.2 GB/s • 3s left`). Previously three styles were in
 * use (`'  •  '`, `' · '`, `' • '`). Note this is distinct from the *intra-value*
 * separator inside a compound quality label ("720p · mp4 · 184 MB"), which is a
 * data format parsed elsewhere and intentionally left alone.
 */
export const META_SEP = ' • '
