'use client'

import { useEffect, useState } from 'react'
import { RefreshCw } from 'lucide-react'

/**
 * Visual indicator that shows when the page is syncing
 */
export default function SyncIndicator() {
  const [mounted, setMounted] = useState(false)
  const [isSyncing, setIsSyncing] = useState(false)
  const [lastSync, setLastSync] = useState<Date>(new Date())

  useEffect(() => {
    setMounted(true)
  }, [])

  useEffect(() => {
    if (!mounted) return

    // Listen for router refresh events
    const handleSync = () => {
      setIsSyncing(true)
      setLastSync(new Date())
      setTimeout(() => setIsSyncing(false), 500)
    }

    // Trigger on visibility change
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        handleSync()
      }
    }

    document.addEventListener('visibilitychange', handleVisibilityChange)

    // Simulate sync indicator every second
    const interval = setInterval(handleSync, 1000)

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange)
      clearInterval(interval)
    }
  }, [mounted])

  // Don't render on server to avoid hydration mismatch
  if (!mounted) {
    return null
  }

  return (
    <div className="fixed top-4 right-4 z-50 flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg shadow-sm text-xs text-gray-600">
      <RefreshCw 
        size={14} 
        className={`${isSyncing ? 'animate-spin text-blue-500' : 'text-gray-400'}`} 
      />
      <span>
        {isSyncing ? 'Syncing...' : `Last sync: ${lastSync.toLocaleTimeString()}`}
      </span>
    </div>
  )
}