import React, { useEffect } from "react";
import { ActivityIndicator, View } from "react-native";
import { type Href } from "expo-router";
import { useNavigation } from "../../context/NavigationContext";
import { useColorScheme } from "nativewind";
import { useAuth, useRole } from "../../hooks/useAuth";
import { useAppConfig } from "../../context/AppConfigContext";

interface ProtectedRouteProps {
  children: React.ReactNode;
  requiredRole?: "Admin" | "User";
  redirectTo?: Href;
  fallback?: React.ReactNode;
}

export function ProtectedRoute({
  children,
  requiredRole,
  redirectTo,
  fallback,
}: ProtectedRouteProps) {
  const { isAuthenticated, isLoading, user } = useAuth();
  const router = useNavigation();
  const { routes } = useAppConfig();
  const hasRequiredRole = useRole(requiredRole || "User");
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  useEffect(() => {
    if (!isLoading) {
      if (!isAuthenticated) {
        router.replace((redirectTo ?? routes.login) as Href);
      } else if (requiredRole && !hasRequiredRole) {
        router.replace(routes.home);
      }
    }
  }, [isAuthenticated, isLoading, hasRequiredRole, requiredRole, user, router, redirectTo, routes]);

  if (isLoading) {
    if (fallback) {
      return <>{fallback}</>;
    }
    return (
      <View className="flex-1 items-center justify-center bg-background dark:bg-black">
        <ActivityIndicator size="large" color={isDark ? "#FFFFFF" : "#000000"} />
      </View>
    );
  }

  if (!isAuthenticated || (requiredRole && !hasRequiredRole)) {
    return null;
  }

  return <>{children}</>;
}

export function withAuth<P extends object>(
  Component: React.ComponentType<P>,
  options?: {
    requiredRole?: "Admin" | "User";
    redirectTo?: Href;
    fallback?: React.ReactNode;
  }
) {
  const ProtectedComponent = function ProtectedComponent(props: P) {
    return (
      <ProtectedRoute
        requiredRole={options?.requiredRole}
        redirectTo={options?.redirectTo}
        fallback={options?.fallback}
      >
        <Component {...props} />
      </ProtectedRoute>
    );
  };
  ProtectedComponent.displayName = `withAuth(${Component.displayName || Component.name || "Component"})`;
  return ProtectedComponent;
}

export function useProtectedContent(requiredRole?: "Admin" | "User") {
  const { isAuthenticated, isLoading, user } = useAuth();
  const hasRole = useRole(requiredRole || "User");

  return {
    canAccess: isAuthenticated && (!requiredRole || hasRole),
    isLoading,
    user,
  };
}

export default ProtectedRoute;