frontend/src/hooks/useLocalStorage.ts

import { useCallback, useEffect, useState } from "react";

/**
 * useState mirrored into localStorage. Used for auth session, selected model,
 * and API keys so a reload doesn't lose them (same convenience the Streamlit
 * session_state provided).
 */
export function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    try {
      const raw = window.localStorage.getItem(key);
      return raw !== null ? (JSON.parse(raw) as T) : initial;
    } catch {
      return initial;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch {
      /* storage full or unavailable — ignore */
    }
  }, [key, value]);

  const remove = useCallback(() => {
    try {
      window.localStorage.removeItem(key);
    } catch {
      /* ignore */
    }
  }, [key]);

  return [value, setValue, remove] as const;
}