import { useState, useEffect, useCallback } from 'react';
import type { ViewerSettings } from '../types';

const STORAGE_KEY = 'mana-viewer-settings';

const defaultSettings: ViewerSettings = {
  mode: 'spread',
  direction: 'ltr',
  fitMode: 'width',
  backgroundColor: 'black',
  spreadStartOffset: 0,
};

export function useViewerSettings() {
  const [settings, setSettings] = useState<ViewerSettings>(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEY);
      return saved ? { ...defaultSettings, ...JSON.parse(saved) } : defaultSettings;
    } catch {
      return defaultSettings;
    }
  });

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
  }, [settings]);

  const updateSettings = useCallback((partial: Partial<ViewerSettings>) => {
    setSettings((prev) => ({ ...prev, ...partial }));
  }, []);

  const resetSettings = useCallback(() => {
    setSettings(defaultSettings);
  }, []);

  return { settings, updateSettings, resetSettings };
}