/* ============================================================
   Primitives — Toasts
   Extracted from components.jsx via split.py.
   Each component reaches React hooks via window.React.
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

/* ============================================================
   Reusable components.
   
   Kept deliberately small and composable — the idea is that future
   phases (Skills tab, Gear tab, etc.) import these building blocks
   rather than inventing their own.
   
   Hooks (useState, useEffect, etc.) come from window, hoisted in data.js.
   ============================================================ */

/* ------------------------------------------------------------
   Toast system. A tiny store sitting on window so any module can
   fire a toast. Good enough for Phase 1; later we might use context.
   ------------------------------------------------------------ */
window.SR5_TOASTS = (function() {
    const listeners = new Set();
    let idCounter = 0;

    function show(message, variant = 'default', ms = 2600) {
        const id = ++idCounter;
        const entry = { id, message, variant };
        listeners.forEach(fn => fn(add => [...add, entry]));
        setTimeout(() => {
            listeners.forEach(fn => fn(add => add.filter(t => t.id !== id)));
        }, ms);
    }

    function subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn); }
    return { show, subscribe };
})();


window.ToastHost = function ToastHost() {
    const [toasts, setToasts] = useState([]);
    useEffect(() => SR5_TOASTS.subscribe(fn => setToasts(fn)), []);
    return (
        <div className="toast-container">
            {toasts.map(t => (
                <div key={t.id} className={`toast ${t.variant}`}>{t.message}</div>
            ))}
        </div>
    );
};