import React from "react";

/**
 * localStorage key persisting whether the welcome onboarding flow has
 * been completed (or skipped). Once present, the modal won't auto-show
 * again on subsequent visits.
 */
export const ONBOARDING_COMPLETED_STORAGE_KEY = "openhands-onboarded";

function readCompletedFromStorage(): boolean {
  if (typeof window === "undefined") return true;
  try {
    return (
      window.localStorage.getItem(ONBOARDING_COMPLETED_STORAGE_KEY) !== null
    );
  } catch {
    // Inaccessible localStorage (private mode, SSR, …) — assume the
    // user has already onboarded so we don't loop on every render.
    return true;
  }
}

/**
 * Tracks whether the welcome onboarding modal has been completed.
 * The hook returns the current `isCompleted` flag plus an imperative
 * `markCompleted()` callback. State is mirrored to localStorage and
 * synced across tabs via the `storage` event.
 */
export function useOnboardingCompletion() {
  const [isCompleted, setIsCompleted] = React.useState<boolean>(() =>
    readCompletedFromStorage(),
  );

  React.useEffect(() => {
    const handleStorage = (event: StorageEvent) => {
      if (event.key !== ONBOARDING_COMPLETED_STORAGE_KEY) return;
      setIsCompleted(readCompletedFromStorage());
    };
    window.addEventListener("storage", handleStorage);
    return () => window.removeEventListener("storage", handleStorage);
  }, []);

  const markCompleted = React.useCallback(() => {
    try {
      window.localStorage.setItem(ONBOARDING_COMPLETED_STORAGE_KEY, "1");
    } catch {
      // best-effort; we still flip the in-memory flag below.
    }
    setIsCompleted(true);
  }, []);

  return { isCompleted, markCompleted } as const;
}