project.linkedcorp.net/frontend/src/context/ui-context.jsx

import { createContext, useContext, useEffect, useMemo, useState, useCallback } from 'react';
import { messages } from '../i18n/messages.js';

const UiContext = createContext(null);

function readStored(key, fallback) {
  try {
    return localStorage.getItem(key) || fallback;
  } catch {
    return fallback;
  }
}

export function UiProvider({ children }) {
  const [theme, setThemeState] = useState(() => readStored('plc_theme', 'dark'));
  const [lang, setLangState] = useState(() => readStored('plc_lang', 'es-EC'));
  const [buttonMode, setButtonModeState] = useState(() => readStored('plc_button_mode', 'icon-text'));
  const [dialog, setDialog] = useState(null);
  const [toasts, setToasts] = useState([]);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('plc_theme', theme);
  }, [theme]);

  useEffect(() => {
    document.documentElement.setAttribute('lang', lang);
    localStorage.setItem('plc_lang', lang);
  }, [lang]);

  useEffect(() => {
    document.documentElement.setAttribute('data-button-mode', buttonMode);
    localStorage.setItem('plc_button_mode', buttonMode);
  }, [buttonMode]);

  const t = useCallback((key) => messages[lang]?.[key] ?? messages['es-EC'][key] ?? key, [lang]);

  const openDialog = useCallback((config) => setDialog(config), []);
  const closeDialog = useCallback(() => setDialog(null), []);

  const pushToast = useCallback((toast) => {
    const id = Date.now() + Math.random();
    setToasts((prev) => [...prev, { id, tone: 'info', ...toast }]);
    setTimeout(() => setToasts((prev) => prev.filter((t2) => t2.id !== id)), 4000);
  }, []);

  const value = useMemo(
    () => ({
      theme, setTheme: setThemeState,
      lang, setLang: setLangState,
      buttonMode, setButtonMode: setButtonModeState,
      t, dialog, openDialog, closeDialog,
      toasts, pushToast,
    }),
    [theme, lang, buttonMode, t, dialog, openDialog, closeDialog, toasts, pushToast]
  );

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

export function useUi() {
  const ctx = useContext(UiContext);
  if (!ctx) throw new Error('useUi debe usarse dentro de UiProvider');
  return ctx;
}