"use client"

import React, { useState, useEffect } from 'react'
import { Platform, ViewStyle, TextStyle } from 'react-native'
import { motion, AnimatePresence } from 'framer-motion'
import { View, Text, StyleSheet, Animated } from 'react-native'
import { MotiView } from 'moti'
import { LoadingTextAnimationProps } from '../../types'

const defaultPhrases = [
  "loading...",
  "fetching data...",
  "calculating...",
]

const LoadingTextAnimation: React.FC<LoadingTextAnimationProps> = ({
  phrases = defaultPhrases,
  animationDuration = 3000, // 3 seconds for full animation cycle
  textStyle,
  containerStyle,
  fontFamily = "SpaceMono",
  theme = "dark"
}) => {
  const [index, setIndex] = useState(0)

  // Get colors based on theme
  const textColor = theme === 'light' ? '#6b7280' : '#9CA3AF'
  const bgColor = theme === 'light' ? '#f9fafb' : '#111827'

  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((prevIndex) => (prevIndex + 1) % phrases.length)
    }, animationDuration)

    return () => clearInterval(interval)
  }, [phrases, animationDuration])

  if (Platform.OS !== 'web') {
    // Render native version
    return (
      <View style={[styles.container, containerStyle]}>
        <MotiView
          key={index}
          from={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ type: 'timing', duration: 300 }}
        >
          <Animated.Text
            style={[
              styles.text,
              {
                color: textColor,
                fontFamily: fontFamily,
              },
              textStyle
            ]}
          >
            {phrases[index]}
          </Animated.Text>
        </MotiView>
      </View>
    )
  }

  // Web version using Framer Motion
  return (
    <div style={{ 
      alignSelf: 'flex-start', 
      paddingLeft: '24px',
      ...(containerStyle as any) 
    }}>
      <AnimatePresence mode="wait">
        <motion.div
          key={index}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3 }}
          style={{
            fontSize: '18px',
            fontWeight: 400,
            color: textColor,
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            fontFamily: fontFamily,
            lineHeight: '24px',
            ...(textStyle as any)
          }}
        >
          <div
            style={{
              backgroundImage: `linear-gradient(to right, ${textColor} 0%, ${textColor} 40%, ${bgColor} 50%, ${textColor} 60%, ${textColor} 100%)`,
              WebkitBackgroundClip: 'text',
              backgroundClip: 'text',
              color: 'transparent',
              backgroundSize: '200% 100%',
              animation: `slide ${animationDuration/1000}s linear infinite`,
            }}
          >
            {phrases[index]}
          </div>
        </motion.div>
      </AnimatePresence>
      <style>{`
        @keyframes slide {
          0%, 100% {
            background-position: 100% 50%;
          }
          93.33% {
            background-position: 0% 50%;
          }
          93.34%, 99.99% {
            background-position: 100% 50%;
          }
        }
      `}</style>
    </div>
  )
}

const styles = StyleSheet.create({
  container: {
    alignSelf: 'flex-start',
    paddingLeft: 24,
    height: 24,
  },
  text: {
    fontSize: 18,
    fontWeight: '400',
    textAlign: 'left',
    lineHeight: 24,
  },
});

export default LoadingTextAnimation;