import React from 'react';
import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
import { COLORS, GLASS_CARD, SPRING } from '../styles/theme';

export const GlassCard: React.FC<{
  children: React.ReactNode;
  delay?: number;
  width?: number | string;
  height?: number | string;
  borderColor?: string;
  glowColor?: string;
  padding?: number | string;
  style?: React.CSSProperties;
  animateFrom?: 'bottom' | 'left' | 'right' | 'scale' | 'none';
}> = ({
  children,
  delay = 0,
  width,
  height,
  borderColor = 'rgba(255, 255, 255, 0.06)',
  glowColor,
  padding = 24,
  style = {},
  animateFrom = 'bottom',
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame: frame - delay,
    fps,
    config: SPRING.smooth,
  });

  let transform = '';
  let opacity = progress;

  switch (animateFrom) {
    case 'bottom':
      transform = `translateY(${interpolate(progress, [0, 1], [40, 0])}px)`;
      break;
    case 'left':
      transform = `translateX(${interpolate(progress, [0, 1], [-60, 0])}px)`;
      break;
    case 'right':
      transform = `translateX(${interpolate(progress, [0, 1], [60, 0])}px)`;
      break;
    case 'scale':
      transform = `scale(${interpolate(progress, [0, 1], [0.8, 1])})`;
      break;
    case 'none':
      opacity = 1;
      break;
  }

  return (
    <div
      style={{
        ...GLASS_CARD,
        width,
        height,
        padding,
        border: `1px solid ${borderColor}`,
        transform,
        opacity,
        position: 'relative',
        overflow: 'hidden',
        ...(glowColor
          ? { boxShadow: `0 8px 32px rgba(0,0,0,0.4), 0 0 40px ${glowColor}20, inset 0 1px 0 rgba(255,255,255,0.04)` }
          : {}),
        ...style,
      }}
    >
      {/* Top highlight line */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: '10%',
          right: '10%',
          height: 1,
          background: `linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)`,
        }}
      />
      {children}
    </div>
  );
};

export const AnimatedGlowBorder: React.FC<{
  children: React.ReactNode;
  color1?: string;
  color2?: string;
  borderRadius?: number;
  speed?: number;
  style?: React.CSSProperties;
}> = ({
  children,
  color1 = COLORS.primary,
  color2 = COLORS.secondary,
  borderRadius = 20,
  speed = 1,
  style = {},
}) => {
  const frame = useCurrentFrame();
  const angle = (frame * 2 * speed) % 360;

  return (
    <div
      style={{
        position: 'relative',
        borderRadius,
        padding: 1,
        background: `conic-gradient(from ${angle}deg, ${color1}, ${color2}, ${color1})`,
        ...style,
      }}
    >
      <div
        style={{
          borderRadius: borderRadius - 1,
          background: COLORS.darkCard,
          width: '100%',
          height: '100%',
          overflow: 'hidden',
        }}
      >
        {children}
      </div>
    </div>
  );
};
