'use client';

import { useCallback, useSyncExternalStore } from 'react';

/**
 * Hydration-safe browser storage as an external store: the server snapshot is the fallback, the client reads
 * storage on subscribe (no setState-in-effect), same-tab writes are broadcast through a tiny emitter.
 */
const listeners = new Set<() => void>();
const emit = () => {
  for (const l of listeners) l();
};

function subscribe(l: () => void) {
  listeners.add(l);
  window.addEventListener('storage', l);
  return () => {
    listeners.delete(l);
    window.removeEventListener('storage', l);
  };
}

export function useStoredValue(key: string, fallback: string, area: 'local' | 'session' = 'local'): [string, (v: string) => void] {
  const read = useCallback(() => {
    try {
      const store = area === 'local' ? window.localStorage : window.sessionStorage;
      return store.getItem(key) ?? fallback;
    } catch {
      return fallback;
    }
  }, [key, fallback, area]);
  const value = useSyncExternalStore(subscribe, read, () => fallback);
  const set = useCallback(
    (v: string) => {
      try {
        const store = area === 'local' ? window.localStorage : window.sessionStorage;
        if (v) store.setItem(key, v);
        else store.removeItem(key);
      } catch {
        /* private mode */
      }
      emit();
    },
    [key, area],
  );
  return [value, set];
}