'use client';

import { WifiOff } from 'lucide-react';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

export default function OfflinePage() {
  const [isOnline, setIsOnline] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // Check if we're back online
    const handleOnline = () => {
      setIsOnline(true);
      // Automatically redirect after a short delay
      setTimeout(() => {
        router.push('/');
      }, 1000);
    };

    window.addEventListener('online', handleOnline);
    
    return () => {
      window.removeEventListener('online', handleOnline);
    };
  }, [router]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
      <div className="text-center max-w-md">
        <div className="flex justify-center mb-6">
          <div className="bg-blue-100 p-4 rounded-full">
            <WifiOff className="w-12 h-12 text-blue-600" />
          </div>
        </div>
        
        <h1 className="text-3xl font-bold text-gray-900 mb-4">
          {isOnline ? "You're Back Online!" : "You're Offline"}
        </h1>
        
        {isOnline ? (
          <p className="text-gray-600 mb-8">
            Your connection has been restored. Redirecting...
          </p>
        ) : (
          <>
            <p className="text-gray-600 mb-8">
              It looks like you've lost your internet connection. Don't worry, your data is safe and will sync when you're back online.
            </p>

            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 text-left mb-6">
              <h2 className="font-semibold text-gray-900 mb-3">What you can do:</h2>
              <ul className="space-y-2 text-gray-600">
                <li className="flex items-start">
                  <span className="text-blue-600 mr-2">•</span>
                  <span>View your cached lists and tasks</span>
                </li>
                <li className="flex items-start">
                  <span className="text-blue-600 mr-2">•</span>
                  <span>Make changes that will sync later</span>
                </li>
                <li className="flex items-start">
                  <span className="text-blue-600 mr-2">•</span>
                  <span>Check your connection and try again</span>
                </li>
              </ul>
            </div>

            <div className="bg-amber-50 rounded-lg border border-amber-200 p-4 text-left mb-6">
              <h3 className="font-semibold text-amber-900 mb-2 text-sm">Note about authentication:</h3>
              <p className="text-amber-800 text-sm">
                Login and registration require an internet connection. If you need to sign in, please connect to the internet first.
              </p>
            </div>
          </>
        )}

        <button
          onClick={() => window.location.reload()}
          className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          disabled={isOnline}
        >
          {isOnline ? 'Redirecting...' : 'Try Again'}
        </button>
      </div>
    </div>
  );
}