import { keyframes, style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds';
import { VOJO_HORSESHOE_GAP_PX, VOJO_HORSESHOE_RADIUS_PX } from '../../styles/horseshoe';

// VS Code-style inline event line («Interrupted»-look). No rail, no dot,
// no bubble — just a muted italic line that reads as a system note in
// the timeline. Lives inside the scrolled timeline column, above the
// composer overlay's reserved bottom padding, so there's no overlap with
// the composer on native.
//
// Left padding intentionally lines up with the X where the composer
// card's bottom-left rounded corner ends — i.e. composer outer gap +
// horseshoe radius. Same geometry on mobile and desktop.
const TYPING_LEFT_PAD_PX = VOJO_HORSESHOE_GAP_PX + VOJO_HORSESHOE_RADIUS_PX;

// Shimmer-sweep: a bright band travels left → right over the line via
// background-position. `background-clip: text` makes the gradient paint
// only inside the glyphs, so the line reads as text with a subtle wave
// of brightness — no extra dots, no UI widget.
const Shimmer = keyframes({
  from: { backgroundPosition: '100% 0' },
  to: { backgroundPosition: '-100% 0' },
});

// Two colour stops: `dim` is the base muted-gray the text sits at most
// of the time; `bright` is the highlight that sweeps across. Both
// derived from the surface ink token via color-mix so they reshade
// correctly across the dark / light themes.
const dim = `color-mix(in srgb, ${color.Surface.OnContainer} 45%, transparent)`;
const bright = color.Surface.OnContainer;

export const TypingRow = style({
  // Plain block — children are inline text/spans so the i18n strings'
  // leading/trailing whitespace flows naturally. `display: flex` would
  // wrap each text node in an anonymous flex item and strip the leading
  // space in « печатает...», eating the gap between the name and verb.
  display: 'block',
  fontStyle: 'italic',
  fontSize: toRem(13),
  lineHeight: toRem(18),
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  paddingLeft: toRem(TYPING_LEFT_PAD_PX),
  paddingRight: config.space.S400,
  paddingTop: toRem(2),
  paddingBottom: toRem(2),

  backgroundImage: `linear-gradient(
    90deg,
    ${dim} 0%,
    ${dim} 35%,
    ${bright} 50%,
    ${dim} 65%,
    ${dim} 100%
  )`,
  backgroundSize: '200% 100%',
  // MUST stay `repeat` (default). Animation slides bg-position by one
  // full pattern period (2× element width) per cycle. With `no-repeat`
  // the gradient leaves the element at the end of each cycle — text
  // goes fully transparent (color: transparent), then the keyframe
  // teleports back to the start position, which reads as a hard flicker.
  // With `repeat` the next pattern tile enters exactly as the previous
  // exits → seamless loop.
  backgroundRepeat: 'repeat',
  // Paint the gradient only inside the text glyphs. Both prefixed and
  // standard properties for cross-browser support — Safari still needs
  // the -webkit- pair as of 2026.
  backgroundClip: 'text',
  WebkitBackgroundClip: 'text',
  color: 'transparent',
  WebkitTextFillColor: 'transparent',
  animation: `${Shimmer} 2.4s linear infinite`,

  // Respect users who opted out of motion: drop the animation and the
  // gradient, fall back to a plain muted line.
  '@media': {
    '(prefers-reduced-motion: reduce)': {
      animation: 'none',
      backgroundImage: 'none',
      color: color.Surface.OnContainer,
      opacity: 0.6,
      WebkitTextFillColor: 'currentColor',
    },
  },
});

export const TypingName = style({
  fontStyle: 'normal',
  fontWeight: 500,
});
