import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';

const STORAGE_KEY = 'baby-sleep-settings';

export interface Settings {
  dayStart: string;
  dayEnd: string;
  wakeupRef: string;
  bedtimeRef: string;
  statsInterval: number;
  sessionsPerPage: number;
}

interface SettingsContextType {
  settings: Settings;
  update: (key: keyof Settings, value: string | number) => void;
}

export const SettingsContext = createContext<SettingsContextType | undefined>(undefined);

const DEFAULT_SETTINGS: Settings = {
  dayStart: '07:00',
  dayEnd: '20:00',
  wakeupRef: '04:00',
  bedtimeRef: '19:00',
  statsInterval: 7,
  sessionsPerPage: 10,
};

export function SettingsProvider({ children }: { children: ReactNode }) {
  const [settings, setSettings] = useState<Settings>(() => {
    if (typeof window === 'undefined') return DEFAULT_SETTINGS;
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored) {
      try {
        return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) };
      } catch {
        return DEFAULT_SETTINGS;
      }
    }
    return DEFAULT_SETTINGS;
  });

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

  const update = (key: keyof Settings, value: string | number) => {
    setSettings((prev) => ({ ...prev, [key]: value }));
  };

  return (
    <SettingsContext.Provider value={{ settings, update }}>
      {children}
    </SettingsContext.Provider>
  );
}