'use client';

import { useCallback, useMemo, useState, useSyncExternalStore } from 'react';
import { readLocalJson, writeLocalJson } from '@/lib/offline/safeStorage';

export type DashboardDensity = 'comfortable' | 'dense';

const FALLBACK_DENSITY: DashboardDensity = 'comfortable';

function isDashboardDensity(value: unknown): value is DashboardDensity {
  return value === 'comfortable' || value === 'dense';
}

export function useDashboardDensity(storageKey: string) {
  const hydrated = useSyncExternalStore(
    () => () => {},
    () => true,
    () => false,
  );
  const storedDensity = useMemo(
    () =>
      hydrated ? readLocalJson(storageKey, FALLBACK_DENSITY, isDashboardDensity) : FALLBACK_DENSITY,
    [hydrated, storageKey],
  );
  const [localDensity, setDensityState] = useState<{
    storageKey: string;
    density: DashboardDensity;
  } | null>(null);
  const density = localDensity?.storageKey === storageKey ? localDensity.density : storedDensity;

  const setDensity = useCallback(
    (nextDensity: DashboardDensity) => {
      setDensityState({ storageKey, density: nextDensity });
      writeLocalJson(storageKey, nextDensity);
    },
    [storageKey],
  );

  return { density, setDensity };
}