import { useEffect, ReactNode, useState } from "react";
import { Navigate, useLocation } from "react-router";
import { useAuthStore } from "../../store/authStore";
import { useErrorHandler } from "../../hooks/useErrorHandler";
import { trackLoading } from "../common/LoadingStateMonitor";

interface ProtectedRouteProps {
  children: ReactNode;
}

/**
 * ProtectedRoute component - guards routes requiring authentication
 * Redirects to /signin if user is not authenticated
 */
export default function ProtectedRoute({ children }: ProtectedRouteProps) {
  const { isAuthenticated, loading } = useAuthStore();
  const location = useLocation();
  const { addError } = useErrorHandler('ProtectedRoute');
  const [showError, setShowError] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string>('');

  // Track loading state
  useEffect(() => {
    trackLoading('auth-loading', loading);
  }, [loading]);

  // Immediate check on mount: if loading is true, reset it immediately
  useEffect(() => {
    if (loading) {
      console.warn('ProtectedRoute: Loading state is true on mount, resetting immediately');
      useAuthStore.setState({ loading: false });
    }
  }, []);

  // Safety timeout: if loading becomes true and stays stuck, show error
  useEffect(() => {
    if (loading) {
      const timeout1 = setTimeout(() => {
        setErrorMessage('Authentication check is taking longer than expected. This may indicate a network or server issue.');
        setShowError(true);
        addError(new Error('Auth loading stuck for 3 seconds'), 'ProtectedRoute');
      }, 3000);

      const timeout2 = setTimeout(() => {
        console.error('ProtectedRoute: Loading state stuck for 5 seconds, forcing reset');
        useAuthStore.setState({ loading: false });
        setShowError(false);
      }, 5000);

      return () => {
        clearTimeout(timeout1);
        clearTimeout(timeout2);
      };
    } else {
      setShowError(false);
    }
  }, [loading, addError]);

  // Show loading state while checking authentication
  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
        <div className="text-center max-w-md px-4">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500 mb-4"></div>
          <p className="text-lg font-medium text-gray-800 dark:text-white mb-2">Loading...</p>
          
          {showError && (
            <div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
              <p className="text-sm text-yellow-800 dark:text-yellow-200 mb-3">
                {errorMessage}
              </p>
              <button
                onClick={() => {
                  useAuthStore.setState({ loading: false });
                  setShowError(false);
                  window.location.reload();
                }}
                className="px-4 py-2 text-sm bg-yellow-600 text-white rounded hover:bg-yellow-700"
              >
                Retry or Reload Page
              </button>
            </div>
          )}
        </div>
      </div>
    );
  }

  // Redirect to signin if not authenticated
  if (!isAuthenticated) {
    return <Navigate to="/signin" state={{ from: location }} replace />;
  }

  return <>{children}</>;
}

