'use client';

import { useOnlineStatus } from '@/lib/pwa';
import { WifiOff, Wifi } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useState, useEffect } from 'react';

export default function OfflineIndicator() {
  const isOnline = useOnlineStatus();
  const [showBanner, setShowBanner] = useState(false);
  const [wasOffline, setWasOffline] = useState(false);

  useEffect(() => {
    if (!isOnline) {
      setShowBanner(true);
      setWasOffline(true);
    } else if (wasOffline) {
      setShowBanner(true);
      const timer = setTimeout(() => {
        setShowBanner(false);
        setWasOffline(false);
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [isOnline, wasOffline]);

  if (!showBanner) return null;

  return (
    <div
      className={cn(
        'fixed top-0 left-0 right-0 z-[80] transition-transform duration-300 ease-out safe-top',
        showBanner ? 'translate-y-0' : '-translate-y-full'
      )}
    >
      <div
        className={cn(
          'px-4 py-2 text-center text-sm font-medium flex items-center justify-center gap-2',
          isOnline
            ? 'bg-[#1f8a65] text-white'
            : 'bg-[#cf2d56] text-white'
        )}
      >
        {isOnline ? (
          <>
            <Wifi size={14} />
            Back online
          </>
        ) : (
          <>
            <WifiOff size={14} />
            You&apos;re offline — changes will sync when reconnected
          </>
        )}
      </div>
    </div>
  );
}