import React from 'react';
import { motion } from 'framer-motion';

interface ToastProgressBarProps {
  progress: number;
  type?: 'success' | 'error' | 'warning' | 'info' | 'default';
}

const ToastProgressBar: React.FC<ToastProgressBarProps> = ({ progress, type = 'default' }) => {
  // Dynamic color mapping based on toast type
  const getColors = () => {
    const colors = {
      success: {
        base: 'var(--vyrn-progress-success-base)',
        highlight: 'var(--vyrn-progress-success-highlight)',
        glow: 'var(--vyrn-progress-success-glow)',
      },
      error: {
        base: 'var(--vyrn-progress-error-base)',
        highlight: 'var(--vyrn-progress-error-highlight)',
        glow: 'var(--vyrn-progress-error-glow)',
      },
      warning: {
        base: 'var(--vyrn-progress-warning-base)',
        highlight: 'var(--vyrn-progress-warning-highlight)',
        glow: 'var(--vyrn-progress-warning-glow)',
      },
      info: {
        base: 'var(--vyrn-progress-info-base)',
        highlight: 'var(--vyrn-progress-info-highlight)',
        glow: 'var(--vyrn-progress-info-glow)',
      },
      default: {
        base: 'var(--vyrn-progress-default-base)',
        highlight: 'var(--vyrn-progress-default-highlight)',
        glow: 'var(--vyrn-progress-default-glow)',
      },
    };
    return colors[type] || colors.default;
  };

  const colors = getColors();

  return (
    <motion.div
      style={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        height: '1.5px',
        overflow: 'hidden',
        background: 'rgba(255, 255, 255, 0.1)',
        backdropFilter: 'blur(8px)',
      }}
    >
      {/* Backdrop blur line */}
      <motion.div
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          width: '100%',
          height: '100%',
          background: 'rgba(255, 255, 255, 0.05)',
          backdropFilter: 'blur(2px)',
        }}
      />

      {/* Main progress line */}
      <motion.div
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          height: '100%',
          background: `linear-gradient(90deg, 
            ${colors.base}, 
            ${colors.highlight}, 
            ${colors.base}
          )`,
          backgroundSize: '200% 100%',
          boxShadow: `0 0 10px ${colors.glow}`,
        }}
        initial={{ width: '100%', backgroundPosition: '0% 0%' }}
        animate={{
          width: `${progress}%`,
          backgroundPosition: ['0% 0%', '100% 0%'],
        }}
        transition={{
          width: {
            duration: 0.12,
            ease: [0.22, 1, 0.36, 1],
          },
          backgroundPosition: {
            duration: 2,
            repeat: Infinity,
            ease: "linear"
          }
        }}
      >
        {/* Ultra-modern scanning effect */}
        <motion.div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            background: `linear-gradient(90deg,
              transparent 0%,
              ${colors.highlight}40 50%,
              transparent 100%
            )`,
            transform: 'translateX(-50%)',
          }}
          animate={{
            x: ['0%', '200%'],
          }}
          transition={{
            duration: 1.5,
            repeat: Infinity,
            ease: "linear",
          }}
        />

        {/* Micro dots effect */}
        <motion.div
          style={{
            position: 'absolute',
            top: 0,
            right: 0,
            width: '2px',
            height: '100%',
            background: colors.highlight,
            filter: 'blur(0.5px)',
          }}
          animate={{
            opacity: [1, 0.5, 1],
            scale: [1, 1.2, 1],
          }}
          transition={{
            duration: 1,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        />
      </motion.div>

      {/* Subtle completion flash */}
      {progress <= 2 && (
        <motion.div
          style={{
            position: 'absolute',
            inset: 0,
            background: `linear-gradient(90deg, transparent, ${colors.highlight}66, transparent)`,
            pointerEvents: 'none',
          }}
          initial={{ opacity: 0 }}
          animate={{ opacity: [0, 0.35, 0] }}
          transition={{ duration: 0.45, ease: 'easeOut' }}
        />
      )}

      {/* Ambient light effect */}
      <motion.div
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          width: `${progress}%`,
          height: '100%',
          background: `linear-gradient(90deg,
            transparent,
            ${colors.glow},
            transparent
          )`,
          filter: 'blur(4px)',
        }}
        animate={{
          opacity: [0.3, 0.6, 0.3],
        }}
        transition={{
          duration: 2,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      />
    </motion.div>
  );
};

export default ToastProgressBar;