// Protected route + UserMenu: guards pages that require auth; shows avatar dropdown when logged in

const PrivateRoute = ({ route, children }) => {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <div className="pb-splash" data-testid="auth-splash">
        <span>· · ·</span>
      </div>
    );
  }

  if (!user) {
    // Show gate modal as a blocking overlay; protected page content is NOT rendered
    return <AuthGateModal route={route} />;
  }

  return children;
};

const UserMenu = () => {
  const t = useT();
  const m = t.auth.menu;
  const { user, logout } = useAuth();
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  // Close dropdown when clicking outside
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  if (!user) return null;

  const initial = (user.name || user.email || '?').trim().charAt(0).toUpperCase();
  const handle = (path) => () => { setOpen(false); navigateTo(path); };
  const onSignOut = async () => {
    setOpen(false);
    await logout();
    navigateTo('/');
  };

  return (
    <div className="pb-user-menu" ref={ref}>
      <button
        className="pb-user-avatar-btn"
        onClick={() => setOpen((v) => !v)}
        aria-haspopup="menu"
        aria-expanded={open}
        data-testid="user-menu-trigger"
      >
        <span className="pb-user-avatar">{initial}</span>
        <span className="pb-user-name">{user.name || user.email}</span>
        <span className="pb-user-caret">▾</span>
      </button>
      {open && (
        <div className="pb-user-dropdown" role="menu" data-testid="user-menu-dropdown">
          <div
            className="pb-user-dropdown-item"
            role="menuitem"
            onClick={handle('/dashboard')}
            data-testid="user-menu-center"
          >{m.center}</div>
          <div
            className="pb-user-dropdown-item"
            role="menuitem"
            onClick={handle('/report')}
          >{m.reports}</div>
          <div className="pb-user-dropdown-divider" />
          <div
            className="pb-user-dropdown-item danger"
            role="menuitem"
            onClick={onSignOut}
            data-testid="user-menu-signout"
          >{m.signout}</div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { PrivateRoute, UserMenu });