// ─────────────────────────────────────────────
//  ThemeToggle.jsx — Alternância Dark / Light
// ─────────────────────────────────────────────

function ThemeToggle({ size = 36 }) {
  // Sempre inicia no dark — preferência não é restaurada entre sessões
  const [dark, setDark] = React.useState(true);

  // Aplica o tema e persiste no localStorage
  React.useEffect(() => {
    const html = document.documentElement;

    // Ativa transições suaves
    html.setAttribute('data-transitioning', '');

    if (dark) {
      html.removeAttribute('data-theme');
      html.style.colorScheme = 'dark';
    } else {
      html.setAttribute('data-theme', 'light');
      html.style.colorScheme = 'light';
    }

    try { localStorage.setItem('bb-theme', dark ? 'dark' : 'light'); } catch {}

    const t = setTimeout(() => html.removeAttribute('data-transitioning'), 420);
    return () => clearTimeout(t);
  }, [dark]);

  const baseStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: size,
    height: size,
    borderRadius: 8,
    background: 'transparent',
    border: '1px solid var(--border-default)',
    color: 'var(--fg-2)',
    cursor: 'pointer',
    padding: 0,
    flexShrink: 0,
    transition: 'color 150ms, border-color 150ms, background 150ms',
  };

  return (
    <button
      style={baseStyle}
      onClick={() => setDark(d => !d)}
      title={dark ? 'Ativar modo claro' : 'Ativar modo escuro'}
      aria-label={dark ? 'Ativar modo claro' : 'Ativar modo escuro'}
      onMouseEnter={e => {
        e.currentTarget.style.color = 'var(--fg-1)';
        e.currentTarget.style.borderColor = 'var(--border-strong)';
        e.currentTarget.style.background = 'var(--bg-surface-3)';
      }}
      onMouseLeave={e => {
        e.currentTarget.style.color = 'var(--fg-2)';
        e.currentTarget.style.borderColor = 'var(--border-default)';
        e.currentTarget.style.background = 'transparent';
      }}
    >
      {dark
        /* ☀ Modo claro: sol → indicar que vai clarear */
        ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" strokeWidth="1.75" strokeLinecap="round">
            <circle cx="12" cy="12" r="4.5"/>
            <line x1="12" y1="2"    x2="12"    y2="4.5"/>
            <line x1="12" y1="19.5" x2="12"    y2="22"/>
            <line x1="4.22" y1="4.22"   x2="5.93"  y2="5.93"/>
            <line x1="18.07" y1="18.07" x2="19.78" y2="19.78"/>
            <line x1="2"    y1="12"  x2="4.5"   y2="12"/>
            <line x1="19.5" y1="12"  x2="22"    y2="12"/>
            <line x1="4.22"  y1="19.78" x2="5.93"  y2="18.07"/>
            <line x1="18.07" y1="5.93"  x2="19.78" y2="4.22"/>
          </svg>
        /* ☾ Modo escuro: lua → indicar que vai escurecer */
        : <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
              strokeLinejoin="round">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
      }
    </button>
  );
}

Object.assign(window, { ThemeToggle });