// Day / Night theme switcher (floating button bottom-right).
const { useState: twState } = React;

const THEME_MODES = {
  night: { theme: 'carbon',   accent: '#4ade80' },
  day:   { theme: 'daylight', accent: '#a78bfa' },
};

function useThemeMode() {
  const [mode, setMode] = twState(() => {
    try { return localStorage.getItem('tw-mode') || 'night'; }
    catch (e) { return 'night'; }
  });
  const set = (m) => {
    try { localStorage.setItem('tw-mode', m); } catch (e) {}
    setMode(m);
  };
  return [mode, set];
}

function ThemeToggle({ mode, setMode }) {
  const next = mode === 'night' ? 'day' : 'night';
  return (
    <button className="tw-fab" title={`Switch to ${next} theme`}
      onClick={() => setMode(next)}>
      {mode === 'night' ? (
        <svg width="17" height="17" viewBox="0 0 20 20">
          <path d="M15.5 12.3A6 6 0 1 1 7.7 4.5a5.2 5.2 0 0 0 7.8 7.8Z"
            fill="currentColor" />
        </svg>
      ) : (
        <svg width="17" height="17" viewBox="0 0 20 20">
          <circle cx="10" cy="10" r="3.6" fill="currentColor" />
          <g stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            <path d="M10 1.5v2.4M10 16.1v2.4M1.5 10h2.4M16.1 10h2.4
                     M3.7 3.7l1.7 1.7M14.6 14.6l1.7 1.7
                     M16.3 3.7l-1.7 1.7M5.4 14.6l-1.7 1.7" />
          </g>
        </svg>
      )}
    </button>
  );
}

Object.assign(window, { useThemeMode, ThemeToggle, THEME_MODES });