import { createContext, useCallback, useContext, useEffect, useState } from "react";
import { api } from "./api";
import { useAuth } from "./auth";
import { formatBestBefore, formatDate, setGebindeFormen } from "./units";

export const DATE_FORMAT_KEY = "date_format";
const DEFAULT_FORMAT = "de";

const SettingsContext = createContext({
  dateFormat: DEFAULT_FORMAT,
  formatDate: (iso) => formatDate(iso, DEFAULT_FORMAT),
  formatBestBefore: (iso, precision) => formatBestBefore(iso, precision, DEFAULT_FORMAT),
  reload: () => {},
});

/** Lädt die anzeigerelevanten Einstellungen einmal nach dem Login. */
export function SettingsProvider({ children }) {
  const { user } = useAuth();
  const [dateFormat, setDateFormat] = useState(DEFAULT_FORMAT);

  const reload = useCallback(async () => {
    try {
      const rows = await api.listSettings();
      const row = rows.find((r) => r.key === DATE_FORMAT_KEY);
      setDateFormat(row?.value || DEFAULT_FORMAT);
    } catch {
      /* Einstellungen sind optional – Standard bleibt bestehen. */
    }
    try {
      // Mehrzahlformen der Gebinde. Sie landen in einer Modulvariablen, weil
      // auch Nicht-Komponenten (die Formatierer in units.js) sie brauchen.
      setGebindeFormen(await api.listPackageTypes());
    } catch {
      /* Ohne Liste bleibt die Einzahl stehen – unschoen, aber nicht falsch. */
    }
  }, []);

  useEffect(() => {
    if (user) reload();
  }, [user, reload]);

  const value = {
    dateFormat,
    formatDate: (iso) => formatDate(iso, dateFormat),
    // MHD: Monatsangaben erscheinen als "09/2026", Tagesdaten im gewaehlten Format.
    formatBestBefore: (iso, precision) => formatBestBefore(iso, precision, dateFormat),
    reload,
  };

  return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
}

export function useSettings() {
  return useContext(SettingsContext);
}