import { Navigate, useLocation } from "react-router-dom";
import { useModuleEnabled, useModule } from "../contexts/ModuleContext";
import { Box, Typography } from "@mui/material";

interface ModuleGuardProps {
  /** Codice del modulo richiesto */
  moduleCode: string;
  /** Contenuto da renderizzare se il modulo è abilitato */
  children: React.ReactNode;
}

/**
 * Componente guard che protegge le route basandosi sullo stato del modulo.
 * Se il modulo non è abilitato, reindirizza alla pagina di acquisto.
 */
export function ModuleGuard({ moduleCode, children }: ModuleGuardProps) {
  const location = useLocation();
  const isEnabled = useModuleEnabled(moduleCode);
  const module = useModule(moduleCode);

  // Se il modulo non esiste (codice errato), mostra errore
  if (module === undefined) {
    return (
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          height: "50vh",
          gap: 2,
        }}
      >
        <Typography variant="h5" color="error">
          Modulo non trovato
        </Typography>
        <Typography color="text.secondary">
          Il modulo "{moduleCode}" non esiste.
        </Typography>
      </Box>
    );
  }

  // Se il modulo è abilitato, mostra il contenuto
  if (isEnabled) {
    return <>{children}</>;
  }

  // Modulo non abilitato: redirect alla pagina di acquisto
  return (
    <Navigate
      to={`/modules/purchase/${moduleCode}`}
      state={{ from: location.pathname }}
      replace
    />
  );
}

/**
 * HOC per proteggere un componente con ModuleGuard
 */
export function withModuleGuard<P extends object>(
  WrappedComponent: React.ComponentType<P>,
  moduleCode: string,
) {
  return function ModuleGuardedComponent(props: P) {
    return (
      <ModuleGuard moduleCode={moduleCode}>
        <WrappedComponent {...props} />
      </ModuleGuard>
    );
  };
}

export default ModuleGuard;
