import { globalStyle, keyframes, style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds';
import { ChatComposer } from './RoomView.css';

// The recorder renders into the composer's `replaceEditable` slot as two stacked
// rows (wave + controls), morphing the input in place. See VoiceRecorder and
// docs/plans/voice_messages.md.

const fadeIn = keyframes({
  from: { opacity: 0, transform: 'translateY(2px)' },
  to: { opacity: 1, transform: 'translateY(0)' },
});

export const Recorder = style({
  display: 'flex',
  flexDirection: 'column',
  width: '100%',
  boxSizing: 'border-box',
  animation: `${fadeIn} 160ms ease`,
});

export const WaveRow = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S300,
  width: '100%',
  boxSizing: 'border-box',
  minHeight: toRem(44),
  padding: `${config.space.S200} ${config.space.S400}`,
});

export const Controls = style({
  display: 'flex',
  alignItems: 'center',
  // A touch more breathing room than the text action row so the controls are
  // harder to mis-tap — but still compact.
  gap: config.space.S400,
  width: '100%',
  boxSizing: 'border-box',
  padding: `${toRem(2)} ${config.space.S300} ${toRem(4)}`,
});

export const Grow = style({ flexGrow: 1 });

// Circular violet play/pause beside the waveform — reads as a playback control
// (and is visually + positionally distinct from the Send action below it).
export const PlayBtn = style({
  flexShrink: 0,
  width: toRem(32),
  height: toRem(32),
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  border: 'none',
  padding: 0,
  borderRadius: config.radii.Pill,
  cursor: 'pointer',
  backgroundColor: color.Primary.Main,
  color: color.Primary.OnMain,
  transition: 'transform 120ms ease, background-color 120ms ease',
  selectors: {
    '&:hover': { backgroundColor: color.Primary.MainHover, transform: 'scale(1.06)' },
    '&:active': { transform: 'scale(0.92)' },
  },
});

// The composer touch-hover gate (RoomView.css) zeroes the background of EVERY
// `${ChatComposer} button` on a stuck :hover/:focus-visible after an Android
// WebView tap — which made this DELIBERATELY-filled play button vanish (violet
// fill → transparent, dark icon on dark = invisible). Re-assert the fill with a
// more specific selector (button.PlayBtn beats plain button) so it survives.
globalStyle(
  `:root[data-input="touch"] ${ChatComposer} button.${PlayBtn}:hover, :root[data-input="touch"] ${ChatComposer} button.${PlayBtn}:focus-visible`,
  { backgroundColor: color.Primary.Main }
);

const pulse = keyframes({
  '0%': { opacity: 1, transform: 'scale(1)' },
  '50%': { opacity: 0.35, transform: 'scale(0.82)' },
  '100%': { opacity: 1, transform: 'scale(1)' },
});

export const RecDot = style({
  width: toRem(10),
  height: toRem(10),
  borderRadius: config.radii.Pill,
  flexShrink: 0,
  backgroundColor: color.Critical.Main,
  animation: `${pulse} 1.2s ease-in-out infinite`,
});

export const Time = style({
  flexShrink: 0,
  minWidth: toRem(42),
  textAlign: 'right',
  fontVariantNumeric: 'tabular-nums',
  color: color.SurfaceVariant.OnContainer,
});

export const ErrorText = style({
  color: color.Critical.Main,
});

export const Waveform = style({
  position: 'relative',
  flexGrow: 1,
  minWidth: 0,
  display: 'flex',
  alignItems: 'center',
  gap: toRem(2),
  height: toRem(28),
  overflow: 'hidden',
});

export const WaveBar = style({
  flex: '1 1 0',
  minWidth: toRem(2),
  minHeight: toRem(2),
  borderRadius: config.radii.Pill,
  // Glide between samples (cadence ~80ms) so the live meter flows continuously
  // rather than snapping — and the played/unplayed boundary slides on playback.
  transition: 'height 90ms linear, background-color 120ms linear',
});

export const WaveBarPlayed = style({ backgroundColor: color.Primary.Main });
export const WaveBarRest = style({ backgroundColor: color.SurfaceVariant.ContainerLine });
export const WaveBarLive = style({ backgroundColor: color.Primary.Main });
