import { useEffect } from "react";
import { useNavigate } from "@remix-run/react";
import { useMyStores } from "../requestHandler/use-seller-hooks";

/**
 * Guards a store dashboard route. A user may enter a store they OWN or are an
 * active STAFF member of. Non-members are redirected away. Returns the user's
 * role for this store so callers can gate owner-only UI.
 */
export function useStoreOwnership(storeId: string | undefined, mode?: string) {
  const navigate = useNavigate();
  const { data: stores, isLoading } = useMyStores();

  const current = stores?.find((s) => s.username === storeId);

  useEffect(() => {
    if (isLoading || mode === "create") return;
    if (!storeId) {
      navigate("/");
      return;
    }
    if (stores === undefined) return; // not loaded yet
    if (!current) {
      // Not a member of this store → send them to a store they can manage, else home.
      if (stores.length > 0) navigate(`/store/${stores[0].username}`);
      else navigate("/");
    }
  }, [stores, current, storeId, isLoading, navigate, mode]);

  const ownedOrFirst = stores?.find((s) => s.role === "owner") ?? stores?.[0];

  return {
    isLoading,
    isMember: !!current,
    role: current?.role ?? null,
    isOwner: current?.role === "owner",
    userStoreId: ownedOrFirst?.username,
    stores: stores ?? [],
  };
}

/**
 * Guard for OWNER-ONLY store pages (financial, shipping, edit, team). Redirects
 * non-members (via useStoreOwnership) and staff members back to the dashboard.
 * Returns { isLoading, isOwner } so callers can render a spinner meanwhile.
 */
export function useRequireOwner(storeId: string | undefined) {
  const navigate = useNavigate();
  const { isLoading, role } = useStoreOwnership(storeId);

  useEffect(() => {
    if (!isLoading && role && role !== "owner") {
      navigate(`/store/${storeId}`);
    }
  }, [isLoading, role, storeId, navigate]);

  return { isLoading, isOwner: role === "owner" };
}