'use client'

import { useEffect, useState } from 'react'

export function ScrollEffects() {
  const [scrollY, setScrollY] = useState(0)
  const [isVisible, setIsVisible] = useState(false)
  const [scrollProgress, setScrollProgress] = useState(0)
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    setIsMounted(true)
    
    const handleScroll = () => {
      const currentScrollY = window.scrollY
      setScrollY(currentScrollY)
      setIsVisible(currentScrollY > 100)
      
      // Calculate scroll progress safely
      const documentHeight = document.documentElement.scrollHeight
      const windowHeight = window.innerHeight
      const scrollableHeight = documentHeight - windowHeight
      
      if (scrollableHeight > 0) {
        const progress = Math.min((currentScrollY / scrollableHeight) * 100, 100)
        setScrollProgress(progress)
      }
    }

    // Only add event listener on client side
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', handleScroll, { passive: true })
      // Initial calculation
      handleScroll()
    }

    return () => {
      if (typeof window !== 'undefined') {
        window.removeEventListener('scroll', handleScroll)
      }
    }
  }, [])

  const scrollToTop = () => {
    if (typeof window !== 'undefined') {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }

  // Don't render until mounted on client
  if (!isMounted) {
    return null
  }

  return (
    <>
      {/* Floating Back to Top Button */}
      <button
        onClick={scrollToTop}
        style={{
          position: 'fixed',
          bottom: '24px',
          right: '24px',
          width: '56px',
          height: '56px',
          borderRadius: '50%',
          background: 'linear-gradient(135deg, #C89C2B, #7B2E2E)',
          color: '#F7F1E1',
          border: 'none',
          cursor: 'pointer',
          fontSize: '20px',
          zIndex: 1000,
          boxShadow: '0 4px 12px rgba(30, 26, 23, 0.3)',
          transform: isVisible ? 'translateY(0) scale(1)' : 'translateY(100px) scale(0)',
          transition: 'all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
        title="Back to top"
      >
        ↑
      </button>

      {/* Scroll Progress Bar */}
      <div
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: `${scrollProgress}%`,
          height: '3px',
          background: 'linear-gradient(90deg, #C89C2B, #7B2E2E)',
          zIndex: 1001,
          transition: 'width 0.1s ease'
        }}
      />

      {/* Floating Navigation Dots */}
      <div
        style={{
          position: 'fixed',
          right: '24px',
          top: '50%',
          transform: 'translateY(-50%)',
          zIndex: 1000,
          display: 'flex',
          flexDirection: 'column',
          gap: '12px',
          opacity: isVisible ? 1 : 0,
          transition: 'opacity 0.3s ease'
        }}
      >
        {[
          { id: 'hero', label: 'Top' },
          { id: 'latest-picks', label: 'Items' },
          { id: 'newsletter', label: 'Newsletter' }
        ].map((section) => (
          <button
            key={section.id}
            onClick={() => {
              const element = document.getElementById(section.id)
              if (element) {
                element.scrollIntoView({ behavior: 'smooth' })
              } else {
                window.scrollTo({ top: 0, behavior: 'smooth' })
              }
            }}
            style={{
              width: '12px',
              height: '12px',
              borderRadius: '50%',
              border: '2px solid #C89C2B',
              background: 'transparent',
              cursor: 'pointer',
              transition: 'all 0.3s ease',
              position: 'relative'
            }}
            title={section.label}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = '#C89C2B'
              e.currentTarget.style.transform = 'scale(1.2)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'transparent'
              e.currentTarget.style.transform = 'scale(1)'
            }}
          />
        ))}
      </div>
    </>
  )
}