// AvatarMenu.jsx — Avatar dropdown with session, theme, language, logout
const { useState: useAvState, useEffect: useAvEffect, useRef: useAvRef } = React;

function useSession() {
  const [session, setSession] = useAvState(null);
  const [loading, setLoading] = useAvState(true);

  useAvEffect(() => {
    supabaseClient.auth.getSession().then(({ data }) => {
      setSession(data.session);
      setLoading(false);
    });
    const { data: { subscription } } = supabaseClient.auth.onAuthStateChange((_event, sess) => {
      setSession(sess);
    });
    return () => subscription.unsubscribe();
  }, []);

  return { session, loading };
}

function AvatarMenu({ currentRoute, uiMode = 'easy', onToggleMode }) {
  const [open, setOpen] = useAvState(false);
  const [theme, setTheme] = useAvState(() => localStorage.getItem('el-theme') || 'dark');
  const [lang, setLang] = useAvState(() => localStorage.getItem('el-lang') || 'no');
  const [gamify, setGamify] = useAvState(() => localStorage.getItem('el-gamify') === 'true');
  const [mode, setMode] = useAvState(() => uiMode || localStorage.getItem('el-uimode') || 'easy');
  const menuRef = useAvRef(null);
  const { session } = useSession();

  useAvEffect(() => {
    setMode(uiMode || localStorage.getItem('el-uimode') || 'easy');
  }, [uiMode]);

  useAvEffect(() => {
    const handler = e => setMode(e.detail || localStorage.getItem('el-uimode') || 'easy');
    window.addEventListener('el-uimode-change', handler);
    return () => window.removeEventListener('el-uimode-change', handler);
  }, []);

  // Close on outside click
  useAvEffect(() => {
    function handleClick(e) {
      if (menuRef.current && !menuRef.current.contains(e.target)) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

  function toggleTheme() {
    const next = theme === 'dark' ? 'light' : 'dark';
    setTheme(next);
    localStorage.setItem('el-theme', next);
    document.documentElement.setAttribute('data-theme', next);
  }

  function toggleLang() {
    const next = lang === 'no' ? 'en' : 'no';
    setLang(next);
    localStorage.setItem('el-lang', next);
    window.dispatchEvent(new CustomEvent('el-lang-change', { detail: next }));
    if (window.i18next) {
      window.i18next.changeLanguage(next);
    }
  }

  function setUiModeFromMenu(next) {
    setMode(next);
    if (onToggleMode) onToggleMode(next);
    else {
      localStorage.setItem('el-uimode', next);
      window.dispatchEvent(new CustomEvent('el-uimode-change', { detail: next }));
    }
  }

  function toggleGamify() {
    const next = !gamify;
    setGamify(next);
    localStorage.setItem('el-gamify', String(next));
    window.dispatchEvent(new CustomEvent('el-gamify-change', { detail: next }));
  }

  function handleLogout() {
    supabaseClient.auth.signOut().then(() => {
      window.location.href = '/login.html';
    });
  }

  const demoUser = window.EASYLIFE_DEMO?.enabled ? window.EASYLIFE_DEMO.user : null;
  const email = session?.user?.email || demoUser?.email || '';
  const name = session?.user?.user_metadata?.full_name || demoUser?.user_metadata?.full_name || email.split('@')[0] || 'U';
  const initials = name.slice(0, 2).toUpperCase();

  return (
    <div className="av-wrap" ref={menuRef}>
      <button
        className="el-avatar"
        onClick={() => setOpen(o => !o)}
        title={name}
        aria-label="Open user menu"
      >
        {initials}
      </button>

      {open && (
        <div className="av-menu open">
          <div className="av-user">
            <div className="av-user-name">{name || 'EasyLife User'}</div>
            {email && <div className="av-user-sub">{email}</div>}
            <div className="av-user-sub" style={{ opacity: 0.45, fontSize: 10, marginTop: 2 }}>build #1201</div>
          </div>


          <div className="av-mode-switch" role="group" aria-label={lang === 'en' ? 'Switch between Easy and Pro' : 'Bytt mellom Easy og Pro'}>
            <button
              className={`av-mode-btn ${mode === 'easy' ? 'active' : ''}`}
              onClick={() => setUiModeFromMenu('easy')}
            >
              <i className="ti ti-sparkles"></i>
              Easy
            </button>
            <button
              className={`av-mode-btn ${mode === 'pro' ? 'active' : ''}`}
              onClick={() => setUiModeFromMenu('pro')}
            >
              <i className="ti ti-flame"></i>
              Pro
            </button>
          </div>

          <div className="av-row" onClick={toggleTheme}>
            <i className={`ti ${theme === 'dark' ? 'ti-moon' : 'ti-sun'}`}></i>
            <span className="av-row-lbl">
              {theme === 'dark'
                ? (lang === 'en' ? 'Dark' : 'Mørkt')
                : (lang === 'en' ? 'Light' : 'Lyst')}
            </span>
            <button
              className={`av-toggle ${theme === 'dark' ? 'on' : ''}`}
              onClick={e => { e.stopPropagation(); toggleTheme(); }}
              aria-label="Toggle theme"
            />
          </div>

          <div className="av-row" onClick={toggleLang}>
            <i className="ti ti-language"></i>
            <span className="av-row-lbl">Språk / Language</span>
            <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--accent)', flexShrink: 0 }}>
              {lang === 'no' ? 'NO' : 'EN'}
            </span>
          </div>

          {typeof GamifyToggleRow !== 'undefined' && (
            <GamifyToggleRow
              enabled={gamify}
              onToggle={toggleGamify}
              theme={theme}
            />
          )}

          <hr className="av-sep" />

          <div className="av-row" onClick={handleLogout}>
            <i className="ti ti-logout"></i>
            <span className="av-row-lbl">{lang === 'en' ? 'Log out' : 'Logg ut'}</span>
          </div>
        </div>
      )}
    </div>
  );
}