import { useCallback, useEffect, useRef, useState } from 'react';

/**
 * Generic hook for managing localStorage state.
 *
 * The setter is **referentially stable** (and safe against stale closures): it
 * keeps the latest value in a ref and updates via a functional `setState`. This
 * matters because several callers put the setter (directly or through a chain of
 * callbacks) in an effect's dependency array — an unstable identity there causes
 * the effect to re-run every render, and if it also sets state that is an
 * infinite render loop.
 */
export function useLocalStorage<T>(
  key: string,
  defaultValue: T,
  serializer?: {
    serialize: (value: T) => string;
    deserialize: (value: string) => T;
  }
) {
  // Keep the serializer in a ref so `serialize`/`deserialize` stay stable even
  // when callers pass an inline object literal on every render.
  const serializerRef = useRef(serializer);
  serializerRef.current = serializer;
  const serialize = useCallback(
    (value: T) => (serializerRef.current?.serialize ?? JSON.stringify)(value),
    [],
  );
  const deserialize = useCallback(
    (value: string) => (serializerRef.current?.deserialize ?? JSON.parse)(value),
    [],
  );

  const [state, setState] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? deserialize(item) : defaultValue;
    } catch (error) {
      console.warn(`Failed to load ${key} from localStorage:`, error);
      return defaultValue;
    }
  });

  // Mirror the latest state so the stable setter can support functional updates
  // without a stale closure.
  const stateRef = useRef(state);
  stateRef.current = state;

  const defaultValueRef = useRef(defaultValue);
  defaultValueRef.current = defaultValue;

  // Re-read when the key CHANGES (e.g. a per-account key once the user logs in
  // or switches accounts). The lazy initializer only runs on mount.
  const prevKeyRef = useRef(key);
  useEffect(() => {
    if (prevKeyRef.current === key) return;
    prevKeyRef.current = key;
    try {
      const item = localStorage.getItem(key);
      const next = item ? deserialize(item) : defaultValueRef.current;
      stateRef.current = next;
      setState(next);
    } catch (error) {
      console.warn(`Failed to load ${key} from localStorage:`, error);
    }
  }, [key, deserialize]);

  const setValue = useCallback(
    (value: T | ((prev: T) => T)) => {
      try {
        const valueToStore = value instanceof Function ? value(stateRef.current) : value;
        stateRef.current = valueToStore;
        setState(valueToStore);
        localStorage.setItem(key, serialize(valueToStore));
      } catch (error) {
        console.warn(`Failed to save ${key} to localStorage:`, error);
      }
    },
    [key, serialize],
  );

  // Sync with localStorage changes from other tabs
  useEffect(() => {
    const handleStorageChange = (e: StorageEvent) => {
      if (e.key === key && e.newValue !== null) {
        try {
          const next = deserialize(e.newValue);
          stateRef.current = next;
          setState(next);
        } catch (error) {
          console.warn(`Failed to sync ${key} from localStorage:`, error);
        }
      }
    };

    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, [key, deserialize]);

  return [state, setValue] as const;
}