"use client";
import React, { useState, useEffect } from 'react';
import { useNetworkStatus } from '../lib/hooks/useNetworkStatus';
import { WifiOff, Wifi, X } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

export const NetworkBanner = () => {
  const isOnline = useNetworkStatus();
  const [showStatus, setShowStatus] = useState(false);
  const [wasOffline, setWasOffline] = useState(false);

  useEffect(() => {
    if (!isOnline) {
      Promise.resolve().then(() => {
        setShowStatus(true);
        setWasOffline(true);
      });
    } else if (wasOffline) {
      // Show "Back Online" message briefly
      Promise.resolve().then(() => setShowStatus(true));
      const timer = setTimeout(() => {
        setShowStatus(false);
        setWasOffline(false);
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [isOnline, wasOffline]);

  return (
    <AnimatePresence>
      {showStatus && (
        <motion.div
          initial={{ y: -100 }}
          animate={{ y: 0 }}
          exit={{ y: -100 }}
          className={`fixed top-0 left-0 right-0 z-[100] text-white py-3 px-4 flex items-center justify-between shadow-2xl backdrop-blur-md ${
            isOnline ? 'bg-emerald-500/90' : 'bg-rose-500/90'
          }`}
          dir="rtl"
        >
          <div className="flex items-center gap-3">
            {isOnline ? (
              <div className="bg-white/20 p-2 rounded-xl">
                <Wifi className="w-5 h-5 animate-pulse" />
              </div>
            ) : (
              <div className="bg-white/20 p-2 rounded-xl">
                <WifiOff className="w-5 h-5 animate-bounce" />
              </div>
            )}
            <div>
              <p className="font-black text-sm">
                {isOnline 
                  ? 'اتصال اینترنت مجدداً برقرار شد.' 
                  : 'اتصال اینترنت شما قطع شده است. در حال تلاش برای اتصال مجدد...'}
              </p>
            </div>
          </div>
          
          <button 
            onClick={() => setShowStatus(false)}
            className="hover:bg-white/10 p-2 rounded-full transition-colors"
          >
            <X className="w-4 h-4" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
};