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

// === Vojo "Dawn" call rail ===
//
// Both the incoming-ring card and the active-call card live inside the bottom
// horseshoe rail owned by `HorseshoeContainer`. The surface is EXACTLY the
// message-composer surface — `color.Surface.Container` (DAWN.bg2 #0d0e11 dark
// / #ffffff light), the same token `StreamBubble` and the chat composer bind
// to (see src/index.css "matches the composer card"). Text colour is pinned to
// `Surface.OnContainer` so the caller name stays legible in both themes.
//
// Two layouts share that surface:
//   * NATIVE (phone app) — a tall vertical card: avatar + name + state on top,
//     big labelled round actions below.
//   * WEB (desktop) — the original compact horizontal row, unchanged in size.

// Shared card surface (composer background + theme-correct text colour).
export const CallCard = style({
  backgroundColor: color.Surface.Container,
  color: color.Surface.OnContainer,
});

// Hairline divider between two stacked cards (a ring above the active pill, or
// two concurrent rings) so they read as separate items inside one sheet.
globalStyle(`${CallCard} + ${CallCard}`, {
  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
});

// --- Native: tall vertical card ---
export const CallCardNative = style({
  padding: `${config.space.S500} ${config.space.S400} ${config.space.S600}`,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
});

export const CallCardInner = style({
  width: '100%',
  maxWidth: toRem(460),
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: config.space.S500,
});

// --- Web: compact horizontal row (original size) ---
export const CallCardCompact = style({
  padding: `${toRem(14)} ${toRem(20)}`,
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  gap: config.space.S400,
});

// Identity block (native: stacked + centred).
export const CallIdentity = style({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: config.space.S300,
  textAlign: 'center',
  width: '100%',
  minWidth: 0,
});

const identityButtonReset = {
  background: 'transparent',
  border: 'none',
  padding: 0,
  cursor: 'pointer',
  color: 'inherit',
  font: 'inherit',
};

export const CallIdentityButton = style([CallIdentity, identityButtonReset]);

// Identity block (web compact: avatar left, text column right, fills the row).
export const CallIdentityCompact = style({
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  gap: config.space.S300,
  flexGrow: 1,
  minWidth: 0,
});

export const CallIdentityButtonCompact = style([
  CallIdentityCompact,
  { ...identityButtonReset, textAlign: 'left' },
]);

export const CallAvatar = style({
  width: toRem(72),
  height: toRem(72),
  flexShrink: 0,
});

export const CallAvatarCompact = style({
  width: toRem(56),
  height: toRem(56),
  flexShrink: 0,
});

// Pulsing ring on the incoming-call avatar — a soft teal halo that expands and
// fades, the «ringing right now» cue. Matches the rail's orbit accent.
const callerPulse = keyframes({
  '0%': { boxShadow: '0 0 0 0 rgba(91, 227, 197, 0.45)' },
  '70%': { boxShadow: `0 0 0 ${toRem(14)} rgba(91, 227, 197, 0)` },
  '100%': { boxShadow: '0 0 0 0 rgba(91, 227, 197, 0)' },
});

export const CallerPulse = style({
  borderRadius: '50%',
  animation: `${callerPulse} 1.8s ease-out infinite`,
  '@media': {
    '(prefers-reduced-motion: reduce)': {
      animation: 'none',
    },
  },
});

// Small uppercase eyebrow under the name (Dawn label convention, native card).
export const Eyebrow = style({
  textTransform: 'uppercase',
  letterSpacing: '0.1em',
  fontSize: toRem(11),
  fontWeight: config.fontWeight.W600,
  opacity: 0.55,
});

// State line: live dot + status text (Соединение / Вызов / m:ss timer).
export const StateLine = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S200,
  minWidth: 0,
});

export const Timer = style({
  fontVariantNumeric: 'tabular-nums',
});

// Live indicator next to the active-call state.
const livePulse = keyframes({
  '0%, 100%': { opacity: 1, transform: 'scale(1)' },
  '50%': { opacity: 0.55, transform: 'scale(0.85)' },
});

export const LiveDot = style({
  width: toRem(8),
  height: toRem(8),
  borderRadius: '50%',
  backgroundColor: color.Success.Main,
  flexShrink: 0,
});

export const LiveDotPulsing = style({
  animation: `${livePulse} 1.6s ease-in-out infinite`,
  '@media': {
    '(prefers-reduced-motion: reduce)': {
      animation: 'none',
    },
  },
});

// === Actions row + Vojo control buttons ===

// Native: centred row of round labelled controls, wrapping if a group call
// surfaces more than fits one line.
export const CallActions = style({
  display: 'flex',
  alignItems: 'flex-start',
  justifyContent: 'center',
  gap: config.space.S500,
  flexWrap: 'wrap',
  width: '100%',
});

// Web: compact controls cluster on the right of the row.
export const CallActionsCompact = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S200,
  flexShrink: 0,
});

// A single control: round icon disc + caption below. Replaces the stock folds
// IconButton with the Vojo call-screen affordance.
export const CallActionButton = style({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: toRem(7),
  background: 'transparent',
  border: 'none',
  padding: 0,
  cursor: 'pointer',
  font: 'inherit',
  color: 'inherit',
  width: toRem(72),
  selectors: {
    '&:disabled': {
      opacity: 0.4,
      cursor: 'default',
    },
  },
});

// Compact variant for the web row: no caption, narrower hit-target.
export const CallActionButtonCompact = style({
  width: 'auto',
});

const DISC = toRem(56);
const DISC_COMPACT = toRem(42);

export const CallActionDisc = style({
  width: DISC,
  height: DISC,
  borderRadius: '50%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: color.SurfaceVariant.ContainerActive,
  color: color.SurfaceVariant.OnContainer,
  transition: 'background-color 140ms ease, color 140ms ease, transform 90ms ease',
  selectors: {
    [`${CallActionButton}:active:not(:disabled) &`]: {
      transform: 'scale(0.94)',
    },
  },
});

export const CallActionDiscCompact = style({
  width: DISC_COMPACT,
  height: DISC_COMPACT,
});

// Active toggle (loudspeaker on, camera on, screenshare on) — Vojo accent.
export const CallActionDiscAccent = style({
  backgroundColor: color.Primary.Main,
  color: color.Primary.OnMain,
});

// Muted state (mic off) — attention tint so the user notices they're muted.
export const CallActionDiscMuted = style({
  backgroundColor: color.Critical.Container,
  color: color.Critical.Main,
});

// Destructive (end / hangup) — solid red.
export const CallActionDiscDanger = style({
  backgroundColor: color.Critical.Main,
  color: color.Critical.OnMain,
});

export const CallActionLabel = style({
  fontSize: toRem(11),
  fontWeight: config.fontWeight.W500,
  whiteSpace: 'nowrap',
  opacity: 0.75,
});

// Big explicit answer / decline buttons (incoming card). Full-width pair on
// native; compact auto-width on web. Uses folds Button, so colours come from
// the Success / Critical variants — these just own the layout.
export const RingButtons = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S300,
  flexShrink: 0,
});

// Native: stretch the pair across the card.
export const RingButtonsFull = style({
  width: '100%',
});

export const RingButtonGrow = style({
  flexGrow: 1,
  flexBasis: 0,
});
