"use client";

import { useState, useEffect, useCallback } from "react";
import { getVisibleMenuTree } from "@/lib/menu-v2/permission-service";
import type { MenuDomain, MenuTreeNode, MenuTreeActiveResult } from "@/lib/menu-v2/types";

interface UseVisibleMenuTreeResult extends MenuTreeActiveResult {
  isLoading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

/**
 * Hook to fetch user's visible menu tree (filtered by permissions)
 * Tree contains both menu groups (dropdowns) and top-level menus (single links)
 */
export function useVisibleMenuTree(domain: MenuDomain): UseVisibleMenuTreeResult {
  const [tree, setTree] = useState<MenuTreeNode[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  const fetchMenuTree = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    
    try {
      // Call server action directly
      const result = await getVisibleMenuTree(domain);
      setTree(result.tree);
    } catch (err) {
      console.error("Error fetching visible menu tree:", err);
      setError(err instanceof Error ? err : new Error("Unknown error"));
      setTree([]);
    } finally {
      setIsLoading(false);
    }
  }, [domain]);

  useEffect(() => {
    fetchMenuTree();
  }, [fetchMenuTree]);

  return {
    tree,
    isLoading,
    error,
    refetch: fetchMenuTree,
  };
}