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

type Initializer<T> = T | (() => T);

const isBrowser = typeof window !== "undefined";

function readFromStorage<T>(key: string, fallback: Initializer<T>): T {
  if (!isBrowser) {
    return typeof fallback === "function" ? (fallback as () => T)() : fallback;
  }
  try {
    const raw = window.localStorage.getItem(key);
    if (raw) {
      return JSON.parse(raw) as T;
    }
  } catch (error) {
    console.warn("Failed to parse localStorage value", { key, error });
  }
  return typeof fallback === "function" ? (fallback as () => T)() : fallback;
}

export function usePersistentState<T>(key: string, initial: Initializer<T>) {
  const initialRef = useRef<T | null>(null);
  if (initialRef.current === null) {
    initialRef.current = readFromStorage<T>(key, initial);
  }
  const [value, setValue] = useState<T>(() => initialRef.current as T);

  useEffect(() => {
    if (!isBrowser) return;
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.warn("Failed to write localStorage value", { key, error });
    }
  }, [key, value]);

  return [value, setValue] as const;
}