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

const pulseRing = keyframes({
  '0%': {
    transform: 'scale(0.95)',
    opacity: 1,
  },
  '50%': {
    transform: 'scale(1.1)',
    opacity: 0.5,
  },
  '100%': {
    transform: 'scale(0.95)',
    opacity: 1,
  },
});

const slideIn = keyframes({
  '0%': {
    transform: 'translateX(100%)',
    opacity: 0,
  },
  '100%': {
    transform: 'translateX(0)',
    opacity: 1,
  },
});

export const IncomingCallContainer = style([
  DefaultReset,
  {
    position: 'fixed',
    top: config.space.S400,
    right: config.space.S400,
    zIndex: 10000,
    animation: `${slideIn} 0.3s ease-out`,
  },
]);

export const IncomingCallContent = style({
  backgroundColor: color.Surface.Container,
  borderRadius: config.radii.R400,
  padding: config.space.S400,
  boxShadow: `0 4px 20px ${color.Other.Shadow}`,
  minWidth: '300px',
  maxWidth: '400px',
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S400,
  border: `1px solid ${color.Surface.ContainerLine}`,
});

export const CallerInfo = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S300,
});

export const CallerAvatarWrapper = style({
  position: 'relative',
  width: '56px',
  height: '56px',
  flexShrink: 0,
});

export const CallerAvatar = style({
  width: '56px',
  height: '56px',
  borderRadius: '50%',
  position: 'relative',
  zIndex: 1,
});

export const CallerAvatarRing = style({
  position: 'absolute',
  top: '-4px',
  left: '-4px',
  right: '-4px',
  bottom: '-4px',
  borderRadius: '50%',
  border: `2px solid ${color.Success.Main}`,
  animation: `${pulseRing} 1.5s ease-in-out infinite`,
  zIndex: 0,
});

export const CallerName = style({
  color: color.Surface.OnContainer,
  fontWeight: 600,
});

export const OtherCallers = style({
  color: color.Secondary.Main,
  fontWeight: 400,
});

export const RoomName = style({
  color: color.Secondary.Main,
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S100,
});

export const CallActions = style({
  justifyContent: 'flex-end',
  marginTop: config.space.S100,
});

export const DeclineButton = style({
  width: '48px',
  height: '48px',
  borderRadius: '50%',
});

export const AcceptButton = style({
  width: '48px',
  height: '48px',
  borderRadius: '50%',
});
